skills.rest
nutrisari-jeruk
nutrisari-jerukOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-component-nutrisari-jeruk
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
JewelsHovanJewelsHovan

component-organization

Organize React TypeScript codebases into barrel-exported src/ directory structures.

Community
Basic
xrehpicxxrehpicx
4

code-review-testing

Guide integration tests for codex agent changes using test_codex in core/suite.

Community
Intermediate
ntluong95ntluong95

TypeScript Tooling

Configure ESLint, Prettier, Jest, and tsconfig.json for TypeScript projects.

Community
Intermediate
0xBigBoss0xBigBoss
53

react-best-practices

Guide React hooks, effects, and component design in .tsx/.jsx codebases.

Community
Intermediate