Start with the problem you can point to. Give the agent the relevant screen, a clear user task and the constraints it must preserve. Use one suitable skill for that pass, then inspect the result in the interface.
Method
How we chose
A skill gives a coding agent reusable instructions, sometimes with references or supporting tools. You still supply the product context. This shortlist follows five complementary use cases. The order is editorial, and the example requests are our suggestions in ordinary language, not official commands.
- A clear job: each pick addresses a recognizable design or usability problem.
- An official source where you can inspect the guidance and check current setup instructions.
- Practical output you can review, such as a focused change, a motion proposal or a list of findings.
- Distinct strengths and limits, without treating the list as a benchmark or a compatibility guarantee.
Recommendations
The shortlist
Impeccable
Best for refining an existing page that feels generic or visually inconsistent
- Hierarchy
- Typography
- Layout
Impeccable covers design critique, audits, typography, layout and visual hierarchy. Start here when a working screen’s priorities are hard to read. Supply the page and its shared components, then ask which elements compete for attention. A useful pass clarifies headings, groups related controls and makes spacing consistent within the existing design system.
Polish this settings page. Keep our components, colors and content. Identify three hierarchy problems, then make the main action easier to find.
Emil Kowalski’s UI skills
Best for interaction details and comparing possible UI treatments
- Interactions
- Prototypes
- Motion review
This collection includes design engineering, animation, motion reviews, prototypes and Apple-inspired guidance. Choose the part that fits your interaction. A popover needs a clear relationship to its trigger, responsive opening and closing, and sensible behavior during repeated toggles. Prototypes can help compare treatments before one becomes the implementation.
Review this popover’s motion. Make opening and closing feel quick and connected to the trigger. Check repeated toggles and reduced motion.
Motion Design by LottieFiles
Best for giving transitions and state feedback a clear purpose
- State feedback
- Timing
- Reduced motion
Motion Design covers timing, easing, choreography and feedback across interface states. Its guidance is implementation-agnostic: decide what movement communicates before choosing how to build it. For a loading-to-success transition, the user needs to understand that the action finished. Animation should clarify that message without delaying the next action.
Design a loading-to-success transition for this save button. Keep it calm, avoid moving the surrounding layout, and provide a reduced-motion version with the same clear feedback.
UI/UX Pro Max
Best for turning a product brief into a coherent visual starting point
- Visual direction
- Color
- Typography
UI/UX Pro Max offers searchable guidance on styles, palettes, typography, charts, UX and implementation stacks. Use it while the visual direction is open. Describe the audience, information density and main task, then ask for explained choices. A dashboard for busy teams needs readable status information and restrained emphasis before decoration.
Suggest a calm dashboard direction for busy teams. Explain the typography and color choices using our content. Identify which existing design tokens to keep.
Web Interface Guidelines by Vercel
Best for a focused usability review before shipping
- Keyboard access
- Forms
- Usability review
This skill asks the agent to fetch current guidelines, inspect target files and report findings with file and line references. The rules cover keyboard access, focus, forms, motion, layout and accessibility. Use it on an implemented screen. Findings should name the affected control and the behavior needing attention.
Review this checkout against the current Web Interface Guidelines. Give file and line references before suggesting fixes. Separate confirmed issues from behavior needing browser testing.
Put it to work
A practical workflow
- 1
Choose by problem: Impeccable for refinement, Emil’s collection for interactions, Motion Design for transitions, UI/UX Pro Max for direction, or Web Interface Guidelines for review.
- 2
Supply relevant files, shared components and real content. Explain who uses the screen and what they need to finish. Add a screenshot when useful.
- 3
Preserve the brand, behavior and existing components. Exclude unrelated screens and new dependencies. Ask for three priority findings before edits.
- 4
Compare the changed screen with the original. Check whether the main task is clearer and challenge cosmetic changes that do not address the problem.
- 5
Verify narrow and wide layouts, keyboard navigation and reduced motion where relevant. Request a record of checks actually run and anything still unverified.
- 6
Keep useful decisions in your project guidance. Reuse improved components and their rules on similar screens instead of reinventing them on every task.
A prompt to reuse
A UI-polish prompt you can reuse
Improve [screen] for [audience] so they can [task]. Inspect the UI and components first. Use one relevant installed design skill; if none is available, say so and continue. Preserve branding, content and behavior. Before edits, list the 3 biggest usability problems. Fix hierarchy, spacing, type, contrast and mobile layout using existing components. Keep keyboard focus visible and respect reduced motion; animate only to clarify feedback. Don’t add dependencies or change unrelated screens. Verify at 390px and 1440px, keyboard-test the main flow, and report checks actually run plus anything unverified. If you only have a screenshot, return an annotated plan instead of claiming code edits.
Quick answers
Frequently asked questions
Which skill should I start with?
Start with the problem you can describe. For weak hierarchy, try Impeccable. For an undecided visual direction, try UI/UX Pro Max. Use motion and review skills when those are the tasks.
Should I use all five on every screen?
Start with one skill and a bounded task. Add another for a later pass, such as reviewing usability after layout changes. Explain what each contributes and resolve any conflicting advice.
Are the example requests installation commands?
No. They describe work in ordinary language. Follow the linked official sources for current setup instructions and check availability in your agent. Compatibility differs by package and tool.
Is this a ranking of the best-performing skills?
No. These are complementary editorial picks, without a comparative benchmark. Judge their output against your screen’s task, design system and observed behavior rather than the order of this list.
Source notes
References and review policy
Source links provide further reading. Where a recorded technical review is available, the answer shows its date and scope. Tool selections use direct provider links and contain no affiliate placements. Sources, features, and hiring formats can change.
From reading to recall
Practice the full interview loop.
RecallDeck schedules the concepts you miss and keeps coding, design, and behavioral fundamentals available when the interviewer changes direction.