new-component

Scaffold React components with TypeScript interfaces and predefined states.

Updated Feb 10, 2026

Search Tags:#typescript #react #code generation #scaffolding #frontend development #component generation

Ready to run

npx skills add https://github.com/wordshepherd/colophony --skill new-component-wordshepherd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/wordshepherd/colophony/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/wordshepherd/colophony --skill new-component-wordshepherd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of new React components, ensuring they follow established patterns and conventions within the Colophony project, saving developers time and maintaining code consistency.

Core Features & Use Cases

Boilerplate Generation: Creates component files with necessary imports, structure, and TypeScript interfaces.
Pattern Adherence: Enforces project-specific patterns for forms, lists, and dialogs.
Use Case: A developer needs to add a new "User Profile Card" component. They can use this skill with a simple command to generate the basic structure, including placeholder props and styling hooks, ready for customization.

Quick Start

Use the new-component skill to create a simple React component named 'UserProfileCard'.

Frequently Asked Questions about new-component

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

FAQPage Schema

How do I scaffold React components with TypeScript interfaces automatically?▼

Scaffolding React components with TypeScript interfaces is done through code generation tools that create files with necessary imports, predefined structures, and placeholder props to maintain code consistency.

Can I generate form components using react-hook-form with predefined structures?▼

Generating form components using react-hook-form with predefined structures is supported by specialized scaffolding tools that enforce project-specific patterns, automatically integrating the required hooks and TypeScript interfaces for immediate use.

What is the best way to create list components with tRPC and loading states?▼

Creating list components with tRPC and loading states is handled by component generation utilities that pre-configure data fetching patterns and automatically include error boundaries and loading placeholders within the generated TypeScript files.

Does the component generation process support shadcn/ui conventions for dialogs?▼

The component generation process fully supports shadcn/ui conventions for dialogs by inferring categories through explicit flags or naming conventions, ensuring the generated dialog components match the existing UI library standards.

Do I need to manually define TypeScript interfaces when scaffolding frontend components?▼

Manual definition of TypeScript interfaces is unnecessary when scaffolding frontend components because the code generation process automatically extracts and creates the required interfaces, props, and styling hooks.

How does component scaffolding infer categories for React dialog and list components?▼

Inferring categories for React dialog and list components during scaffolding relies on explicit flags passed to the generator or analytical interpretation of the component naming convention to apply the correct structural pattern.