Smart Svelte Tool

Intelligently route Svelte development requests to the optimal action -- whether component creation, optimization, testing, or scaffolding -- based on natural language task descriptions.

When to Use This Command

Run this command when...

• You have a Svelte development task but are unsure which specific command (component, scaffold, optimize, test) would be best
• You want an intelligent dispatcher that analyzes your request and applies the most appropriate Svelte development patterns
• Your task involves multiple Svelte concerns such as creating a component with tests and accessibility compliance in one step

Do NOT use this command when...

• You know exactly which specialized command to use -- calling it directly is faster and more predictable
• Your task is not related to Svelte or SvelteKit development at all

Quick Start

Copy
# .claude/commands/smart-svelte-tool.md
# Smart Svelte development assistant
Handle Svelte task: $ARGUMENTS

Copy
# Run the command
claude "smart-svelte-tool add a filterable data grid to the admin dashboard with sorting and pagination"

Expected output:
- Task analysis and action plan
- DataGrid component with TypeScript props
- Integration with admin dashboard route
- Keyboard accessibility for grid navigation
- Unit tests for sort and filter logic

Core Concepts

Concept	Description
Task Classification	Analyzes request to determine creation, modification, optimization, or debugging
Action Routing	Maps classified task to the most appropriate development pattern
Context Awareness	Reads project structure to determine conventions and available tools
Multi-Concern Handling	Addresses component, testing, a11y, and performance in a single pass
Svelte Idioms	Applies Svelte-specific patterns like reactivity, stores, and actions

Smart Routing Pipeline:

  Natural Language Request
       |
  [Classify Task Type]
       |
  +----+----+----+----+
  |    |    |    |    |
 Create Modify Test  Optimize
  |    |    |    |    |
  [Read Project Context]
       |
  [Apply Svelte Patterns]
       |
  [Generate Output]
       |
  Files + Guidance

Configuration

Parameter	Default	Description
Detection Mode	Auto	How aggressively the tool infers task type from context
Output Scope	Minimal necessary	Whether to generate just code or code + tests + docs
Convention Source	svelte.config.js	Primary file for detecting project conventions
Svelte Version	Auto-detect	Svelte 4 vs Svelte 5 pattern selection
Verbosity	Medium	Amount of explanatory commentary in output

Best Practices

1. Describe the end goal -- "users should be able to filter products by category and price range" gives better results than "create a filter component"
2. Mention integration points -- specify where the output should connect to your existing codebase for accurate imports and routing
3. Include quality requirements -- mentioning "with tests" or "WCAG AA compliant" ensures those concerns are addressed in the initial output
4. Provide data shapes -- if the task involves data display or manipulation, describe the data structure for accurate TypeScript typing
5. Review the action plan -- the tool outputs its classification and plan before executing. Verify it understood your intent before accepting the generated code

Common Issues

1. Task misclassified -- if the tool routes your request incorrectly, restate with explicit action verbs like "create", "optimize", "test", or "fix"
2. Output too broad -- narrowing your request scope produces more focused, higher-quality code than requesting everything at once
3. Svelte version mismatch -- if the tool generates Svelte 5 runes syntax for a Svelte 4 project (or vice versa), specify your Svelte version explicitly