claude-code-templates 1.21.13 → 1.22.0

package/cli-tool/components/commands/svelte/svelte:component.md

@@ -1,81 +0,0 @@
----
-allowed-tools: Read, Write, Edit
-argument-hint: [component-name] [--typescript] [--story]
-description: Create new Svelte components with best practices, TypeScript support, and testing
-model: sonnet
----
-
-# Create Svelte Component
-
-Create new Svelte component: $ARGUMENTS
-
-## Current Svelte Project
-
-- Svelte config: @svelte.config.js or @vite.config.js (if exists)
-- Components directory: @src/components/ or @src/lib/ (if exists)
-- TypeScript config: @tsconfig.json (detect TypeScript usage)
-- Testing setup: @vitest.config.js or @jest.config.js (if exists)
-
-## Task
-
-Create Svelte component with best practices. When creating components:
-
-1. **Gather Requirements**:
-   - Component name and purpose
-   - Props interface
-   - Events to emit
-   - Slots needed
-   - State management requirements
-   - TypeScript preference
-
-2. **Component Structure**:
-   ```svelte
-   <script lang="ts">
-     // Imports
-     // Type definitions
-     // Props
-     // State
-     // Derived values
-     // Effects
-     // Functions
-   </script>
-   
-   <!-- Markup -->
-   
-   <style>
-     /* Scoped styles */
-   </style>
-   ```
-
-3. **Best Practices**:
-   - Use proper prop typing with TypeScript/JSDoc
-   - Implement $bindable props where appropriate
-   - Create accessible markup by default
-   - Add proper ARIA attributes
-   - Use semantic HTML elements
-   - Include keyboard navigation support
-
-4. **Component Types to Create**:
-   - **UI Components**: Buttons, Cards, Modals, etc.
-   - **Form Components**: Inputs with validation, custom form controls
-   - **Layout Components**: Headers, Sidebars, Grids
-   - **Data Components**: Tables, Lists, Data visualizations
-   - **Utility Components**: Portals, Transitions, Error boundaries
-
-5. **Additional Files**:
-   - Create accompanying test file
-   - Add Storybook story if applicable
-   - Create usage documentation
-   - Export from index file
-
-## Example Usage
-
-User: "Create a Modal component with customizable header, footer slots, and close functionality"
-
-Assistant will:
-- Create Modal.svelte with proper structure
-- Implement focus trap and keyboard handling
-- Add transition effects
-- Create Modal.test.js with basic tests
-- Provide usage examples
-- Suggest accessibility improvements

package/cli-tool/components/commands/svelte/svelte:debug.md

@@ -1,48 +0,0 @@
-# /svelte:debug
-
-Help debug Svelte and SvelteKit issues by analyzing error messages, stack traces, and common problems.
-
-## Instructions
-
-You are acting as the Svelte Development Agent with a focus on debugging. When the user provides an error or describes an issue:
-
-1. **Analyze the Error**:
-   - Parse error messages and stack traces
-   - Identify the root cause (compilation, runtime, or configuration)
-   - Check for common Svelte/SvelteKit pitfalls
-
-2. **Diagnose the Problem**:
-   - Examine the relevant code files
-   - Check for syntax errors, missing imports, or incorrect usage
-   - Verify configuration files (vite.config.js, svelte.config.js, etc.)
-   - Look for version mismatches or dependency conflicts
-
-3. **Common Issues to Check**:
-   - Reactive statement errors ($state, $derived, $effect)
-   - SSR vs CSR conflicts
-   - Load function errors (missing returns, incorrect data access)
-   - Form action problems
-   - Routing issues
-   - Build and deployment errors
-
-4. **Provide Solutions**:
-   - Offer specific fixes with code examples
-   - Suggest debugging techniques (console.log, {@debug}, browser DevTools)
-   - Recommend relevant documentation sections
-   - Provide step-by-step resolution guides
-
-5. **Preventive Measures**:
-   - Suggest TypeScript additions for better error catching
-   - Recommend linting rules
-   - Propose architectural improvements
-
-## Example Usage
-
-User: "I'm getting 'Cannot access 'user' before initialization' error in my load function"
-
-Assistant will:
-- Examine the load function structure
-- Check for proper async/await usage
-- Verify data dependencies
-- Provide corrected code
-- Explain the fix and how to avoid similar issues

package/cli-tool/components/commands/svelte/svelte:migrate.md

@@ -1,79 +0,0 @@
-# /svelte:migrate
-
-Migrate Svelte/SvelteKit projects between versions, adopt new features like runes, and handle breaking changes.
-
-## Instructions
-
-You are acting as the Svelte Development Agent focused on migrations. When migrating projects:
-
-1. **Migration Types**:
-   
-   **Version Migrations**:
-   - Svelte 3 → Svelte 4
-   - Svelte 4 → Svelte 5 (Runes)
-   - SvelteKit 1.x → SvelteKit 2.x
-   - Legacy app → Modern SvelteKit
-   
-   **Feature Migrations**:
-   - Stores → Runes ($state, $derived)
-   - Class components → Function syntax
-   - Imperative → Declarative patterns
-   - JavaScript → TypeScript
-
-2. **Migration Process**:
-   ```bash
-   # Automated migrations
-   npx sv migrate [migration-name]
-   
-   # Manual migration steps
-   1. Backup current code
-   2. Update dependencies
-   3. Run codemods
-   4. Fix breaking changes
-   5. Update configurations
-   6. Test thoroughly
-   ```
-
-3. **Runes Migration**:
-   ```javascript
-   // Before (Svelte 4)
-   let count = 0;
-   $: doubled = count * 2;
-   
-   // After (Svelte 5)
-   let count = $state(0);
-   let doubled = $derived(count * 2);
-   ```
-
-4. **Breaking Changes**:
-   - Component API changes
-   - Store subscription syntax
-   - Event handling updates
-   - SSR behavior changes
-   - Build configuration updates
-   - Package import paths
-
-5. **Migration Checklist**:
-   - [ ] Update package.json dependencies
-   - [ ] Run automated migration scripts
-   - [ ] Update component syntax
-   - [ ] Fix TypeScript errors
-   - [ ] Update configuration files
-   - [ ] Test all routes and components
-   - [ ] Update deployment scripts
-   - [ ] Review performance impacts
-
-## Example Usage
-
-User: "Migrate my Svelte 4 app to Svelte 5 with runes"
-
-Assistant will:
-- Analyze current codebase
-- Create migration plan
-- Run `npx sv migrate svelte-5`
-- Convert reactive statements to runes
-- Update component props syntax
-- Fix effect timing issues
-- Update test files
-- Handle edge cases manually
-- Provide rollback strategy

package/cli-tool/components/commands/svelte/svelte:optimize.md

@@ -1,99 +0,0 @@
-# /svelte:optimize
-
-Optimize Svelte/SvelteKit applications for performance, including bundle size reduction, rendering optimization, and loading performance.
-
-## Instructions
-
-You are acting as the Svelte Development Agent focused on performance optimization. When optimizing:
-
-1. **Performance Analysis**:
-   - Analyze bundle size with rollup-plugin-visualizer
-   - Profile component rendering
-   - Measure Core Web Vitals
-   - Identify performance bottlenecks
-   - Check network waterfall
-
-2. **Bundle Optimization**:
-   
-   **Code Splitting**:
-   ```javascript
-   // Dynamic imports
-   const HeavyComponent = await import('./HeavyComponent.svelte');
-   
-   // Route-based splitting
-   export const prerender = false;
-   export const ssr = true;
-   ```
-   
-   **Tree Shaking**:
-   - Remove unused imports
-   - Optimize library imports
-   - Use production builds
-   - Eliminate dead code
-
-3. **Rendering Optimization**:
-   
-   **Reactive Performance**:
-   ```javascript
-   // Use $state.raw for large objects
-   let data = $state.raw(largeDataset);
-   
-   // Optimize derived computations
-   let filtered = $derived.lazy(() => 
-     expensiveFilter(data)
-   );
-   ```
-   
-   **Component Optimization**:
-   - Minimize re-renders
-   - Use keyed each blocks
-   - Implement virtual scrolling
-   - Lazy load components
-
-4. **Loading Performance**:
-   - Implement preloading strategies
-   - Optimize images (lazy loading, WebP)
-   - Use resource hints (preconnect, prefetch)
-   - Enable HTTP/2 push
-   - Implement service workers
-
-5. **SvelteKit Optimizations**:
-   ```javascript
-   // Prerender static pages
-   export const prerender = true;
-   
-   // Optimize data loading
-   export async function load({ fetch, setHeaders }) {
-     setHeaders({
-       'cache-control': 'public, max-age=3600'
-     });
-     
-     return {
-       data: await fetch('/api/data')
-     };
-   }
-   ```
-
-6. **Optimization Checklist**:
-   - [ ] Enable compression (gzip/brotli)
-   - [ ] Optimize fonts (subsetting, preload)
-   - [ ] Minimize CSS (PurgeCSS/Tailwind)
-   - [ ] Enable CDN/edge caching
-   - [ ] Implement critical CSS
-   - [ ] Optimize third-party scripts
-   - [ ] Use WebAssembly for heavy computation
-
-## Example Usage
-
-User: "My SvelteKit app is loading slowly, optimize it"
-
-Assistant will:
-- Run performance analysis
-- Identify largest bundle chunks
-- Implement code splitting
-- Optimize images and assets
-- Add preloading for critical resources
-- Configure caching headers
-- Implement lazy loading
-- Optimize server-side rendering
-- Provide performance metrics comparison

package/cli-tool/components/commands/svelte/svelte:scaffold.md

@@ -1,89 +0,0 @@
-# /svelte:scaffold
-
-Scaffold new SvelteKit projects, features, or modules with best practices and optimal project structure.
-
-## Instructions
-
-You are acting as the Svelte Development Agent focused on project scaffolding. When scaffolding:
-
-1. **Project Types**:
-   
-   **New SvelteKit Project**:
-   - Use `npx sv create` with appropriate options
-   - Select TypeScript/JSDoc preference
-   - Choose testing framework
-   - Add essential integrations (Tailwind, ESLint, etc.)
-   - Set up Git repository
-   
-   **Feature Modules**:
-   - Authentication system
-   - Admin dashboard
-   - Blog/CMS
-   - E-commerce features
-   - API integrations
-   
-   **Component Libraries**:
-   - Design system setup
-   - Storybook integration
-   - Component documentation
-   - Publishing configuration
-
-2. **Project Structure**:
-   ```
-   project/
-   ├── src/
-   │   ├── routes/
-   │   │   ├── (app)/
-   │   │   ├── (auth)/
-   │   │   └── api/
-   │   ├── lib/
-   │   │   ├── components/
-   │   │   ├── stores/
-   │   │   ├── utils/
-   │   │   └── server/
-   │   ├── hooks.server.ts
-   │   └── app.html
-   ├── tests/
-   ├── static/
-   └── [config files]
-   ```
-
-3. **Essential Features**:
-   - Environment variable setup
-   - Database configuration
-   - Authentication scaffolding
-   - API route templates
-   - Error handling
-   - Logging setup
-   - Deployment configuration
-
-4. **Configuration Files**:
-   - `svelte.config.js` - Optimized settings
-   - `vite.config.js` - Build optimization
-   - `playwright.config.js` - E2E testing
-   - `tailwind.config.js` - Styling (if selected)
-   - `.env.example` - Environment template
-   - `docker-compose.yml` - Container setup
-
-5. **Starter Code**:
-   - Layout with navigation
-   - Authentication flow
-   - Protected routes
-   - Form examples
-   - API integration patterns
-   - State management setup
-
-## Example Usage
-
-User: "Scaffold a new SaaS starter with auth and payments"
-
-Assistant will:
-- Create SvelteKit project with TypeScript
-- Set up authentication (Lucia/Auth.js)
-- Add payment integration (Stripe)
-- Create user dashboard structure
-- Set up database (Prisma/Drizzle)
-- Add email service
-- Configure deployment
-- Create example protected routes
-- Add subscription management

package/cli-tool/components/commands/svelte/svelte:storybook-migrate.md

@@ -1,204 +0,0 @@
-# /svelte:storybook-migrate
-
-Migrate Storybook configurations and stories to newer versions, including Svelte CSF v5 and @storybook/sveltekit framework.
-
-## Instructions
-
-You are acting as the Svelte Storybook Specialist Agent focused on migration. When migrating Storybook:
-
-1. **Version Migrations**:
-   
-   **Storybook 6.x to 7.x**:
-   ```bash
-   # Automated upgrade
-   npx storybook@latest upgrade
-   
-   # Manual steps:
-   # 1. Update dependencies
-   # 2. Migrate to @storybook/sveltekit
-   # 3. Remove obsolete packages
-   # 4. Update configuration
-   ```
-   
-   **Configuration Changes**:
-   ```javascript
-   // Old (.storybook/main.js)
-   module.exports = {
-     framework: '@storybook/svelte',
-     svelteOptions: { ... } // Remove this
-   };
-   
-   // New (.storybook/main.js)
-   export default {
-     framework: {
-       name: '@storybook/sveltekit',
-       options: {}
-     }
-   };
-   ```
-
-2. **Svelte CSF Migration (v4 to v5)**:
-   
-   **Meta Component → defineMeta**:
-   ```svelte
-   <!-- Old -->
-   <script context="module">
-     import { Meta, Story } from '@storybook/addon-svelte-csf';
-   </script>
-   
-   <Meta title="Button" component={Button} />
-   
-   <!-- New -->
-   <script>
-     import { defineMeta } from '@storybook/addon-svelte-csf';
-     import Button from './Button.svelte';
-     
-     const { Story } = defineMeta({
-       title: 'Button',
-       component: Button
-     });
-   </script>
-   ```
-   
-   **Template → Children/Snippets**:
-   ```svelte
-   <!-- Old -->
-   <Story name="Default">
-     <Template let:args>
-       <Button {...args} />
-     </Template>
-   </Story>
-   
-   <!-- New -->
-   <Story name="Default" args={{ label: 'Click' }}>
-     {#snippet template(args)}
-       <Button {...args} />
-     {/snippet}
-   </Story>
-   ```
-
-3. **Package Migration**:
-   
-   **Remove Obsolete Packages**:
-   ```bash
-   npm uninstall @storybook/svelte-vite
-   npm uninstall storybook-builder-vite
-   npm uninstall @storybook/builder-vite
-   npm uninstall @storybook/svelte
-   ```
-   
-   **Install New Packages**:
-   ```bash
-   npm install -D @storybook/sveltekit
-   npm install -D @storybook/addon-svelte-csf@latest
-   ```
-
-4. **Story Format Migration**:
-   
-   **CSF 2 to CSF 3**:
-   ```javascript
-   // Old (CSF 2)
-   export default {
-     title: 'Button',
-     component: Button
-   };
-   
-   export const Primary = (args) => ({
-     Component: Button,
-     props: args
-   });
-   Primary.args = { variant: 'primary' };
-   
-   // New (CSF 3)
-   export default {
-     title: 'Button',
-     component: Button
-   };
-   
-   export const Primary = {
-     args: { variant: 'primary' }
-   };
-   ```
-
-5. **Addon Updates**:
-   
-   **Actions → Tags**:
-   ```javascript
-   // Old
-   export default {
-     component: Button,
-     parameters: {
-       docs: { autodocs: true }
-     }
-   };
-   
-   // New
-   export default {
-     component: Button,
-     tags: ['autodocs']
-   };
-   ```
-
-6. **Module Mocking Updates**:
-   
-   **New Parameter Structure**:
-   ```javascript
-   // Old approach (custom mocks)
-   import { page } from './__mocks__/stores';
-   
-   // New approach (parameters)
-   export const Default = {
-     parameters: {
-       sveltekit_experimental: {
-         stores: { page: { ... } }
-       }
-     }
-   };
-   ```
-
-7. **Migration Script**:
-   ```javascript
-   // migration-helper.js
-   import { readdir, readFile, writeFile } from 'fs/promises';
-   import { parse, walk } from 'svelte/compiler';
-   
-   async function migrateStories() {
-     // Find all .stories.svelte files
-     // Parse and transform AST
-     // Update syntax to v5
-     // Write updated files
-   }
-   ```
-
-8. **Testing After Migration**:
-   - Run `npm run storybook`
-   - Check all stories render
-   - Verify interactions work
-   - Test addons functionality
-   - Validate build process
-
-## Migration Checklist
-
-1. [ ] Backup current setup
-2. [ ] Update Storybook to v7+
-3. [ ] Migrate to @storybook/sveltekit
-4. [ ] Update Svelte CSF addon
-5. [ ] Convert story syntax
-6. [ ] Update module mocks
-7. [ ] Test all stories
-8. [ ] Update CI/CD config
-
-## Example Usage
-
-User: "Migrate my Storybook from v6 with Svelte to v7 with SvelteKit"
-
-Assistant will:
-- Analyze current setup
-- Create migration plan
-- Run upgrade command
-- Update framework config
-- Convert story formats
-- Migrate CSF syntax
-- Update module mocking
-- Test and validate
-- Document breaking changes