new-component

Generate React components with TypeScript, Tailwind CSS, unit tests, and Storybook stories.

2|1|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/solrac97gr/marketplace-plugins --skill new-component-solrac97gr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/solrac97gr/marketplace-plugins/tree/main/plugins/react-dev/skills/new-component
Command: npx skills add https://github.com/solrac97gr/marketplace-plugins --skill new-component-solrac97gr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of new React components by generating the component file, its corresponding unit tests, and a Storybook story, ensuring consistency and best practices from the start.

Core Features & Use Cases

  • Component Generation: Creates functional React components with TypeScript, Tailwind CSS, and accessibility features.
  • Automated Testing: Generates comprehensive unit tests using @testing-library/react and jest-axe for accessibility.
  • Storybook Integration: Produces Storybook stories for interactive component exploration and documentation.
  • Use Case: When starting a new feature in a React project, use this Skill to quickly scaffold a new UserProfileCard component, complete with its tests and a Storybook entry, ready for development.

Quick Start

Use the new-component skill to create a React component named 'Modal' for the 'ui' feature.

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 and Storybook stories?

To scaffold a React component with TypeScript and Storybook stories, use a generation tool that outputs the functional component file, unit tests, and Storybook entries simultaneously, ensuring best practices and typing are applied from the start.

What is the best way to generate React components with accessibility and unit tests included?

The best way to generate React components with accessibility and unit tests is to automate the creation of unit tests using @testing-library/react and jest-axe, ensuring WCAG 2.1 AA compliance is checked automatically during component scaffolding.

Can I generate shared React components with Tailwind CSS using an automated scaffold?

Yes, you can generate shared React components with Tailwind CSS using an automated scaffold that supports feature-specific or shared component structures, applying Tailwind CSS classes and TypeScript typing directly to the functional component output.

Does automated React component generation work with WCAG 2.1 AA compliance standards?

Yes, automated React component generation works with WCAG 2.1 AA compliance standards by embedding accessibility features directly into the component template and generating jest-axe tests to validate accessibility rules during development.

How do I add user-centric tests when creating a new React UI component?

To add user-centric tests when creating a new React UI component, generate the associated unit tests using @testing-library/react to simulate user interactions and verify behavior, ensuring your UI development follows standardized testing methodologies.