[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JC16WRQPRS8F86N6WPRY6A":3,"skill-same:01M6JC16WRQPRS8F86N6WPRY6A":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":53,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6JC16WRQPRS8F86N6WPRY6A","21st-dev",null,"Install and use 21st.dev components — the largest shadcn\u002Fui-compatible registry of React + Tailwind + Framer Motion components (Magic UI, Aceternity UI, originui, eldoraui, kokonutui, Skiper UI, etc.). Use when the user wants Awwwards-tier homepage polish, animated heroes, marquees, bento grids, scroll reveals, pricing cards, testimonials, FAQ accordions, or any high-quality landing-page block. Stack: Next.js + Tailwind 4 + React 19 + framer-motion.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002F21st-dev\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"21st dev","dev","page","framer","aceternity ui","tailwind 4","react 19","next","framer motion","install","landing","pricing","stack","polish","Tailwind","ui","shadcn","registry","react","components","2026-11-10 10:12:30",false,"---\nname: 21st-dev\ndescription: \"Install and use 21st.dev components — the largest shadcn\u002Fui-compatible registry of React + Tailwind + Framer Motion components (Magic UI, Aceternity UI, originui, eldoraui, kokonutui, Skiper UI, etc.). Use when the user wants Awwwards-tier homepage polish, animated heroes, marquees, bento grids, scroll reveals, pricing cards, testimonials, FAQ accordions, or any high-quality landing-page block. Stack: Next.js + Tailwind 4 + React 19 + framer-motion.\"\n---\n\n# 21st.dev\n\n21st.dev is the \"npm for design engineers\" — an open-source community registry (MIT) of high-quality React + Tailwind components, blocks, and hooks. It is shadcn-compatible: every component is installed with the standard `npx shadcn@latest add` CLI, just pointed at a 21st.dev URL.\n\n## Prerequisites\n\n- Node 18+ and `npx`\n- A Next.js \u002F Vite \u002F React Router \u002F Astro project\n- Tailwind CSS v3 or v4 (Tailwind 4 requires shadcn CLI v4+, March 2026 or newer)\n- React 18 or 19\n- shadcn initialized once (writes `components.json`, `src\u002Flib\u002Futils.ts`, `src\u002Fcomponents\u002Fui\u002Fbutton.tsx`, and shadcn theme tokens into `globals.css`)\n\n## One-time setup (per project)\n\n```bash\n# Initialize shadcn — creates components.json, ui\u002F, lib\u002Futils.ts, theme tokens\ncd \u003Cproject-root>\nnpx --yes shadcn@latest init -d --force\n```\n\n`-d` uses defaults (Next.js template, base-nova preset). `--force` overwrites any prior config.\n\nImportant — **the init step rewrites `--background`, `--foreground`, `--primary`, `--accent` in `globals.css` to neutral oklch values**. If your project already has brand colors mapped to those CSS variables (Weblyfe does — emerald + gold + snow), you must restore the brand mappings immediately after init:\n\n```css\n:root {\n  \u002F* Keep brand vars *\u002F\n  --brand-emerald: #247459;\n  --brand-gold: #DFB771;\n  --brand-snow: #F6FEFC;\n  \u002F* ... *\u002F\n\n  \u002F* Re-map shadcn slots to brand *\u002F\n  --background: var(--brand-snow);\n  --foreground: var(--brand-green-goblin);\n  --primary: var(--brand-emerald);\n  --accent: var(--brand-gold);\n  \u002F* keep the rest of shadcn's tokens (card, popover, secondary, border, ring, etc.) *\u002F\n}\n```\n\nAlso restore `--font-sans` if you use a custom font variable (shadcn replaces it with `var(--font-sans)`):\n\n```css\n@theme inline {\n  --font-sans: var(--font-rethink), system-ui, sans-serif;\n  --font-heading: var(--font-rethink), system-ui, sans-serif;\n}\n```\n\n## Adding a 21st.dev component\n\nBrowse https:\u002F\u002F21st.dev → pick a component → click \"Code\" \u002F copy the install URL. Then:\n\n```bash\nnpx --yes shadcn@latest add \"https:\u002F\u002F21st.dev\u002Fr\u002F\u003Cauthor>\u002F\u003Ccomponent>\" --yes\n```\n\nThe CLI:\n1. Creates `src\u002Fcomponents\u002Fui\u002F\u003Ccomponent>.tsx`\n2. Installs npm dependencies (e.g. framer-motion, @radix-ui\u002F*)\n3. Patches `globals.css` with any required `@theme` keyframes \u002F variables\n\nImport with the alias:\n\n```tsx\nimport { Marquee } from \"@\u002Fcomponents\u002Fui\u002Fmarquee\";\n```\n\n## Component catalogue — best for Weblyfe homepage\n\nBrowse the full registry at https:\u002F\u002F21st.dev. Here are the picks most relevant to the Appie hero + TIPS structure:\n\n| Use case | Component | Registry path |\n|---|---|---|\n| Hero with animated avatar + gradient | `magicui\u002Fanimated-hero` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fanimated-hero` |\n| Hero with text shimmer + spotlight | `aceternity\u002Fspotlight` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002Fspotlight` |\n| Sticky scroll narrative (the TIPS reveal) | `aceternity\u002Fsticky-scroll-reveal` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002Fsticky-scroll-reveal` |\n| Logo \u002F partner marquee strip | `magicui\u002Fmarquee` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fmarquee` |\n| Customer-case bento grid | `aceternity\u002Fbento-grid` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002Fbento-grid` |\n| 3D card hover (case-study cards) | `aceternity\u002F3d-card` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002F3d-card` |\n| Pricing tier cards | `originui\u002Fpricing` (search `pricing-section`) | `https:\u002F\u002F21st.dev\u002Fcommunity\u002Fcomponents\u002Fs\u002Fpricing-section` |\n| Testimonial marquee | `magicui\u002Ftestimonial-marquee` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Ftestimonials` |\n| Animated FAQ accordion | `kokonutui\u002Ffaq-accordion` | `https:\u002F\u002F21st.dev\u002Fcommunity\u002Fcomponents\u002Fs\u002Ffaq` |\n| Animated number counter (KPIs) | `magicui\u002Fnumber-ticker` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fnumber-ticker` |\n| Globe \u002F world-map (Bangkok ↔ NL trust) | `magicui\u002Fglobe` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fglobe` |\n| Particle \u002F dot background | `magicui\u002Fparticles` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fparticles` |\n| Animated beam (network diagram) | `magicui\u002Fanimated-beam` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fanimated-beam` |\n| Border beam glow effect | `magicui\u002Fborder-beam` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fborder-beam` |\n\nMany authors publish multiple variants (e.g. magicui has hero-pill, hero-video-dialog, hero-section). Always preview on 21st.dev before installing.\n\n## Discovery workflow\n\n1. Open https:\u002F\u002F21st.dev\u002Fs\u002F\u003Ckeyword> (e.g. `\u002Fs\u002Fhero`, `\u002Fs\u002Fpricing`, `\u002Fs\u002Ftestimonial`)\n2. Filter by Popular or Featured\n3. Click a card → preview the live demo\n4. Click \"Code\" → copy the `npx shadcn@latest add` URL\n5. Paste into terminal in project root\n\nFor semantic search across the registry, the **Magic Console** (https:\u002F\u002F21st.dev\u002Fmagic\u002Fconsole) offers free semantic component search and SVG icon search. Generation features (auto-creating bespoke variants) require the $20\u002Fmonth Pro plan but are not needed for installing existing components.\n\n## Magic MCP (optional — paid feature)\n\nFor prompt-driven component generation inside Claude Code:\n\n```bash\nnpx --yes @21st-dev\u002Fcli@latest install claude --api-key \u003CKEY>\n```\n\nAPI keys come from https:\u002F\u002F21st.dev\u002Fmagic\u002Fconsole. The MCP exposes `\u002Fui` for prompt-to-component generation. **This is not required** — the free `npx shadcn add \u003Curl>` flow gives you every published component on the registry.\n\n## Stack-specific notes for weblyfe-ai\n\n- **Tailwind 4**: Already wired. shadcn v4 CLI (March 2026+) handles `@theme inline` and `@custom-variant dark` automatically.\n- **Next.js 16 + React 19**: Fully supported. shadcn writes Server-Component-safe code by default.\n- **framer-motion 12**: Already installed; many 21st.dev components depend on it and will reuse the existing version rather than re-installing.\n- **Brand preservation**: After every `shadcn add`, scan `globals.css` for newly-added `--background` \u002F `--primary` overrides and re-map to brand vars if needed. The CLI usually only appends `@theme` rules and keyframes (safe), but `init` is the one to watch.\n- **Path aliases**: Components land in `src\u002Fcomponents\u002Fui\u002F*.tsx` and import via `@\u002Fcomponents\u002Fui\u002F*` and `@\u002Flib\u002Futils`. Already set up in `tsconfig.json`.\n- **Dark mode**: shadcn writes a `.dark` block. We currently do not use dark mode on \u003Cproject-domain> — leave the block in place but do not toggle the class.\n\n## Smoke-test pattern\n\nAlways verify a new install with a throwaway page before integrating into the homepage:\n\n```tsx\n\u002F\u002F src\u002Fapp\u002Flabs\u002F\u003Ccomponent-name>\u002Fpage.tsx\nimport { NewComponent } from \"@\u002Fcomponents\u002Fui\u002Fnew-component\";\n\nexport default function Lab() {\n  return (\n    \u003Cmain className=\"min-h-screen container py-24\">\n      \u003CNewComponent \u002F>\n    \u003C\u002Fmain>\n  );\n}\n```\n\nThen `npm run build` to confirm it compiles end-to-end. Once verified, port the component into the real homepage section and delete the lab page (or keep `\u002Flabs\u002F*` as a private gallery).\n\n## Licensing\n\n21st.dev itself is MIT. Individual components inherit each author's license — check the component page footer. Most are MIT\u002FApache and safe for commercial use. Aceternity UI, Magic UI, originui, kokonutui are all MIT.\n\n## Red flags\n\n- Some components depend on heavy 3D libs (three, @react-three\u002Ffiber, ogl). Check the `dependencies` block on the 21st.dev component page before installing — the CLI will pull them in silently.\n- A few authors ship components that import paid Aceternity Pro assets. The free preview will install but render placeholder text. Read the component page carefully.\n- If a component references `cn` from `@\u002Flib\u002Futils` and your project uses a different alias, edit the import after install.\n\n## References\n\n- Registry: https:\u002F\u002F21st.dev\n- GitHub: https:\u002F\u002Fgithub.com\u002Fserafimcloud\u002F21st (MIT)\n- Magic MCP (paid): https:\u002F\u002Fgithub.com\u002F21st-dev\u002Fmagic-mcp\n- shadcn v4 changelog: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fchangelog\u002F2026-03-cli-v4\n- Tailwind 4 + shadcn: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftailwind-v4\n","# 21st.dev\n\n21st.dev is the \"npm for design engineers\" — an open-source community registry (MIT) of high-quality React + Tailwind components, blocks, and hooks. It is shadcn-compatible: every component is installed with the standard `npx shadcn@latest add` CLI, just pointed at a 21st.dev URL.\n\n## Prerequisites\n\n- Node 18+ and `npx`\n- A Next.js \u002F Vite \u002F React Router \u002F Astro project\n- Tailwind CSS v3 or v4 (Tailwind 4 requires shadcn CLI v4+, March 2026 or newer)\n- React 18 or 19\n- shadcn initialized once (writes `components.json`, `src\u002Flib\u002Futils.ts`, `src\u002Fcomponents\u002Fui\u002Fbutton.tsx`, and shadcn theme tokens into `globals.css`)\n\n## One-time setup (per project)\n\n```bash\n# Initialize shadcn — creates components.json, ui\u002F, lib\u002Futils.ts, theme tokens\ncd \u003Cproject-root>\nnpx --yes shadcn@latest init -d --force\n```\n\n`-d` uses defaults (Next.js template, base-nova preset). `--force` overwrites any prior config.\n\nImportant — **the init step rewrites `--background`, `--foreground`, `--primary`, `--accent` in `globals.css` to neutral oklch values**. If your project already has brand colors mapped to those CSS variables (Weblyfe does — emerald + gold + snow), you must restore the brand mappings immediately after init:\n\n```css\n:root {\n  \u002F* Keep brand vars *\u002F\n  --brand-emerald: #247459;\n  --brand-gold: #DFB771;\n  --brand-snow: #F6FEFC;\n  \u002F* ... *\u002F\n\n  \u002F* Re-map shadcn slots to brand *\u002F\n  --background: var(--brand-snow);\n  --foreground: var(--brand-green-goblin);\n  --primary: var(--brand-emerald);\n  --accent: var(--brand-gold);\n  \u002F* keep the rest of shadcn's tokens (card, popover, secondary, border, ring, etc.) *\u002F\n}\n```\n\nAlso restore `--font-sans` if you use a custom font variable (shadcn replaces it with `var(--font-sans)`):\n\n```css\n@theme inline {\n  --font-sans: var(--font-rethink), system-ui, sans-serif;\n  --font-heading: var(--font-rethink), system-ui, sans-serif;\n}\n```\n\n## Adding a 21st.dev component\n\nBrowse https:\u002F\u002F21st.dev → pick a component → click \"Code\" \u002F copy the install URL. Then:\n\n```bash\nnpx --yes shadcn@latest add \"https:\u002F\u002F21st.dev\u002Fr\u002F\u003Cauthor>\u002F\u003Ccomponent>\" --yes\n```\n\nThe CLI:\n1. Creates `src\u002Fcomponents\u002Fui\u002F\u003Ccomponent>.tsx`\n2. Installs npm dependencies (e.g. framer-motion, @radix-ui\u002F*)\n3. Patches `globals.css` with any required `@theme` keyframes \u002F variables\n\nImport with the alias:\n\n```tsx\nimport { Marquee } from \"@\u002Fcomponents\u002Fui\u002Fmarquee\";\n```\n\n## Component catalogue — best for Weblyfe homepage\n\nBrowse the full registry at https:\u002F\u002F21st.dev. Here are the picks most relevant to the Appie hero + TIPS structure:\n\n| Use case | Component | Registry path |\n|---|---|---|\n| Hero with animated avatar + gradient | `magicui\u002Fanimated-hero` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fanimated-hero` |\n| Hero with text shimmer + spotlight | `aceternity\u002Fspotlight` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002Fspotlight` |\n| Sticky scroll narrative (the TIPS reveal) | `aceternity\u002Fsticky-scroll-reveal` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002Fsticky-scroll-reveal` |\n| Logo \u002F partner marquee strip | `magicui\u002Fmarquee` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fmarquee` |\n| Customer-case bento grid | `aceternity\u002Fbento-grid` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002Fbento-grid` |\n| 3D card hover (case-study cards) | `aceternity\u002F3d-card` | `https:\u002F\u002F21st.dev\u002Fr\u002Faceternity\u002F3d-card` |\n| Pricing tier cards | `originui\u002Fpricing` (search `pricing-section`) | `https:\u002F\u002F21st.dev\u002Fcommunity\u002Fcomponents\u002Fs\u002Fpricing-section` |\n| Testimonial marquee | `magicui\u002Ftestimonial-marquee` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Ftestimonials` |\n| Animated FAQ accordion | `kokonutui\u002Ffaq-accordion` | `https:\u002F\u002F21st.dev\u002Fcommunity\u002Fcomponents\u002Fs\u002Ffaq` |\n| Animated number counter (KPIs) | `magicui\u002Fnumber-ticker` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fnumber-ticker` |\n| Globe \u002F world-map (Bangkok ↔ NL trust) | `magicui\u002Fglobe` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fglobe` |\n| Particle \u002F dot background | `magicui\u002Fparticles` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fparticles` |\n| Animated beam (network diagram) | `magicui\u002Fanimated-beam` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fanimated-beam` |\n| Border beam glow effect | `magicui\u002Fborder-beam` | `https:\u002F\u002F21st.dev\u002Fr\u002Fmagicui\u002Fborder-beam` |\n\nMany authors publish multiple variants (e.g. magicui has hero-pill, hero-video-dialog, hero-section). Always preview on 21st.dev before installing.\n\n## Discovery workflow\n\n1. Open https:\u002F\u002F21st.dev\u002Fs\u002F\u003Ckeyword> (e.g. `\u002Fs\u002Fhero`, `\u002Fs\u002Fpricing`, `\u002Fs\u002Ftestimonial`)\n2. Filter by Popular or Featured\n3. Click a card → preview the live demo\n4. Click \"Code\" → copy the `npx shadcn@latest add` URL\n5. Paste into terminal in project root\n\nFor semantic search across the registry, the **Magic Console** (https:\u002F\u002F21st.dev\u002Fmagic\u002Fconsole) offers free semantic component search and SVG icon search. Generation features (auto-creating bespoke variants) require the $20\u002Fmonth Pro plan but are not needed for installing existing components.\n\n## Magic MCP (optional — paid feature)\n\nFor prompt-driven component generation inside Claude Code:\n\n```bash\nnpx --yes @21st-dev\u002Fcli@latest install claude --api-key \u003CKEY>\n```\n\nAPI keys come from https:\u002F\u002F21st.dev\u002Fmagic\u002Fconsole. The MCP exposes `\u002Fui` for prompt-to-component generation. **This is not required** — the free `npx shadcn add \u003Curl>` flow gives you every published component on the registry.\n\n## Stack-specific notes for weblyfe-ai\n\n- **Tailwind 4**: Already wired. shadcn v4 CLI (March 2026+) handles `@theme inline` and `@custom-variant dark` automatically.\n- **Next.js 16 + React 19**: Fully supported. shadcn writes Server-Component-safe code by default.\n- **framer-motion 12**: Already installed; many 21st.dev components depend on it and will reuse the existing version rather than re-installing.\n- **Brand preservation**: After every `shadcn add`, scan `globals.css` for newly-added `--background` \u002F `--primary` overrides and re-map to brand vars if needed. The CLI usually only appends `@theme` rules and keyframes (safe), but `init` is the one to watch.\n- **Path aliases**: Components land in `src\u002Fcomponents\u002Fui\u002F*.tsx` and import via `@\u002Fcomponents\u002Fui\u002F*` and `@\u002Flib\u002Futils`. Already set up in `tsconfig.json`.\n- **Dark mode**: shadcn writes a `.dark` block. We currently do not use dark mode on \u003Cproject-domain> — leave the block in place but do not toggle the class.\n\n## Smoke-test pattern\n\nAlways verify a new install with a throwaway page before integrating into the homepage:\n\n```tsx\n\u002F\u002F src\u002Fapp\u002Flabs\u002F\u003Ccomponent-name>\u002Fpage.tsx\nimport { NewComponent } from \"@\u002Fcomponents\u002Fui\u002Fnew-component\";\n\nexport default function Lab() {\n  return (\n    \u003Cmain className=\"min-h-screen container py-24\">\n      \u003CNewComponent \u002F>\n    \u003C\u002Fmain>\n  );\n}\n```\n\nThen `npm run build` to confirm it compiles end-to-end. Once verified, port the component into the real homepage section and delete the lab page (or keep `\u002Flabs\u002F*` as a private gallery).\n\n## Licensing\n\n21st.dev itself is MIT. Individual components inherit each author's license — check the component page footer. Most are MIT\u002FApache and safe for commercial use. Aceternity UI, Magic UI, originui, kokonutui are all MIT.\n\n## Red flags\n\n- Some components depend on heavy 3D libs (three, @react-three\u002Ffiber, ogl). Check the `dependencies` block on the 21st.dev component page before installing — the CLI will pull them in silently.\n- A few authors ship components that import paid Aceternity Pro assets. The free preview will install but render placeholder text. Read the component page carefully.\n- If a component references `cn` from `@\u002Flib\u002Futils` and your project uses a different alias, edit the import after install.\n\n## References\n\n- Registry: https:\u002F\u002F21st.dev\n- GitHub: https:\u002F\u002Fgithub.com\u002Fserafimcloud\u002F21st (MIT)\n- Magic MCP (paid): https:\u002F\u002Fgithub.com\u002F21st-dev\u002Fmagic-mcp\n- shadcn v4 changelog: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fchangelog\u002F2026-03-cli-v4\n- Tailwind 4 + shadcn: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftailwind-v4\n",{"name":5,"description":7},"master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcontent\u002F21st-dev",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add S3YED\u002Fappie-kit --skill 21st-dev",{"tool":62,"command":63},"bunx","bunx skills add S3YED\u002Fappie-kit --skill 21st-dev",{"tool":65,"command":66},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill 21st-dev","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002F21st-dev\u002FSKILL.md",true,[],[71,103,135,159,190,215],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":84,"publishedAt":43},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[77,80,83],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":81,"categoryName":82,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":117,"publishedAt":43},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[109,112],{"categoryNo":110,"categoryName":111,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":113,"categoryName":114,"taxonomyType":115,"taxonomyTypeDesc":116},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[118,119,120,121,122,123,124,42,125,126,127,38,37,128,129,130,131,132,133,134],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","generate","design systems","website","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":143,"publishedAt":43},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[141,142],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":113,"categoryName":114,"taxonomyType":115,"taxonomyTypeDesc":116},[119,144,123,145,146,147,42,40,148,149,150,151,152,153,154,155,32,156,157,158],"elements","agentic webdesign agent elements","MCP","ai agent","search","streaming","open source","open","Bash","plan","subagent","edit","input","lock","source",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":169,"publishedAt":43},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[165,168],{"categoryNo":166,"categoryName":167,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":197,"publishedAt":43},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[196],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":216,"name":217,"nameZh":6,"description":218,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":219,"categories":220,"keywords":228,"publishedAt":43},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[221,224,227],{"categoryNo":222,"categoryName":223,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":225,"categoryName":226,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[41,229,230,231,232,233,234,235,173,236,237,42,238,176,239,207,240,241,242,243],"component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]