Agent skill
frontend-improver
Improve frontend interfaces using 17 targeted steering commands covering design intensity, responsiveness, animation, accessibility, UX copy, color, critique, delight, simplification, extraction, hardening, normalization, onboarding, optimization, and polish. Use when the user wants to enhance, refine, or review an existing UI.
Install this agent skill to your Project
npx add-skill https://github.com/vaayne/agent-kit/tree/main/skills/frontend-improver
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.
Didn't find tool you were looking for?