Skill library / Cursor

React Component Generator skill for Cursor

Cursor writes React quickly, but not always your React. This skill encodes your folder layout, styling approach and testing pattern so new components look like the rest of the codebase.

What it's good for

• Scaffolding UI components in a design system
• Keeping a large team's components consistent
• Generating tests and Storybook stories alongside components

How the skill works

1. Look at two existing components to infer conventions
2. Create the component file with a typed Props interface
3. Use semantic HTML and ARIA attributes where needed
4. Add a test covering render, props and one interaction
5. Export it from the nearest index file

Built-in rules

• No default exports unless the project already uses them
• No inline styles; use the project's styling system
• Every interactive element must be keyboard accessible

Example

You: “Create a Pagination component”
Result: Pagination.tsx, Pagination.test.tsx and Pagination.stories.tsx in components/Pagination/, matching existing patterns.

SKILL.md template

Save as react-component-generator/SKILL.md.

---
name: react-component-generator
description: "Creates React components that follow the project's conventions: TypeScript props, accessible markup, co-located tests and stories. Use when the user asks to create, scaffold or add a React component."
---

# React Component Generator

## Workflow
1. Look at two existing components to infer conventions
2. Create the component file with a typed Props interface
3. Use semantic HTML and ARIA attributes where needed
4. Add a test covering render, props and one interaction
5. Export it from the nearest index file

## Rules
- No default exports unless the project already uses them
- No inline styles; use the project's styling system
- Every interactive element must be keyboard accessible

How to install in Cursor

Put the folder in .cursor/skills/ (or .agents/skills/), or copy the included .mdc file into .cursor/rules/.

Pro tip

Set the .mdc rule's globs to src/components/**/*.tsx so it only applies where it matters.

FAQ

Related skills

• Unit Test Writer skill for Cursor
• SQL Query Helper skill for Cursor
• Python Refactoring skill for Cursor