skills.rest
NuclearPlayer
NuclearPlayerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

creating-components

Create React UI components with tests and Storybook stories.

361|16|Updated Aug 3, 2025
Search Tags:#react#storybook#create#UI components#stories#design-system#tests
One-click install
npx skills add https://github.com/NuclearPlayer/nuclear-xrd --skill creating-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: creating-components
Source: https://github.com/NuclearPlayer/nuclear-xrd/tree/main/.agents/skills/creating-components
Command: npx skills add https://github.com/NuclearPlayer/nuclear-xrd --skill creating-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams standardize and accelerate the creation of new UI components within packages/ui, ensuring consistent structure, tests, and documentation through stories.

Core Features & Use Cases

  • Component Structure: Defines the standard folder layout for a component, including implementation, tests, and re-exports.
  • Testing & Stories: Enforces test coverage and Storybook stories to accompany every new component.
  • Avoidance Practices: Encourages reuse and consistency to prevent duplication and divergence across the design system.
  • Use Case: When adding a new component MyComponent, follow the pattern to place files under packages/ui/src/components/MyComponent/ and export from the central index.

Quick Start

Create a new component under packages/ui/src/components/MyComponent/, implement MyComponent.tsx, add MyComponent.test.tsx, create index.ts, export it from packages/ui/src/components/index.ts, and add a Storybook story at packages/storybook/src/MyComponent.stories.tsx.

Frequently Asked Questions about creating-components

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

FAQPage Schema
How do I create a new React UI component with tests and Storybook stories?▼

Standardizing React UI component creation enforces a standard folder layout under packages/ui/src/components/, mandatory test coverage, and Storybook stories to ensure consistency across your design system and prevent component divergence.

What is the standard folder layout for a React component in a design system?▼

Yes, you can use this skill to generate Storybook stories for your React UI components by creating a story file at packages/storybook/src/MyComponent.stories.tsx alongside the component implementation and tests.

How do I maintain consistency when adding new components to a React library?▼

Maintain consistency by following a standard component structure that enforces test coverage and Storybook stories for every new UI component, encouraging reuse to prevent duplication and divergence across the design system.

Does this React component generator enforce test coverage for new UI components?▼

Yes, this approach suits frontend teams building and maintaining a React component library, targeting standard component structure, test coverage, and Storybook documentation within packages/ui.

Related Skills

Explore More Software Engineering Skills→
LusciiLuscii

test-organization-patterns

Organize unit and integration tests into consistent directory structures across Terraform, Jest, pytest, and Go.

Official
Basic
Hack23Hack23
9

aws-s3-cloudfront

Deploy AWS S3 static websites with CloudFront enforcing secure configurations.

Official
Advanced
gil00pitagil00pita

storybook

Develop, document, and test UI components in isolated Storybook workshops.

Community
Intermediate
Ditto190Ditto190

component-gen

Generate React component scaffolds with props, tests, and docs from templates.

Community
Basic