[{"_1":2,"_320":-5,"_321":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",true,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-channels","title","Claude Code Channels: Pushing Events Into a Session",{"_13":18,"_15":19},"claude-code-monitor-tool","What Claude Code's Monitor Tool Does",{"_13":21,"_15":22},"claude-code-subagent-forking","How Claude Code's Subagent Forking Works","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":31,"_32":33,"_318":31,"_319":111},"handle","huntabyte","displayName","profileUrl","https://github.com/huntabyte","verified",false,"skills",[34],{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_61":62,"_63":64,"_65":66,"_81":82,"_83":-5,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":-5,"_95":96,"_97":26,"_30":31,"_98":31,"_99":87,"_100":101,"_102":87,"_103":87,"_104":105,"_106":107,"_135":136,"_171":172,"_222":223,"_288":289,"_303":304,"_314":315,"_316":317},"id","gh__huntabyte__shadcn-svelte__skills-shadcn-svelte","shadcn-svelte-huntabyte","name","Shadcn Svelte","canonicalName","shadcn-svelte","tagline","Efficiently manage Svelte UI components and projects.","description","Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for \"shadcn-svelte init\", \"add component\", or registry URLs.","longDescription","Shadcn Svelte is a framework designed to streamline the development of user interfaces and design systems using Svelte. It allows developers to manage components and projects effectively by providing tools for adding, updating, fixing, debugging, and styling UI elements. The skill integrates seamlessly with the command-line interface (CLI), enabling users to interact with their Svelte projects through simple commands. This framework is particularly beneficial for developers looking to create consistent and reusable UI components without reinventing the wheel.\n\nThe skill reads the `components.json` file located at the root of your project, which helps maintain project context and provides access to a live file layout. With Shadcn Svelte, each component is organized in its own folder, making imports straightforward. Developers can utilize multi-part components or single-component barrels to keep their code clean and maintainable. The framework encourages the use of existing components and built-in variants, promoting best practices in UI design and development.\n\nShadcn Svelte is tailored for developers and designers who work with Svelte and are looking for a structured approach to building UI. It emphasizes the importance of composition over custom markup, ensuring that developers can create complex interfaces by combining existing components rather than starting from scratch. The skill also enforces critical rules for styling, forms, and component structure, which helps maintain consistency and accessibility across projects.\n\nOverall, Shadcn Svelte is a valuable tool for anyone involved in Svelte development, offering a robust set of features to enhance productivity and code quality in UI design.","primaryCategory","development","subcategory","frontend","secondaryCategories",[],"tags",[56,57,58,59,60],"svelte","ui-components","design-systems","cli","frontend-development","skillType","tool-wrapper","complexity","intermediate","platforms",[67,68,69,70,71,72,73,74,75,76,77,78,79,80],"claude-code","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","wrench","thumbnailColor","purple","thumbnailImageUrl","sellerId","gh__huntabyte","sellerName","featured","downloads","views",3,"rating","reviewCount","status","active","metrics",{"_108":109,"_110":111,"_112":111,"_113":109,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":111,"_131":132,"_133":134},"freshnessScore",100,"mirrorCount",1,"skillCountInRepo","qualityScore","popularityScore",80,"trustScore",65,"repoOpenIssues",124,"repoStars",9034,"repoWatchers",47,"repoContributors",194,"overallScore",88,"repoCreatedAt","2023-05-16T03:26:53Z","daysSinceUpdate","repoForks",562,"repoPushedAt","2026-08-09T08:01:50Z","source",{"_137":26,"_138":139,"_140":141,"_146":41,"_147":-5,"_144":148,"_149":150,"_151":31,"_152":153,"_154":155,"_161":162,"_163":7,"_164":165,"_166":167,"_168":169,"_170":169},"owner","repoUrl","https://github.com/huntabyte/shadcn-svelte","author",{"_28":29,"_142":143,"_38":26,"_25":26,"_144":145},"avatarUrl","https://github.com/huntabyte.png","type","User","repo","commitSha","github","branch","main","isOfficial","path","skills/shadcn-svelte","license",{"_38":156,"_157":158,"_159":160},"MIT License","spdxId","MIT","url","https://github.com/huntabyte/shadcn-svelte/blob/main/LICENSE.md","sourceUpdatedAt","2026-08-07T00:20:37.000Z","redistributable","permalink","https://github.com/huntabyte/shadcn-svelte/blob/main/skills/shadcn-svelte/SKILL.md","repoFullName","huntabyte/shadcn-svelte","lastSyncedAt","2026-08-11T01:20:53.263Z","firstSeenAt","seo",{"_173":174,"_185":186,"_187":188,"_206":-5,"_207":208,"_214":215,"_216":217,"_218":219,"_220":221},"useCases",[175,179,182],{"_15":176,"_177":178},"Setting Up a New Svelte Project","body","Quickly initialize a new Svelte project with Shadcn Svelte to manage UI components effectively.",{"_15":180,"_177":181},"Adding UI Components","Easily add and configure UI components using the CLI commands provided by Shadcn Svelte.",{"_15":183,"_177":184},"Maintaining Component Consistency","Ensure that your Svelte application maintains styling and structure consistency across various components.","whenNotToUse","This skill may not be suitable for projects that do not utilize Svelte or for those that require a more flexible, less structured approach to UI development.","faqs",[189,194,197,200,203],{"_190":191,"_192":193},"q","What is Shadcn Svelte?","a","Shadcn Svelte is a framework for building user interfaces and design systems using Svelte, focusing on component management.",{"_190":195,"_192":196},"How do I install Shadcn Svelte?","You can install Shadcn Svelte using your project's package runner, such as `npx shadcn-svelte@latest`.",{"_190":198,"_192":199},"What types of components can I use with Shadcn Svelte?","Shadcn Svelte supports various components, including multi-part components and single-component barrels, organized for easy import.",{"_190":201,"_192":202},"What are the critical rules enforced by Shadcn Svelte?","The skill enforces rules related to styling, forms, and component structure to ensure best practices and maintainability.",{"_190":204,"_192":205},"Who is the target audience for Shadcn Svelte?","Shadcn Svelte is aimed at developers and designers working with Svelte who need a structured approach to UI component development.","ogImageUrl","keywords",[209,210,211,212,213],"svelte components management","shadcn svelte","svelte ui framework","design systems svelte","svelte cli commands","whenToUse","Use Shadcn Svelte when developing Svelte applications that require a structured approach to UI components and design systems.","metaTitle","Shadcn Svelte - Manage Svelte UI Components","problemSolved","This skill simplifies the management of Svelte UI components, reducing the complexity of integrating and maintaining them in projects.","metaDescription","Streamline your Svelte UI development with Shadcn Svelte for efficient component management.","content",{"_224":225,"_226":227,"_267":268,"_278":279,"_280":31,"_281":282,"_286":287},"bundledFiles",10,"fileTree",[228,235,239,242,245,248,251,255,258,261,264],{"_152":229,"_230":231,"_144":232,"_233":234},"SKILL.md","size",14538,"file","language","markdown",{"_152":236,"_230":237,"_144":232,"_233":238},"agents/openai.yml",267,"yaml",{"_152":240,"_230":241,"_144":232},"assets/shadcn-svelte-small.png",2672,{"_152":243,"_230":244,"_144":232},"assets/shadcn-svelte.png",9410,{"_152":246,"_230":247,"_144":232,"_233":234},"cli.md",9935,{"_152":249,"_230":250,"_144":232,"_233":234},"customization.md",6392,{"_152":252,"_230":253,"_144":232,"_233":254},"evals/evals.json",3065,"json",{"_152":256,"_230":257,"_144":232,"_233":234},"rules/composition.md",6533,{"_152":259,"_230":260,"_144":232,"_233":234},"rules/forms.md",6337,{"_152":262,"_230":263,"_144":232,"_233":234},"rules/icons.md",2435,{"_152":265,"_230":266,"_144":232,"_233":234},"rules/styling.md",4458,"codeExamples",[269,273,275],{"_233":270,"_271":272},"ts","snippet","import * as Dialog from \"$lib/components/ui/dialog\";\nimport { Button } from \"$lib/components/ui/button\";\nimport { Separator } from \"$lib/components/ui/separator\";",{"_233":56,"_271":274},"\n\n\n\n \n Email\n \n \n\n\n\n\n Email\n \n Invalid email.\n\n\n\n\n\n\n

\n\n\n\n \n U\n\n\n\n+20.1%",{"_233":276,"_271":277},"bash","# Initialize shadcn-svelte in your project.\nnpx shadcn-svelte@latest init\n\n# Initialize with a preset string from the docs site builder.\nnpx shadcn-svelte@latest init --preset

\n\n# Add components (interactive when run with no names).\nnpx shadcn-svelte@latest add\nnpx shadcn-svelte@latest add button card dialog\nnpx shadcn-svelte@latest add --all\n\n# Update components already installed.\nnpx shadcn-svelte@latest update button\nnpx shadcn-svelte@latest update --all --yes\n\n# Build a custom registry (registry authors).\nnpx shadcn-svelte@latest registry build","skillMd","# shadcn-svelte\n\nA framework for building UI, components, and design systems for Svelte. Components are added as source to the user's project via the CLI.\n\n> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest`, or `bunx --bun shadcn-svelte@latest` — based on the project's package manager. Examples below use `npx shadcn-svelte@latest` but substitute the correct runner for the project.\n\n## Current Project Context\n\nRead `components.json` at the project root and, when you need the live file layout, list the directory given by the `aliases.ui` path (resolved with the same rules as the CLI).\n\n## Imports (Svelte)\n\nEach component lives in its own folder with an `index.ts` barrel. Match the [installation docs](https://shadcn-svelte.com/docs/installation):\n\n- **Multi-part components** (dialog, select, card, field, tabs, …): `import * as Dialog from \"$lib/components/ui/dialog\"` then `Dialog.Content`, `Dialog.Title`, `Card.Root`, `Card.Header`, etc. — whatever the barrel exports (short names and/or `Root as …` aliases).\n- **Single-component barrels** (only one meaningful component in the folder): **named imports** — `import { Button } from \"$lib/components/ui/button\"` and `\n\n\n
\n\n\n\n  \n  U\n\n\n\n+20.1%\n```\n\n## Component Selection\n\n| Need                       | Use                                                                                                 |\n| -------------------------- | --------------------------------------------------------------------------------------------------- |\n| Button/action              | `Button` with appropriate variant (`import { Button }`)                                             |\n| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |\n| Toggle between 2–5 options | `ToggleGroup.Root` + `ToggleGroup.Item`                                                             |\n| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |\n| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |\n| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |\n| Feedback                   | `svelte-sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                 |\n| Command palette            | `Command` inside `Dialog`                                                                           |\n| Charts                     | `Chart` (LayerChart)                                                                                |\n| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |\n| Empty states               | `Empty`                                                                                             |\n| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |\n| Tooltips/info              | `Tooltip`, `HoverCard`, `Popover`                                                                   |\n\n## Key Fields\n\nUse `components.json` and the filesystem — not a separate `info` command:\n\n- **`aliases`** → use the actual alias prefix from config (e.g. `$lib/`), never hardcode unrelated projects.\n- **`tailwind.css`** → the global CSS file where theme variables live. Edit this file for theme tweaks; don't add a second globals file unless the user already uses one.\n- **`style`** → visual treatment (e.g. `nova`, `vega`, …) and registry style path.\n- **`iconLibrary`** → determines icon packages (`@lucide/svelte`, `@tabler/icons-svelte`, etc.). Never assume `@lucide/svelte`.\n- **`registry`** → where the CLI fetches components; default official registry at `shadcn-svelte.com`.\n- **`resolvedPaths`** (conceptual) → the CLI resolves `aliases` to absolute paths; list `aliases.ui` on disk to see installed components.\n\nSee [cli.md](./cli.md) for commands and flags.\n\n## Component Docs, Examples, and Usage\n\nOpen `https://shadcn-svelte.com/docs/components/.md` for docs and examples. **When creating, fixing, debugging, or using a component, read the official page first** so you follow the documented APIs.\n\n## Workflow\n\n1. **Get project context** — read `components.json` and list the UI components directory when needed.\n2. **Check installed components first** — before running `add`, list files under the resolved `ui` path. Don't import components that haven't been added, and don't re-add ones already present unless updating.\n3. **Discover components** — `npx shadcn-svelte@latest add` with no arguments (interactive list), or the docs site.\n4. **Install or update** — `npx shadcn-svelte@latest add ` or a registry **URL**. To refresh existing files from the registry, use `npx shadcn-svelte@latest update` (see [cli.md](./cli.md)).\n5. **Fix imports in third-party / URL-added items** — After adding from a custom registry URL, check for hardcoded paths that don't match the project's `aliases`. Rewrite imports to use the project's `ui` / `lib` aliases from `components.json`.\n6. **Review added components** — After adding, **read the added files** and verify composition (groups, titles, validation attrs). Align icon imports with `iconLibrary`.\n7. **Remote registry items** — Adding by URL is explicit; if the user wants a component from an unknown source, confirm the registry URL or item before running `add`.\n\n## Updating Components\n\nUse the **`update`** command to pull the latest registry versions of components already in the project. Review changes with `git diff` after `update`.\n\n1. Commit or stash local work.\n2. Run `npx shadcn-svelte@latest update [component]` or `--all`.\n3. Resolve merge conflicts if you had customized files.\n4. **Never use `--overwrite` on `add` without the user's explicit approval** when it would destroy intentional edits.\n\n## Quick Reference\n\n```bash\n# Initialize shadcn-svelte in your project.\nnpx shadcn-svelte@latest init\n\n# Initialize with a preset string from the docs site builder.\nnpx shadcn-svelte@latest init --preset \n\n# Add components (interactive when run with no names).\nnpx shadcn-svelte@latest add\nnpx shadcn-svelte@latest add button card dialog\nnpx shadcn-svelte@latest add --all\n\n# Update components already installed.\nnpx shadcn-svelte@latest update button\nnpx shadcn-svelte@latest update --all --yes\n\n# Build a custom registry (registry authors).\nnpx shadcn-svelte@latest registry build\n```\n\n**Registry:** default `https://shadcn-svelte.com/registry` — override in `components.json` if needed.  \n**Docs:** [shadcn-svelte.com](https://shadcn-svelte.com)\n\n## Detailed References\n\n- [rules/forms.md](./rules/forms.md) — Field.FieldGroup, Field.Field, InputGroup, ToggleGroup, Field.FieldSet, validation states\n- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading\n- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icon components\n- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, class, spacing, size, truncate, dark mode, cn(), z-index\n- [cli.md](./cli.md) — Commands, flags, registry\n- [customization.md](./customization.md) — Theming, CSS variables, extending components","skillMdTruncated","frontmatter",{"_283":31,"_284":285,"_38":41,"_44":45},"user-invocable","allowed-tools","Bash(npx shadcn-svelte@latest *), Bash(pnpm dlx shadcn-svelte@latest *), Bash(bunx --bun shadcn-svelte@latest *)","totalSizeBytes",66042,"runtime",{"_290":7,"_291":31,"_292":-5,"_293":7,"_294":31,"_295":31,"_296":297,"_301":302},"requiresBash","requiresMcp","model","requiresNode","requiresNetwork","requiresPython","allowedTools",[298,299,300],"Bash(npx shadcn-svelte@latest *)","Bash(pnpm dlx shadcn-svelte@latest *)","Bash(bunx --bun shadcn-svelte@latest *)","dependencies",[],"install",{"_59":305,"_306":307,"_308":309,"_310":311,"_312":313},"npx skills add huntabyte/shadcn-svelte/shadcn-svelte","coordinate","huntabyte/shadcn-svelte/shadcn-svelte","browseUrl","https://github.com/huntabyte/shadcn-svelte/tree/main/skills/shadcn-svelte","downloadUrl","https://github.com/huntabyte/shadcn-svelte/archive/refs/heads/main.zip","gitUrl","https://github.com/huntabyte/shadcn-svelte.git","createdAt","2026-08-11T01:21:01.087Z","updatedAt","2026-08-17T16:01:32.279Z","hasNext","page","actionData","errors"]