component-generator

Generate React component files with types, hooks, and tests.

Updated Feb 3, 2026
One-click install
npx skills add https://github.com/mouayadakel/flixCamFinal --skill component-generator-mouayadakel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-generator
Source: https://github.com/mouayadakel/flixCamFinal/tree/main/.cursor/skills/component-generator
Command: npx skills add https://github.com/mouayadakel/flixCamFinal --skill component-generator-mouayadakel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of standard React component files, saving developers time and ensuring consistency in project structure.

Core Features & Use Cases

  • Boilerplate Generation: Creates component files, type definitions, hooks, index files, and optional test files.
  • Structured Output: Organizes generated files within feature-specific directories.
  • Use Case: When starting a new feature, use this Skill to quickly scaffold all necessary files for a new React component, adhering to project conventions.

Quick Start

Use the component generator to create a new React component named 'UserProfile'.

Frequently Asked Questions about component-generator

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

FAQPage Schema
How do I generate a React component with types and test files automatically?

To generate a React component with types and test files, this Skill automates the creation of a complete structure including the component file, types, hook, index, and test file within a feature folder.

What is the best way to scaffold a new React feature folder with boilerplate?

The best way to scaffold a React feature folder is using this generator, which creates structured directories containing your component, types, hooks, and index files to ensure project consistency.

Does this React boilerplate generator support shadcn UI library integration?

Yes, this React boilerplate generator supports shadcn UI library integration, allowing you to seamlessly incorporate generated component structures into existing projects utilizing shadcn.

Can I generate 'use client' directives for React components in Next.js?

Yes, you can generate 'use client' directives for React components. The generator supports adding these directives to ensure proper rendering in client-side environments.

How do I ensure kebab-case filenames and PascalCase names when creating React components?

To ensure kebab-case filenames and PascalCase component names, this generator automatically formats output files and component declarations, enforcing maintainable code conventions without manual intervention.

What files are included when generating a React component structure?

When generating a React component structure, the included files are the main component file, type definitions, a corresponding hook, an index file for exports, and an optional test file.