new-component

Name: new-component
Availability: InStock
Author: GAIA

Scaffold React component structures with Vitest tests and Storybook stories.

21|4|Updated Sep 4, 2024

Search Tags:#vitest #testing #accessibility #react #scaffolding #storybook

Ready to run

npx skills add https://github.com/gaia-react/gaia --skill new-component-gaia-react

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/gaia-react/gaia/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/gaia-react/gaia --skill new-component-gaia-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the manual overhead of creating boilerplate files for new React components, ensuring consistent structure, testing, and accessibility standards across the codebase.

Core Features & Use Cases

Automated Scaffolding: Generates PascalCase folders containing index.tsx, test files, and optional Storybook stories.
Accessibility Enforcement: Automatically integrates axe-core accessibility tests with proper environment configuration.
Type Safety: Supports custom prop definitions to generate typed component signatures instantly.
Use Case: When building a new feature, use this skill to generate a fully wired component with a Vitest test suite and Storybook story in one command, ensuring it meets project standards immediately.

Quick Start

Ask the assistant to create a new component named UserProfile with props for username and email.

Frequently Asked Questions about new-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold a React component with Vitest and Storybook automatically?▼

Scaffolding a React component with Vitest and Storybook generates PascalCase folders containing index.tsx, test suites, and stories within the app/components directory. This automated scaffolding eliminates manual boilerplate creation while enforcing consistent project architecture.

How do I enforce accessibility testing in React component scaffolding?▼

To enforce accessibility testing during React component scaffolding, the tool automatically integrates axe-core validation with proper Vitest environment configuration. This ensures generated components meet accessibility standards immediately without requiring manual test setup.

Can I generate typed React component signatures from custom prop definitions?▼

Yes, you can generate typed React component signatures from custom prop definitions. By specifying props like username and email, the scaffolding process instantly creates a typed component signature to ensure strict type safety across your codebase.

What is the best way to maintain architectural consistency when creating new React components?▼

The best way to maintain architectural consistency when creating React components is to scaffold structures automatically within the app/components directory. This enforces a unified folder structure containing index files, tests, and stories across the entire project.

Does this React scaffolding tool generate Storybook stories by default?▼

Yes, the React scaffolding tool generates Storybook stories by default. It creates optional Storybook stories alongside index.tsx files and Vitest test suites to ensure components meet project standards immediately upon creation.