Browse skills

Design and review web interfaces using Apple’s principles for fluid interaction. Shape drags, swipes, and spring motion that can change direction mid-animation, alongside translucent layers, readable typography, and accessible alternatives to movement.

• Design drawers that follow the user's finger
• Carry swipe momentum into animations
• Refine translucent layers and typography

Find places in an interface where animation would help, then filter suggestions by frequency, purpose, speed, and function. Get precise motion settings and reasons for rejected candidates, without changing source code.

• Find useful places to add motion to an existing interface
• Specify timing and movement for dialogs and notifications
• Decide which interactions should stay free of animation

Review UI animation code for purposeful motion, responsive timing, correct origins, performance, and accessibility. Get a table of specific changes with reasons, followed by an approval or blocking decision ranked by impact.

• Review dropdown and tooltip animations
• Identify unnecessary motion in frequent actions
• Check animation performance risks

Find, add, and combine shadcn/ui components to build forms, dashboards, and other interfaces. Use project settings and component documentation to guide styling, debugging, preset changes, and updates that preserve local modifications.

• Build forms and dashboards from existing components
• Find and add components from registries
• Debug component structure and styling

Choose a frontend library for tasks such as notifications, charts, drag and drop, or shared application state. The skill checks existing dependencies and recommends one library from a curated list, with setup when requested.

• Choose a library for notifications or verification code inputs
• Select a chart library for live data or dashboards
• Find tools for drag and drop or long lists

Build UI animations by first deciding whether motion serves a useful purpose. Produces code with suitable timing, transitions, interruption behavior, exit paths, reduced motion support, and hover effects adapted to the input device.

• Add purposeful motion to buttons, modals, or drawers
• Build transitions that handle repeated actions and interruptions
• Adapt animations for reduced motion preferences and touch input

Turn a plain description of a web animation into the matching term from a curated glossary. Get a short definition and distinctions between similar effects so you can describe the motion to an AI or designer.

• Find the name of an animation you have seen
• Describe a desired motion effect in an AI prompt
• Distinguish between similar animation terms

Build and review interface components with guidance on animation timing, press feedback, drag behavior, and accessibility. Decide when motion helps, choose concrete settings, and explain proposed code changes in a before-and-after comparison.

• Refine button and menu interactions
• Choose animation timing and easing
• Improve drag behavior and interruptions

Audit an app’s animations for responsiveness, performance, and accessibility, then rank the findings by impact and effort. Produce detailed implementation plans that another agent can follow, while leaving source code unchanged during the audit.

• Audit animations across an entire app
• Prioritize motion issues by impact and effort
• Prepare implementation plans for another agent

Build distinct, working versions of one interface component and compare them at full size using a visual picker. Explore differences in layout, interaction, or motion, then integrate the version you choose into the project.

• Compare different layouts for a pricing card
• Try several notification interaction designs
• Explore motion choices for a hold-to-delete button