스킬 찾기

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

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

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

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

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

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, 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

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