skills.rest
s0lci700
s0lci700COMMUNITY
Explore all skills by this author →
GitHub

new-component

Scaffold Svelte 5 UI components with Storybook stories and index.js re-exports.

1|Updated Feb 18, 2026
Search Tags:#frontend#scaffold#svelte#storybook#code-generation#ui-component
One-click install
npx skills add https://github.com/s0lci700/OVERLAYS --skill new-component-s0lci700
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/s0lci700/OVERLAYS/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/s0lci700/OVERLAYS --skill new-component-s0lci700

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the boilerplate for UI components in the control-panel by generating a consistent, production-ready scaffold that adheres to project conventions, reducing setup time and human error.

Core Features & Use Cases

  • Generates a three-file scaffold: a Svelte component, a Storybook story, and an index.js re-export, all placed under control-panel/src/lib/components/ui/<name>/ following the repository conventions.
  • Enforces scoped styles, token-based CSS, data-variant attributes, and a reusable export pattern to ensure visual and code consistency across components.
  • Use Case: rapidly bootstrap new primitive UI elements like RollBadge or Button with a single command, ensuring consistent architecture and Storybook coverage.

Quick Start

Run the /new-component command with a PascalCase name to scaffold a new UI component.

Frequently Asked Questions about new-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new Svelte UI component with Storybook integration?▼

Scaffold a Svelte UI component by running a command with a PascalCase name to generate a Svelte component, Storybook story, and index.js re-export under the control-panel/src/lib/components/ui directory.

What files are required when creating a new UI primitive in a Svelte project?▼

Creating a UI primitive requires three files: the Svelte component, a Storybook story, and an index.js re-export, ensuring consistent directory placement and architecture across the project.

Does scaffolding Svelte components automatically enforce scoped styles and token-based CSS?▼

Scaffolding Svelte components enforces scoped styles, token-based CSS, and data-variant attributes to ensure visual and code consistency across newly generated UI elements.

What is the best way to ensure consistent file structure for Svelte 5 UI components?▼

The best way to ensure consistent file structure is to automate scaffolding with a command that follows project conventions, placing output under control-panel/src/lib/components/ui/<name>/.

Can I bootstrap multiple UI primitives like a Button or RollBadge using a single command?▼

You can bootstrap UI primitives like a Button or RollBadge by running the scaffold command with a PascalCase name, which generates the required component files and Storybook coverage instantly.

Related Skills

Explore More Software Engineering Skills→
TophC7TophC7

new-component

Scaffolds Svelte 5 components with runes and standardized structure for Sworm.

Community
Intermediate
Higashi-KotaHigashi-Kota

theme-to-component-migration

Migrate hardcoded Tailwind styles and native HTML elements to Storybook-defined UI components in TypeScript/React projects.

Community
Intermediate
WesleySmitsWesleySmits
6

scaffolding-vue-components

Generate Vue/Nuxt component scaffolds with Composition API, CSS modules, Vitest tests, and Storybook entries.

Community
Advanced
RuzenieRuzenie
2

svelte-adapter

Generate Svelte component templates and state management stores.

Community
Basic