skills.rest
IDEA-on-Action
IDEA-on-ActionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-component

Generate React component files with PascalCase names and shadcn/ui integration.

Updated Oct 12, 2025
Search Tags:#frontend#react#component#ui-design#shadcn-ui#code-generation
One-click install
npx skills add https://github.com/IDEA-on-Action/IDEA-on-Action --skill react-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component
Source: https://github.com/IDEA-on-Action/IDEA-on-Action/tree/main/.claude/skills/react-component
Command: npx skills add https://github.com/IDEA-on-Action/IDEA-on-Action --skill react-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React 컴포넌트 생성과 shadcn/ui 통합은 반복적이고 설정이 많아 생산성을 저하시킨다. 이 스킬은 표준 구조를 제시하고 생성 흐름을 단순화한다.

Core Features & Use Cases

  • 컴포넌트 템플릿 생성: src/components/와 하위 폴더 구조를 표준화한다.
  • shadcn/ui 통합 자동화: 필요한 컴포넌트를 빠르게 추가하고 스타일링을 일관되게 적용한다.
  • Use Case: 새 페이지에 필요한 Button/Card 조합을 빠르게 생성한다.

Quick Start

예: Button 컴포넌트를 추가하려면 npx shadcn@latest add button을 실행합니다.

Frequently Asked Questions about react-component

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

FAQPage Schema
How do I automate React component creation with shadcn/ui?▼

Automate React component creation by scaffolding .tsx files in src/components/ subdirectories using shadcn/ui templates. Run `npx shadcn@latest add [component]` to generate PascalCase-named components with integrated styling and standard patterns like Compound Components or Custom Hooks.

What's the best folder structure for organizing React components with shadcn/ui?▼

Use a standardized src/components/ structure with subdirectories for ui, shared, layout, forms, and features. This organization reduces setup overhead, ensures consistency across your project, and simplifies shadcn/ui component integration and maintenance.

Can I use shadcn/ui components with custom patterns like forwardRef or Render Props?▼

Yes. This Skill supports optional patterns including Compound Components, Render Props, Custom Hooks, and forwardRef alongside shadcn/ui integration. These patterns work within the standard src/components/ structure and maintain consistency with generated .tsx components.

How do I speed up building new pages with React and shadcn/ui components?▼

Use templated component generation to rapidly scaffold UI components like Button or Card combinations. The Skill automates file creation, naming conventions, and shadcn/ui tooling invocation, eliminating repetitive setup and letting you focus on page logic.

What naming and file conventions should I follow for React components?▼

Follow PascalCase naming and generate .tsx files in src/components/ and its subdirectories. This Skill enforces these conventions automatically during component scaffolding, ensuring consistency and compatibility with shadcn/ui and React best practices.

Does component generation work for different UI patterns and use cases?▼

Yes. Component generation supports multiple patterns—Compound Components, Render Props, Custom Hooks, and forwardRef—across ui, shared, layout, forms, and features directories, adapting to different architectural needs and reusability requirements.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced
ngocnhanvongocnhanvo

forms

Create and validate React forms with react-hook-form and shadcn/ui.

Community
Intermediate
Quanby-IT-SolutionsQuanby-IT-Solutions
2

tailwind-shadcn

Standardize Tailwind v4 and shadcn/ui styling in apps/web with ThemeProvider theming.

Official
Intermediate