create-component

Create React components with standardized folder structure and documentation.

Updated Apr 27, 2026

Search Tags:#typescript #frontend #react #codebase #components #patterns #scaffold

Ready to run

npx skills add https://github.com/arthurharysson/valra.gg --skill create-component-arthurharysson

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/arthurharysson/valra.gg/tree/main/.claude/skills/create-component
Command: npx skills add https://github.com/arthurharysson/valra.gg --skill create-component-arthurharysson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The workflow for creating React components in InterSuite projects often lacks consistency, strict structure, and mandatory documentation, leading to maintenance challenges and onboarding friction.

Core Features & Use Cases

Enforces a per-component folder structure with PascalCase naming: src/components/{ui|layout}/{ComponentName}/ and index.tsx + types.ts.
Requires a top-level JSDoc-style comment on the component and any helper functions to improve readability and maintainability.
Introduces a mandatory pre-execution plan flow that outlines classification, file organization, and usage guidelines before code generation.
Helps avoid duplicating existing components by validating against the repository and reusing project conventions.
Use Case: Create a new Button component in the UI layer with proper types and documentation.

Quick Start

Provide the component name and its type (ui or layout) to generate the standardized scaffold.

Frequently Asked Questions about create-component

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

FAQPage Schema

How do I scaffold React components with a standardized folder structure and types?▼

To scaffold React components with a standardized folder structure, provide the component name and type. The tool generates a per-component directory with index.tsx and types.ts files, enforcing consistent organization across your project.

What is the best way to enforce consistent naming and documentation for new React components?▼

Enforcing consistent naming and documentation for React components is achieved by applying PascalCase rules and requiring JSDoc-style comments. This ensures every component and helper function includes top-level documentation for readability and maintenance.

How does the pre-execution plan flow work before generating React component code?▼

The pre-execution plan flow outlines component classification, file organization, and usage guidelines before code generation begins. This planning step validates against existing repositories and project conventions to help avoid duplicating components.

Can I use this scaffolding tool for both UI and layout components in my React codebase?▼

Yes, you can use this scaffolding tool for both UI and layout components in your React codebase. You specify the type during generation, and the tool places the files in the appropriate src/components/ui or src/components/layout directory.

Why does creating React components without standardization cause maintenance challenges?▼

Creating React components without standardization causes maintenance challenges and onboarding friction due to inconsistent structures and missing documentation. Applying strict folder rules and mandatory comments resolves these workflow issues.

Do I need TypeScript to scaffold components with mandatory types and file templates?▼

Yes, TypeScript is required to scaffold components with mandatory types and file templates. The standardized structure generates a dedicated types.ts file alongside the index.tsx component file to enforce strict typing across the project.