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

디자인 도구

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.

주요 기능

0 GitHub stars
Multi-framework support for React, Next.js, and Vue 3 Composition API
Automatic detection of styling methods including Tailwind, CSS Modules, and Styled Components
Generates comprehensive unit tests and Storybook documentation files
Built-in accessibility (ARIA) and TypeScript type safety for every component
Support for Atomic Design principles to organize atoms, molecules, and organisms

사용 사례

Bootstrapping a new design system with consistent atomic components
Rapidly creating complex feature pages with integrated data fetching and state management
Ensuring every new UI element follows project standards for testing and documentation

소개

주요 기능

0 GitHub stars
Multi-framework support for React, Next.js, and Vue 3 Composition API
Automatic detection of styling methods including Tailwind, CSS Modules, and Styled Components
Generates comprehensive unit tests and Storybook documentation files
Built-in accessibility (ARIA) and TypeScript type safety for every component
Support for Atomic Design principles to organize atoms, molecules, and organisms

사용 사례

Bootstrapping a new design system with consistent atomic components
Rapidly creating complex feature pages with integrated data fetching and state management
Ensuring every new UI element follows project standards for testing and documentation