Component Scaffolding Skill
CommunityInstantly build UI components, focus on logic.
Authorigpastor
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates the repetitive boilerplate code involved in creating new UI components, ensuring consistency, adherence to best practices, and faster development cycles across your frontend projects.
Core Features & Use Cases
- Full Component Structure Generation: Automatically creates the main component file, styles, tests, Storybook stories, type definitions, and index files.
- Framework-Aware Generation: Adapts to your project's framework, generating appropriate code for React, Next.js, and Vue 3 (Composition API).
- Built-in Best Practices: Includes TypeScript types, accessibility attributes, documentation, error boundaries, loading states, and comprehensive tests.
- Use Case: Ask Claude to "create a
UserCardcomponent for React with props for user data and basic tests," and it will generate all necessary files following project conventions, ready for your specific logic.
Quick Start
Scaffold a new React ProductDisplay component with props and a loading state.
Dependency Matrix
Required Modules
react-hook-formtanstack-queryswrstyled-componentstailwindcss
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Component Scaffolding Skill Download link: https://github.com/igpastor/sng-claude-marketplace/archive/main.zip#component-scaffolding-skill Please download this .zip file, extract it, and install it in the .claude/skills/ directory.