svelte-component-generator_skill

Overview

This skill generates complete Svelte 5 components written in TypeScript with scoped styles. It produces ready-to-drop .svelte files that include typed props, events, and CSS encapsulated to the component. Use it to quickly scaffold production-ready UI elements, controls, and modules.

How this skill works

When triggered by phrases like "create svelte component" or "generate svelte file", the skill parses your prompt to infer component name, props, variants, and behaviors. It emits a single .svelte file using Svelte 5 syntax, TypeScript script blocks, and scoped <style> rules, plus example usage and accessibility considerations when applicable. Outputs follow common patterns (props typing, event forwarding, slots) so the component integrates smoothly into an app.

When to use it

• Scaffold a new UI component quickly (buttons, inputs, cards).
• Convert a design pattern into a typed Svelte component with variants.
• Create isolated reusable modules with scoped styles to avoid CSS leakage.
• Generate example usage and export types for rapid integration into TypeScript projects.

Best practices

• Specify component name, desired props and types, and any variants in your prompt for precise output.
• Request accessibility features (aria attributes, keyboard support) if needed.
• Ask for example usage or test snippet to validate integration immediately.
• Keep styles focused and scoped; prefer CSS variables or classes for theme overrides.
• If you need multiple files (types, stores), request them explicitly—this skill outputs single-file .svelte components by default.

Example use cases

• "Create Svelte button component" → Button.svelte with variants, disabled state, and click events.
• "Generate form input component" → Input.svelte with typed value prop, validation state, and accessible labels.
• "Svelte modal component" → Modal.svelte with slot content, open/close API, and focus-trap considerations.
• "Create icon component" → Icon.svelte exporting typed size and color props with inline SVG and scoped styles.