new-component

Generate React component folders, files, and barrel exports per SOP Coding Standard 2.0.

Updated Jan 8, 2026

Search Tags:#typescript #react #scaffolding #boilerplate #ui component

Ready to run

npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-component-nutrisari-jeruk

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/nutrisari-jeruk/react-vite-template/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-component-nutrisari-jeruk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill creates the necessary files for a new UI component, following SOP Coding Standard 2.0 conventions, automating the setup process.

Core Features & Use Cases

Scaffolding: Automatically generates a folder structure and files for a new UI component.
Standard Conventions: Follows SOP Coding Standard 2.0 for consistency and readability.
Use Case: Simplify the process of creating a new component by automating file creation and setup, ensuring adherence to coding standards.

Quick Start

Run the command '/new-component [ComponentName]' to create a new UI component with the specified name.

Frequently Asked Questions about new-component

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

FAQPage Schema

How do I generate boilerplate for a new React UI component in TypeScript?▼

Generate boilerplate for a new React UI component by running the /new-component command, which automatically creates the folder structure, [Name].tsx, [Name].test.tsx, and index.ts files following standard conventions.

What is the best way to scaffold a React component with test files and barrel exports?▼

The best way to scaffold a React component with tests and barrel exports is using an automated generator that creates [Name].tsx, [Name].test.tsx, and index.ts, while updating src/components/ui/index.ts automatically.

Does the component scaffolding process require specific TypeScript and React configurations?▼

Yes, the component scaffolding process requires both TypeScript and React to be configured in your project, as the generated files use .tsx extensions and follow specific SOP Coding Standard 2.0 conventions.

Can I use this UI component generator for projects not following SOP Coding Standard 2.0?▼

This UI component generator is specifically designed for projects following SOP Coding Standard 2.0, meaning it may not be suitable if your codebase uses different formatting or structural conventions.

How do I automate barrel exports when creating new UI components?▼

Automate barrel exports when creating new UI components by using a scaffolding tool that automatically appends the necessary export statements to your src/components/ui/index.ts file during generation.