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

デザインツール

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.

主な機能

Multi-framework support for React, Vue 3, and Svelte 5 with TypeScript-first templates.
Built-in accessibility support including ARIA attributes, roles, and axe-core testing.
Automated Storybook CSF 3.0 story generation with intelligent variant detection.
0 GitHub stars
Integrated testing suite with interaction tests and focus management for complex components.
Comprehensive component library support covering Forms, Layouts, Navigation, and Data Display.

ユースケース

Syncing component development with Storybook documentation and interaction testing workflows.
Rapidly building out a standardized UI library or design system from scratch.
Automating the boilerplate for accessible complex components like modals, tables, and multi-selects.

概要

主な機能

Multi-framework support for React, Vue 3, and Svelte 5 with TypeScript-first templates.
Built-in accessibility support including ARIA attributes, roles, and axe-core testing.
Automated Storybook CSF 3.0 story generation with intelligent variant detection.
0 GitHub stars
Integrated testing suite with interaction tests and focus management for complex components.
Comprehensive component library support covering Forms, Layouts, Navigation, and Data Display.

ユースケース

Syncing component development with Storybook documentation and interaction testing workflows.
Rapidly building out a standardized UI library or design system from scratch.
Automating the boilerplate for accessible complex components like modals, tables, and multi-selects.