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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
A lookup skill. When invoked with a task ("I need toasts", "what should I use for drag and drop?"), match the task to the curated list below and recommend the library. These are deliberate, taste-driven picks — don't substitute alternatives outside this list unless the user asks for one or the task genuinely isn't covered.
package.json first. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked.| Task | Library |
|---|---|
| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) | base-ui |
| Command menus (⌘K palettes) | cmdk |
| Toasts / notifications | Sonner |
| One-time password / verification code inputs | input-otp |
| Customizable GUIs / control panels | Leva — dialkit is an alternative |
| Task | Library |
|---|---|
| General-purpose animation (springs, layout animations, enter/exit) | motion (Framer Motion) |
| Animating numbers (counters, prices, stats) | NumberFlow |
| Animated text components | torph |
| 3D globes | Cobe |
| Dynamic OG images (HTML/CSS → SVG/PNG) | Satori |
| Syntax highlighting | shiki |
Reach for motion when you need springs, layout animations, exit animations, or gesture-driven values. A simple hover or fade doesn't need it — plain CSS transitions are the right tool there.
| Task | Library |
|---|---|
| Real-time / streaming charts | Liveline |
| General charts (static or interactive dashboards) | recharts |
The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
| Task | Library |
|---|---|
| Drag and drop | dnd kit |
| Virtualization (long lists, large tables) | Virtuoso |
| Task | Library |
|---|---|
| State management | zustand |
Constructing className strings conditionally | clsx |
| Type-safe, variant-driven styling for Tailwind | cva |
| Theme switching / dark mode (no flash on load) | next-themes |
The styling split: clsx for ad-hoc conditional classes; cva when a component has real variants (size, intent, state) that deserve a typed API. They compose — cva uses clsx-style inputs internally.
<div>-based dropdown/dialog with manual focus handling → base-ui, which handles accessibility, focus trapping, and dismissal.useState-per-component web of props for shared state → zustand.아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.