ReddRadar
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
vaayne/agent-kit
pi-delegate
Delegate tasks to Pi subagents with preset roles (oracle, worker, reviewer, ui-engineer, librarian) or ad-hoc prompts. Use for fresh context, model specialization, second opinions, code review, isolated execution, or parallel task delegation.
vaayne/agent-kit
mcp-jetbrains-ide
Control JetBrains IDE (IntelliJ, WebStorm, PyCharm) via MCP. Use when manipulating IDE files, running configurations, searching code, or performing refactoring. Triggers on "open in IDE", "run configuration", "refactor code", "IDE search", "JetBrains".
vaayne/agent-kit
mcp-context7-docs
Query up-to-date documentation and code examples for any programming library or framework. Use when looking up API docs, finding code examples, or checking library usage. Triggers on "how to use [library]", "docs for [package]", "show me examples of [framework]", "Context7 lookup".
vaayne/agent-kit
web-fetch
Fetch and extract clean content from URLs using Jina Reader API. Use when users need to read webpage content, extract article text, or fetch URL content for analysis. Triggers on "fetch this page", "read this URL", "extract content from", "get the content of", "what does this page say".
vaayne/agent-kit
tmux
Control interactive terminal sessions via tmux. Use when tasks need persistent REPLs, parallel CLI agents, or any process requiring a TTY that simple shell execution cannot handle.
vaayne/agent-kit
specs-dev
Plan-first development workflow with review gates. Use when implementing features, refactoring, or any task requiring structured planning, iterative implementation with reviews, and clean commits. Triggers on requests like "implement feature X", "plan and build", "spec-driven development", or when user wants disciplined, reviewed code changes.
Didn't find tool you were looking for?