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:

• Gather Requirements:

- Component name and purpose

- Props interface

- Events to emit

- Slots needed

- State management requirements

- TypeScript preference

• Component Structure:

<!-- Markup -->

• 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

• 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

• 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