react-component

Generate React component scaffolds with TypeScript, CSS Modules, and Playwright tests.

Updated Oct 17, 2025
One-click install
npx skills add https://github.com/gharam1234/trip --skill react-component-gharam1234
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component
Source: https://github.com/gharam1234/trip/tree/main/.claude/skills/react-component
Command: npx skills add https://github.com/gharam1234/trip --skill react-component-gharam1234

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates scaffolding for React components by generating consistent boilerplate for the component, styles, hooks, and tests.

Core Features & Use Cases

  • Generate component skeleton: index.tsx
  • Create associated styles: styles.module.css
  • Create optional hooks under hooks/
  • Create tests under tests/ (Playwright-based)
  • Enforce TypeScript, CSS Modules, and clear prop typing

Quick Start

Use this skill to scaffold a Button component under src/components/button/ with index.tsx, styles.module.css, and tests/.

Frequently Asked Questions about react-component

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

FAQPage Schema
How do I scaffold a React component with TypeScript and tests?▼

Scaffold a React component by generating a consistent directory structure with index.tsx, styles.module.css, optional hooks, and Playwright tests. This automates boilerplate creation, enforces TypeScript prop typing, and ensures reusable component design across your project.

Can I generate React components with CSS Modules and automatic test files?▼

Yes, this generates React components with CSS Modules for styling and creates Playwright-based test files automatically. Each component receives a fixed structure: component-name/index.tsx, styles.module.css, hooks/, and tests/ directories with consistent conventions.

What files are created when scaffolding a React component?▼

Scaffolding creates index.tsx for the component, styles.module.css for styling, optional hooks under hooks/*.hook.ts, and Playwright tests under tests/*.spec.ts. All files use TypeScript and follow explicit prop typing and descriptive naming conventions.

Does this work with existing React projects using TypeScript?▼

Yes, this generates React component scaffolds designed for TypeScript projects using CSS Modules. It enforces explicit props typing and works within projects that follow consistent component structure and conventions.

How do I ensure consistent React component structure across my project?▼

Use component scaffolding to generate standardized boilerplate enforcing TypeScript typing, CSS Modules, reusable component design, and test conventions. This creates uniform structure across all new components in your src/components/ directory.