ss-shadcn-sveltelisted

Use shadcn-svelte components in SvelteKit projects. Detects whether the current project is a SvelteKit app with shadcn-svelte installed, lists available components, and provides access to full component documentation via the official llms.txt. Helps choose the right UI components for the job — buttons, forms, dialogs, tables, charts, and more — following shadcn-svelte best practices. Use this skill whenever the user is working in a SvelteKit project and wants to: add UI components, build forms, create dialogs or modals, add a data table, use a date picker, build a sidebar or navigation, add charts, use a combobox or select, create an alert or toast notification, or generally build UI with pre-built accessible components. Also trigger when the user mentions "shadcn", "shadcn-svelte", "bits-ui", or asks about available components in their Svelte project.
rajnandan1/such-skills · ★ 2 · Web & Frontend · score 75

Install: claude install-skill rajnandan1/such-skills

# shadcn-svelte — Component-Aware Svelte UI Assistant Use the right shadcn-svelte components when building UI in SvelteKit projects. This skill detects your project setup, shows what's available, and gives you access to full component documentation. ## Prerequisites The project must be a SvelteKit app with shadcn-svelte initialized: ```bash # Initialize shadcn-svelte in an existing SvelteKit project npx shadcn-svelte@latest init ``` ## How to use ### Step 1: Detect project setup Run the detection script to verify this is a SvelteKit project with shadcn-svelte and see which components are already installed: ```bash bash "${CLAUDE_SKILL_DIR}/scripts/detect.sh" . ``` This will: - Confirm it's a SvelteKit project (checks for `svelte.config.js/ts` and `@sveltejs/kit` in package.json) - Confirm shadcn-svelte is installed (checks for `components.json`, `bits-ui`, or `shadcn-svelte` in package.json) - List all currently installed components in the project's UI directory - Provide the documentation URL If the script exits with code 1, the project either isn't SvelteKit or doesn't have shadcn-svelte — do not proceed with shadcn-svelte components in that case. ### Step 2: Read the component documentation The full component documentation for LLMs is available at: ``` https://www.shadcn-svelte.com/llms.txt ``` Fetch this URL to get a structured index of all available components organized by category, with links to individual component documentation pages (in `.md` format).