frontend-improver
Installation
SKILL.md
Frontend Improver
A unified entry point for all frontend improvement steering commands. Each command targets a specific dimension of interface quality.
Available Commands
Use action to run a specific command, or omit it to run a full review across all dimensions.
| Command | Purpose |
|---|---|
| adapt | Adapt designs across screen sizes, devices, and platforms |
| animate | Add purposeful animations and micro-interactions |
| audit | Comprehensive audit of accessibility, performance, and responsiveness |
| bolder | Amplify safe or boring designs to be more visually interesting |
| clarify | Improve UX copy, error messages, labels, and microcopy |
| colorize | Add strategic color to monochromatic interfaces |
| critique | Evaluate design effectiveness with actionable feedback |
| delight | Add moments of joy, personality, and unexpected touches |
| distill | Strip designs to their essence, remove unnecessary complexity |
| extract | Extract reusable components, tokens, and patterns into a design system |
| harden | Improve resilience with error handling, i18n, and edge cases |
| normalize | Normalize design to match your design system for consistency |
| onboard | Design or improve onboarding flows and first-time user experiences |
| optimize | Improve loading speed, rendering, animations, and bundle size |
| polish | Final quality pass for alignment, spacing, and consistency |
| quieter | Tone down overly bold or visually aggressive designs |
| teach-impeccable | One-time setup to gather and save project design context |
Workflow
- Assess — Read the target code and understand the current state
- Diagnose — Identify which dimensions need improvement
- Apply — Use the appropriate steering command(s) below
- Verify — Confirm improvements and check for regressions
Steering Command References
Apply these skills as needed based on the diagnosed issues:
- Adapt — responsive design, cross-platform adaptation
- Animate — motion, transitions, micro-interactions
- Audit — accessibility, performance, theming audit
- Bolder — amplify visual impact and intensity
- Clarify — UX writing, labels, error messages
- Colorize — color strategy, visual engagement
- Critique — design evaluation, visual hierarchy
- Delight — personality, joy, memorable touches
- Distill — simplify, remove unnecessary complexity
- Extract — reusable components and design tokens
- Harden — error handling, i18n, edge cases
- Normalize — design system consistency
- Onboard — onboarding flows, empty states
- Optimize — performance, speed, efficiency
- Polish — final pass, pixel-perfect details
- Quieter — reduce visual intensity
- Teach Impeccable — project design context setup
Full Review Mode
When no specific action is given, run a full review:
- Critique the overall design quality first
- Audit for accessibility and performance issues
- Normalize to match design system
- Clarify any confusing copy or labels
- Colorize if the interface lacks visual interest
- Bolder if the design feels too safe
- Animate where motion would improve usability
- Adapt for responsive/cross-platform needs
- Harden for error handling and edge cases
- Onboard if first-time experience needs work
- Extract reusable patterns into design system
- Distill to remove unnecessary complexity
- Optimize for performance
- Polish as the final pass
- Delight to add memorable finishing touches
Report findings as a prioritized list of improvements, then implement the highest-impact changes.