# Animated Component Libraries ## Overview This skill provides component-source routing for polished React, Tailwind, shadcn/Radix, chart, toast, shader, and focused UI libraries. It is not only for animation. It is the "check the good shelves before hand-rolling" skill. ### Full creative-app boundary When the request is to build a complete focused design tool—not merely choose components—route to [[toolcraft]] only if the product needs a visual canvas plus meaningful controls and may need upload, history, pan/zoom, layers, timeline, keyframes, or image/video export. Toolcraft is an application architecture with editable runtime source and protected proof, not another component shelf. Keep ordinary websites, dashboards, forms, single effects, and small parameter overlays on the incumbent design system and the narrowest component source. Before selecting Toolcraft, name the product output, interaction ownership, animation intent, artifact/export intent, reference evidence, and acceptance proof. Generate a project only after explicit selection; do not bulk-install its repeated helper skills as global owners. [Source: `pixel-point/toolcraft@4b1e415b`, reviewed 2026-08-12] The current source shelf is: - **Vocabulary/source maps:** Component Gallery and Design Engineer Tools. - **Foundation:** shadcn/ui, Radix UI, and Base UI. - **Agent-ready design systems:** Astryx and Cloudflare Kumo. - **Block catalogs:** Blocks.so, shadcn registry directory, Tailwind Plus, Origin UI. - **Animated / chart sources:** Kokonut UI, Bklit UI, Magic UI, and Motion Primitives. - **Narrative timelines:** Lifeline for a bounded career, company, project, or journey story when a continuous temporal rail is the actual information job. - **Kevin-special craft sources:** Chanh Dai components, Skiper UI, Cult UI, Evil Charts. - **Small focused component libraries:** Sonner and the UI primitives shortlist. - **Animated/effect sources:** Magic UI, React Bits, Originkit, Fancy Components, Its Hover, lucide-animated, Super Hover, Shaders.com. - **Guarded references:** Originkit and Componentry one exact registry item at a time; Iconsax as a proprietary-license icon reference, never a bulk or open-source source. Before choosing one, read `wiki/design/component-library-sources.md` and `wiki/design/ui-library-ranking.md`. For animation engine choice, read `wiki/design/motion-library-ranking.md`; for Three.js/WebGL/R3F choice, read `wiki/design/web3d-library-ranking.md`. Those pages are the source of truth for the live routing order and recent additions. ## Progressive Disclosure This `SKILL.md` is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in `references/details.md` so they are loaded only when the task needs them. Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats. | Task branch | Read first | | --- | --- | | Source Shelf | `references/details.md#source-shelf` | | Library Selection Protocol | `references/details.md#library-selection-protocol` | | Complete named-catalog review / source-first exploration | `references/details.md#source-first-catalog-review`; dated inventories in `references/catalogs/` | | Distinct directions around a dominant interactive visual | `../design-engineering-polish/references/signature-first-exploration.md`; choose the signature before supporting catalog components | | Core Concepts | `references/details.md#core-concepts` | | Common Patterns | `references/details.md#common-patterns` | | Integration Patterns | `references/details.md#integration-patterns` | | Performance Optimization | `references/details.md#performance-optimization` | | Common Pitfalls | `references/details.md#common-pitfalls` | | Resources | `references/details.md#resources` | ## Related Skills - **motion-framer**: For understanding underlying animation concepts used by both libraries - **frontend-design**: For art direction and distinctive UI build decisions - **web-design-engineer**: For full polished web artifacts and named style recipes - **gsap-scrolltrigger**: Alternative approach for scroll-driven animations - **react-spring-physics**: Alternative physics-based animation library - **threejs-webgl**: For 3D background effects as alternative to Particles/Plasma ## 2026-06-30 Routing Additions - Use **Component Gallery** before prompting vague UI requests. Find the exact primitive name, synonym set, accessibility expectations, and design-system references, then feed those names into the UI build. - Use **Design Engineer Tools** when the problem is broader than component choice: inspiration, AI coding surface, motion, capture, 3D, interface design, visual tooling, fonts, or utilities. - Use **Its Hover** or **lucide-animated** for shadcn-installable animated React icons when the motion explains action, status, or affordance. Keep icons editable as source and verify license/style fit. - Use **Super Hover** only for moving or scrolling surfaces where native `:hover` cannot express the intended interaction. It is a creative enhancement, not a default app-state primitive. - Use **shadcn scroll-fade** before custom scroll masks when a container needs subtle overflow affordance without visible scrollbars. ## 2026-08-10 Guarded Source Additions - Use **Componentry** only when one exact expressive component is a strong fit. Inspect the registry JSON and every dependency, retokenize it, and verify accessibility, reduced motion, performance, lint, and tests locally. Do not bulk-add its registry or trust the MCP label as a security boundary. - Use **Iconsax** for icon discovery/reference only under its official proprietary free license. The website's “open source” wording and changing icon counts do not override the license terms: do not redistribute the pack loosely, transfer the license, omit required attribution/notices, or claim authorship. ## 2026-08-12 Narrative Timeline Route - Recommend **Lifeline** for an authored narrative timeline: one selected person, company, project, product history, or bounded journey with sparse milestones and media. Do not use it as the default workflow queue, audit log, or dense operational timeline; keep a literal list/search/detail route. - Treat `evilrabbit/lifeline@8ddbb3d` as a pinned reference, not an automatic install. Its MIT source, TypeScript check, and Next production build passed, but it has no tests, CI, or releases and its lint command reported 35 errors under the captured dependency lock. Before adoption, prove semantic controls, focus management, keyboard/touch parity, reduced motion, long/sparse data, current-date injection, resize, frame cost, and host-page scroll release. - For every source-copy registry, compare the exact live registry JSON with a registry rebuilt from the pinned source. Lifeline's live installer payload on 2026-08-12 matched its checked-in generated JSON but lagged four current source files. The payload delivered by the install URL is the dependency; branch code, README prose, and demo behavior do not substitute for payload parity. ## 2026-08-12 Originkit Route - Recommend **Originkit** when one named Framer/React effect—text, cursor, gallery, canvas, border, background, animation, or interaction—fits the art direction and owned primitives do not already cover it. Do not route a vague “make it premium” request to bulk installation. - Treat the saved X post, live preview, hosted registry, MCP response, npm CLI, and delivered component source as separate evidence. The current audit found 160 components and 48 sections, not a current 250+ component catalog. Pin the CLI invocation, but never infer component-source rights from the CLI's MIT license. - Inspect the exact payload before dependency installation. Record component terms, source hashes, composed registry items, remote imports, dependency and lifecycle-script changes, semantics, keyboard/touch behavior, reduced motion, teardown, visibility/offscreen suspension, frame cost, GPU/battery pressure, mobile behavior, and a static or low-power fallback. If component rights are not explicit, rebuild the interaction principle on owned code. - Do not globally install or authenticate Originkit for discovery. Prefer a pinned `npx originkit@0.2.23 list|search` call; fetch one item into a clean branch/worktree with `--dry-run --no-deps` before allowing any writes or package-manager scripts.