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.

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.