Smart Svelte Component

Generate production-ready Svelte components with TypeScript support, proper prop typing, event forwarding, slot composition, and testing boilerplate following framework best practices.

When to Use This Command

Run this command when...

• You need to create a new Svelte component with proper TypeScript typing, exported props, and event handling from the start
• You want a component that follows established project conventions including file location, naming patterns, and testing setup
• Your component requires advanced Svelte features like slot forwarding, context API integration, or store subscriptions with correct patterns

Do NOT use this command when...

• You need to modify an existing component rather than create a new one
• You want a full page or route -- use the scaffold command for SvelteKit routes instead

Quick Start

Copy
# .claude/commands/smart-svelte-component.md
# Create Svelte component
Create component: $ARGUMENTS

Copy
# Run the command
claude "smart-svelte-component DataTable with sortable columns, pagination, and row selection"

Expected output:
- DataTable.svelte with typed props and events
- TypeScript interface definitions
- Slot-based customization points
- Unit test file with component rendering tests
- Usage example with sample data

Core Concepts

Concept	Description
Typed Props	Component inputs defined with TypeScript interfaces and export let declarations
Event Dispatching	Custom events using createEventDispatcher with typed payloads
Slot Composition	Named and default slots for flexible content projection
Reactive Declarations	$: statements for derived state that updates automatically
Component Context	setContext/getContext for deep prop passing without drilling

Component Architecture:

  Props (typed inputs)
       |
  [Component Logic]
  |         |        |
 State   Reactive  Context
  |    Declarations   |
  |         |        |
  [Render Template]
  |         |
 Slots    Events
  |         |
  Parent Component

Configuration

Parameter	Default	Description
Language	Auto-detect (TS/JS)	Whether to generate TypeScript or JavaScript component
Location	src/lib/components/	Directory where the component file is created
Test Framework	Vitest + testing-library	Testing setup used for generated test file
Style Approach	Scoped CSS	Scoped styles, Tailwind classes, or CSS modules
Documentation	JSDoc comments	Inline documentation style for props and events

Best Practices

1. Name components descriptively -- include the feature domain in your arguments like "UserProfileCard" rather than just "Card" so the generated component has meaningful prop names and test descriptions
2. Specify interactive behaviors -- mention "sortable", "filterable", "draggable" in your arguments to get proper event dispatching and keyboard interaction patterns
3. Declare data shape -- describe the data the component will display (e.g., "array of users with name, email, role") for accurate TypeScript interface generation
4. Request slots explicitly -- if the component needs customization points, state "with header slot and action slot" to get proper named slot scaffolding
5. Check existing components first -- review your src/lib/components directory before generating to avoid duplicating functionality or diverging from established patterns

Common Issues

1. TypeScript types too generic -- provide specific data shapes in your arguments. "DataTable for user objects" generates better types than "DataTable for data"
2. Generated tests fail immediately -- ensure your project has @testing-library/svelte and vitest configured. Run the test setup command first if needed
3. Component does not match project conventions -- the command reads your project's svelte.config.js and tsconfig.json. If conventions still mismatch, specify your preferred patterns explicitly