Which frontend frameworks does this skill support?

This skill provides specialized templates for React (function components), Vue 3 (Composition API/Script Setup), and Svelte 5.

Does it follow accessibility best practices?

Yes, every component is generated with semantic HTML, appropriate ARIA roles, labels, and built-in support for keyboard navigation and focus management.

How does it handle Storybook integration?

It automatically generates Storybook CSF 3.0 files with interaction tests using Play functions and Testing Library, allowing you to view and test variants immediately.

Can I use this for mobile app development?

Yes, while it targets web frameworks, the generated components follow mobile-first responsive patterns and include specific support for Tauri and Electron environments.

UI Component Scaffold

Name: UI Component Scaffold
Author: flight505

byflight505

0•

Design Tools

Generates accessible, production-ready UI components for React, Vue, and Svelte with integrated Storybook stories and testing.

The Component Scaffold skill is a comprehensive automation tool for frontend developers using Claude Code. It streamlines the creation of UI components by generating framework-specific code (React, Vue 3, or Svelte 5) that follows industry best practices. Each component is built with TypeScript, accessibility (ARIA) attributes, and semantic HTML from the start. Beyond just the component logic, it automatically scaffolds Storybook CSF 3.0 stories, interaction tests using Play functions, and visual mockups, ensuring your design system remains consistent, documented, and fully tested.

Key Features

01Multi-framework support for React, Vue 3, and Svelte 5 with TypeScript-first templates.

02Built-in accessibility support including ARIA attributes, roles, and axe-core testing.

03Automated Storybook CSF 3.0 story generation with intelligent variant detection.

040 GitHub stars

05Integrated testing suite with interaction tests and focus management for complex components.

06Comprehensive component library support covering Forms, Layouts, Navigation, and Data Display.

Use Cases

01Syncing component development with Storybook documentation and interaction testing workflows.

02Rapidly building out a standardized UI library or design system from scratch.

03Automating the boilerplate for accessible complex components like modals, tables, and multi-selects.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant component-scaffold

For use in Claude.ai and ChatGPT

Download Skill