playbooks

home / skills / ehtbanton / claudeskillsrepo / svelte-component-generator

svelte-component-generator skill

/svelte-component-generator

This skill generates complete Svelte components in TypeScript with scoped CSS, instantly producing Button.svelte or similar files.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill svelte-component-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
655 B
---
name: svelte-component-generator
description: Generate Svelte components with TypeScript and scoped styles. Triggers on "create svelte component", "generate svelte file", "svelte module", ".svelte component".
---

# Svelte Component Generator

Generate Svelte components with TypeScript and scoped CSS.

## Output Requirements

**File Output:** `*.svelte` component files
**Format:** Valid Svelte 5
**Standards:** Svelte 5 with TypeScript

## When Invoked

Immediately generate a complete Svelte component with props and styles.

## Example Invocations

**Prompt:** "Create Svelte button component"
**Output:** Complete `Button.svelte` with variants.

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.

FAQ

Which Svelte version and language are used?

Outputs are written for Svelte 5 and use TypeScript in the component script block.

What file does the skill produce?

It produces a single .svelte component file per request with props, events, slots, and scoped CSS.