new-component

Scaffold React components with TypeScript types, tests, and barrel exports.

3|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/martinacostadev/claude-react-agents --skill new-component-martinacostadev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/martinacostadev/claude-react-agents/tree/main/templates/.claude/skills/web/new-component
Command: npx skills add https://github.com/martinacostadev/claude-react-agents --skill new-component-martinacostadev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams scaffold a complete React component with TypeScript typings, unit tests, and a barrel export, following project conventions.

Core Features & Use Cases

  • Generates a TypeScript React component (tsx) with a matching test file (tsx) and an index.ts barrel export.
  • Applies best practices such as forwardRef usage, explicit props typing, displayName, and comprehensive tests using a testing library.
  • Places components in standard locations (src/components/ui and src/components/features) with consistent structure.

Quick Start

Generate a new component named ComponentName with tests and a barrel export following the project's conventions.

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 TypeScript types and tests?

To scaffold a React component with TypeScript types and tests, use this tool to automatically generate a tsx component with strict props, forwardRef, displayName, a matching test file, and an index.ts barrel export.

Can I generate a feature component instead of a standard UI component?

Yes, you can generate feature components. The scaffolding process places components in either src/components/ui or src/components/features, ensuring the correct project convention structure is applied based on your specific requirements.

What is the best way to create a React component with a barrel export?

The best way to create a React component with a barrel export is using this scaffolding tool, which automatically generates the index.ts file alongside your typed tsx component and test file for immediate, ready-to-import module usage.

Does this scaffolding tool apply forwardRef and strict TypeScript props?

Yes, this scaffolding tool applies forwardRef and strict TypeScript props. It enforces project conventions by ensuring every generated React component includes explicit props typing and a displayName out of the box.

How do I setup unit tests for a new React component?

You setup unit tests for a new React component by letting this tool scaffold the test file simultaneously with the component. It creates a matching tsx test file using a testing library to ensure comprehensive coverage.

Why do I need a barrel export for my React components?

You need a barrel export for your React components to simplify imports across your project. This scaffolding tool generates an index.ts barrel automatically, ensuring your ready-to-import component module follows standard architectural conventions.