{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","description":"Teaches AI coding assistants how to install SmoothUI components, blocks, and themes, and how to follow SmoothUI animation conventions.","files":[{"content":"---\nname: smoothui\ndescription: Install and use SmoothUI — animated React components and blocks built with Tailwind CSS v4 and Motion, distributed through a shadcn-compatible registry. Use when adding animated UI components, page blocks, or SmoothUI themes to a project.\n---\n\n# SmoothUI\n\nSmoothUI is a registry of animated React components (buttons, inputs, cards, AI chat primitives) and page blocks (heroes, pricing, testimonials, FAQs, CTAs) built with React 19, Tailwind CSS v4, and Motion (Framer Motion). Docs: https://smoothui.dev\n\n## Installing components\n\nEvery item installs through the shadcn CLI. Browse names at https://smoothui.dev/doc or fetch the machine-readable index at https://smoothui.dev/r/registry.json\n\n```bash\n# Single component\nnpx shadcn@latest add https://smoothui.dev/r/smooth-button.json\n\n# Page block (brings its dependencies automatically)\nnpx shadcn@latest add https://smoothui.dev/r/pricing-1.json\n```\n\nTo enable the short `@smoothui/<name>` syntax, add the namespace to `components.json`:\n\n```json\n{\n  \"registries\": {\n    \"@smoothui\": \"https://smoothui.dev/r/{name}.json\"\n  }\n}\n```\n\nThen: `npx shadcn@latest add @smoothui/smooth-button`\n\n## Where files land\n\n- Components and blocks: `components/smoothui/<name>/`\n- Shared block helpers: `components/smoothui/shared/`\n- Animation constants: `components/smoothui/lib/animation.ts`\n- Demo data helpers: `lib/smoothui-data/`\n\nImports inside installed files use the `@/` alias and resolve out of the box in any shadcn-initialized project.\n\n## Themes\n\nSmoothUI ships installable color themes (light + dark, standard shadcn CSS variables, compatible with Radix UI and Base UI projects):\n\n```bash\nnpx shadcn@latest add https://smoothui.dev/r/theme-candy.json\n# Also: theme-indigo, theme-blue, theme-red, theme-orange, theme-green\n```\n\n## Animation conventions (follow when extending SmoothUI components)\n\n- Animate only `transform` and `opacity`; durations 0.2–0.3s for UI.\n- Spring animations: `{ type: \"spring\", duration: 0.25, bounce: 0.1 }`; bounce above 0.1 only for playful or drag interactions.\n- Easing: `cubic-bezier` values, never string easing like `\"easeInOut\"`. Entering elements: `cubic-bezier(.23, 1, .32, 1)`.\n- Accessibility is mandatory: import `useReducedMotion` from `motion/react`, and disable or reduce animations when it returns true.\n- Hover-driven animation needs hover-capable device detection: `window.matchMedia(\"(hover: hover) and (pointer: fine)\")`.\n\n## AI-friendly endpoints\n\n- `https://smoothui.dev/llms.txt` — index for LLMs\n- `https://smoothui.dev/llms-full.txt` — full documentation dump\n- `https://smoothui.dev/llms-components.json` — structured component metadata\n","path":"SKILL.md","target":".claude/skills/smoothui/SKILL.md","type":"registry:file"}],"name":"skill","title":"SmoothUI Skill","type":"registry:item"}