create-component

Generate React component files with index, types, and internal structure.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/ChoiHyunjin/ai_skills --skill create-component-choihyunjin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/ChoiHyunjin/ai_skills/tree/main/skills/create-component
Command: npx skills add https://github.com/ChoiHyunjin/ai_skills --skill create-component-choihyunjin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of React components, ensuring they adhere to project-specific conventions and patterns, saving developers time and reducing boilerplate code.

Core Features & Use Cases

  • Component Generation: Creates new React components based on specified types (Simple, Responsive, Compound).
  • Type Support: Supports three distinct component patterns: Simple, Responsive (Desktop/Mobile separation), and Compound Component.
  • Use Case: When starting a new feature, use this Skill to quickly scaffold a UserProfileCard component with the appropriate structure for a responsive design.

Quick Start

Use the create-component skill to generate a new React component named UserProfileCard in the apps/pts/src/components directory.

Frequently Asked Questions about create-component

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

FAQPage Schema
How do I generate a React component with a responsive desktop and mobile separation pattern?

You can scaffold a responsive React component by selecting the Responsive pattern, which automatically creates separate files for Desktop and Mobile logic. This ensures your component structure adheres to project conventions for responsive design without manual boilerplate.

What is a compound component pattern in React and when should I scaffold it?

A compound component pattern structures a parent component with internal sub-components. You should scaffold this pattern when building complex, reusable UI elements, allowing the tool to automatically generate the necessary index and internal structure files.

How do I automate boilerplate creation for TypeScript React components?

You can automate boilerplate creation for TypeScript React components by using a code scaffolding utility. It automatically generates the required index, types, and internal structure files based on your chosen pattern, reducing manual setup time.

Can I specify a custom directory path when generating React components?

Yes, you can specify a custom directory path when generating React components. The scaffolding process handles optional path arguments directly, and if path information is missing, it will interactively prompt you for the missing details before creating the files.

What is the best way to structure a simple React component without manual boilerplate?

The best way to structure a simple React component without manual boilerplate is to use an automated scaffolding tool. By selecting the Simple pattern, the tool instantly creates the component, index, and types files, ensuring convention compliance with minimal effort.