playbooks

home / skills / vaayne / agent-kit / frontend-improver

frontend-improver skill

/skills/frontend-improver

This skill helps you enhance and refine UI by applying targeted steering commands across design, accessibility, performance, and polish.

npx playbooks add skill vaayne/agent-kit --skill frontend-improver

Review the files below or copy the command above to add this skill to your agents.

Files (18)
SKILL.md
5.3 KB
---
name: frontend-improver
description: 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.
user-invokable: true
args:
  - name: target
    description: The feature, component, or area to improve (optional)
    required: false
  - name: action
    description: Specific action — adapt, animate, audit, bolder, clarify, colorize, critique, delight, distill, extract, harden, normalize, onboard, optimize, polish, quieter, teach-impeccable (optional, runs full review if omitted)
    required: false
---

# 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

1. **Assess** — Read the target code and understand the current state
2. **Diagnose** — Identify which dimensions need improvement
3. **Apply** — Use the appropriate steering command(s) below
4. **Verify** — Confirm improvements and check for regressions

## Steering Command References

Apply these skills as needed based on the diagnosed issues:

- [Adapt](references/adapt.md) — responsive design, cross-platform adaptation
- [Animate](references/animate.md) — motion, transitions, micro-interactions
- [Audit](references/audit.md) — accessibility, performance, theming audit
- [Bolder](references/bolder.md) — amplify visual impact and intensity
- [Clarify](references/clarify.md) — UX writing, labels, error messages
- [Colorize](references/colorize.md) — color strategy, visual engagement
- [Critique](references/critique.md) — design evaluation, visual hierarchy
- [Delight](references/delight.md) — personality, joy, memorable touches
- [Distill](references/distill.md) — simplify, remove unnecessary complexity
- [Extract](references/extract.md) — reusable components and design tokens
- [Harden](references/harden.md) — error handling, i18n, edge cases
- [Normalize](references/normalize.md) — design system consistency
- [Onboard](references/onboard.md) — onboarding flows, empty states
- [Optimize](references/optimize.md) — performance, speed, efficiency
- [Polish](references/polish.md) — final pass, pixel-perfect details
- [Quieter](references/quieter.md) — reduce visual intensity
- [Teach Impeccable](references/teach-impeccable.md) — project design context setup

## Full Review Mode

When no specific `action` is given, run a full review:

1. **Critique** the overall design quality first
2. **Audit** for accessibility and performance issues
3. **Normalize** to match design system
4. **Clarify** any confusing copy or labels
5. **Colorize** if the interface lacks visual interest
6. **Bolder** if the design feels too safe
7. **Animate** where motion would improve usability
8. **Adapt** for responsive/cross-platform needs
9. **Harden** for error handling and edge cases
10. **Onboard** if first-time experience needs work
11. **Extract** reusable patterns into design system
12. **Distill** to remove unnecessary complexity
13. **Optimize** for performance
14. **Polish** as the final pass
15. **Delight** to add memorable finishing touches

Report findings as a prioritized list of improvements, then implement the highest-impact changes.

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.

FAQ

Can I run multiple commands in one session?

Yes. You can run a single targeted command or omit the action to run the full multi-step review that sequences all relevant commands.

Will this change code automatically?

The skill produces prioritized recommendations and concrete implementation suggestions. It can produce code-level patches when appropriate, but review and testing are recommended before merging.