frontend-improver_skill

Overview

This skill improves frontend interfaces using 17 targeted steering commands that focus on design intensity, responsiveness, accessibility, UX copy, color, animation, and overall polish. Use it to review, refine, or implement high-impact UI changes and to extract reusable patterns into a design system. It can run a single focused command or a full multi-step review to prioritize and implement improvements.

How this skill works

The skill reads the target frontend code and inspects visual, interaction, and technical dimensions to diagnose issues. You can invoke a single command (for example, audit, animate, or clarify) or run a full review that sequences critique, audit, normalize, and other passes. Outputs are prioritized improvement lists and concrete change suggestions or code-level fixes for the highest-impact items.

When to use it

• You have an existing UI that needs a structured review and prioritized improvements.
• You want to add animation, micro-interactions, or tasteful motion to improve usability.
• You need a comprehensive accessibility, performance, and responsiveness audit.
• You want to extract components and tokens into a reusable design system.
• You need to simplify, tone down, or amplify a design while preserving consistency.

Best practices

• Start with a critique and audit to identify the most critical issues before applying cosmetic changes.
• Run normalize/extract after design changes to keep components and tokens consistent across the app.
• Prefer incremental, testable changes: implement the highest-impact fixes first and verify regressions.
• Use clarify to tighten UX copy and onboard to improve first-time user activation.
• Combine optimize and harden when performance and resilience (edge cases, i18n) matter.

Example use cases

• Perform a full review on a product dashboard to prioritize accessibility and performance fixes, then implement the top three changes.
• Run colorize and bolder on a monochrome marketing site to increase conversion-focused visual contrast.
• Use animate and delight to add purposeful micro-interactions to a signup flow to reduce friction and improve perceived speed.
• Apply extract and normalize after a redesign to generate shared components and tokens for the design system.
• Invoke audit and harden before a major release to catch accessibility gaps and edge-case errors.