Which frameworks are supported by this skill?

The skill currently supports React (functional components), Next.js (Server and Client components), and Vue 3 (Composition API with script setup).

How does it determine where to save new components?

The skill analyzes your existing project structure and uses the provided 'componentType' parameter (page, ui, feature, etc.) to suggest the most appropriate directory.

Can it adapt to my specific styling setup?

Yes, it automatically detects and adapts to Tailwind CSS, CSS Modules, SCSS, or Styled Components based on your project configuration.

Is the generated code accessible?

Yes, the skill follows accessibility best practices, including semantic HTML and appropriate ARIA attributes in the generated templates.

Does it generate tests and documentation?

Absolutely. Every scaffolded component includes a unit test file (using Vitest/Jest) and a Storybook story file if Storybook is detected in your project.

Component Architect

Name: Component Architect
Author: igpastor

byigpastor

0•

デザインツール

Generates production-ready UI components with full boilerplate, tests, and documentation across multiple frontend frameworks.

Component Architect is a powerful scaffolding skill that automates the creation of standardized frontend components for React, Vue, and Next.js. It ensures code consistency by intelligently detecting your project’s framework, styling methodology, and naming conventions to produce a complete directory structure. Beyond simple boilerplate, it generates TypeScript definitions, unit tests, Storybook stories, and accessibility features, allowing developers to focus on core logic rather than repetitive setup tasks.

主な機能

010 GitHub stars

02Multi-framework support for React, Next.js, and Vue 3 Composition API

03Automatic detection of styling methods including Tailwind, CSS Modules, and Styled Components

04Generates comprehensive unit tests and Storybook documentation files

05Built-in accessibility (ARIA) and TypeScript type safety for every component

06Support for Atomic Design principles to organize atoms, molecules, and organisms

ユースケース

01Bootstrapping a new design system with consistent atomic components

02Rapidly creating complex feature pages with integrated data fetching and state management

03Ensuring every new UI element follows project standards for testing and documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add igpastor/sng-claude-marketplace component-scaffold

For use in Claude.ai and ChatGPT

Download Skill