Easy Svelte Executor

Execute common Svelte development tasks with intelligent context detection, including component generation, store creation, route setup, and configuration updates in a single streamlined action.

When to Use This Command

Run this command when...

• You need to perform a standard Svelte development task quickly without remembering exact file locations, import patterns, or configuration syntax
• You want an intelligent assistant that detects your project structure and adapts its output to match existing conventions automatically
• Your task spans multiple files such as creating a component with its store, route, and test file in the correct locations

Do NOT use this command when...

• You need deep specialized work like accessibility auditing or performance optimization -- use dedicated commands for those
• You want to execute arbitrary shell commands unrelated to Svelte development

Quick Start

Copy
# .claude/commands/easy-svelte-executor.md
# Execute Svelte development task
Execute: $ARGUMENTS

Copy
# Run the command
claude "easy-svelte-executor create a user settings page with form validation and toast notifications"

Expected output:
- Route file at src/routes/settings/+page.svelte
- Form validation logic with Svelte stores
- Toast notification component integration
- Server-side form action at +page.server.ts
- Updated navigation links

Core Concepts

Concept	Description
Context Detection	Scans project config files to determine conventions and capabilities
Task Routing	Maps natural language requests to appropriate Svelte development actions
Convention Matching	Adapts output to match existing project patterns (naming, structure, style)
Multi-File Coordination	Creates or modifies multiple related files in a single operation
Framework Awareness	Understands SvelteKit routing, loading, and server-side patterns

Execution Flow:

  Natural Language Task
       |
  [Detect Project Context]
  |         |          |
 Config   Structure  Patterns
  |         |          |
  [Route to Action Type]
       |
  +----+----+----+
  |    |    |    |
 Comp  Route Store Config
  |    |    |    |
  [Apply Conventions]
       |
  Generated Files

Configuration

Parameter	Default	Description
Project Root	Auto-detect	Root directory containing svelte.config.js
Style System	Match existing	Tailwind, scoped CSS, or SCSS based on project setup
TypeScript	Auto-detect	Generates TS or JS based on tsconfig.json presence
Test Generation	If framework exists	Creates test files when vitest/jest config is detected
Overwrite Policy	Never	Whether to overwrite existing files or create alongside

Best Practices

1. Be specific about what you need -- "create a settings page" is good; "create a settings page with profile picture upload and password change form" is better
2. Mention related features -- if the new code needs to integrate with existing stores, auth, or API routes, name them so the executor wires things up correctly
3. Review generated files before committing -- the executor makes best-effort convention matching, but always verify the output fits your project's actual patterns
4. Use for repetitive scaffolding -- this command excels at creating the boilerplate you write repeatedly. Customize the generated output rather than writing from scratch
5. Chain with specialized commands -- use the executor for initial creation, then follow up with a11y, optimization, or testing commands for deeper refinement

Common Issues

1. Wrong directory structure -- the executor may misread your project layout if you have a non-standard SvelteKit configuration. Specify the target directory explicitly
2. Missing imports in generated code -- if the command cannot detect your component library or utility modules, it may generate bare implementations. Add import statements manually
3. Style inconsistency -- when your project mixes style approaches (some components use Tailwind, others scoped CSS), specify which approach to use for the new files