new-component

Scaffold React components with project conventions for imports, types, cn(), and tRPC.

Updated Aug 23, 2026

Search Tags:#typescript #react #component #trpc #ui-patterns #cn

Ready to run

npx skills add https://github.com/ItsMattG/property-tracker --skill new-component-itsmattg

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers spend time crafting React components that adhere to project conventions (imports order, types, cn(), and tRPC patterns), leading to inconsistent code and reduced maintainability.

Core Features & Use Cases

Enforces import/order and type patterns to ensure consistent component scaffolds.
Provides a ready-to-use React component skeleton with Tailwind-friendly class naming via cn().
Supports tRPC integration scaffolds for common data fetching patterns.

Quick Start

Create a new React component named after your feature, following project conventions.

Frequently Asked Questions about new-component

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

FAQPage Schema

How do I scaffold a React component that follows project conventions?▼

Scaffolding a React component following project conventions requires generating a skeleton that enforces import order, groups imports by source, defines internal non-exported interfaces, and applies prop typing.

How do I generate a TypeScript React component with tRPC integration?▼

Generating a TypeScript React component with tRPC integration involves creating a functional component skeleton that includes tRPC data fetching patterns, applies type safety, and ensures internal interfaces are not exported globally.

What is the best way to structure React component imports and types?▼

The best way to structure React component imports and types is to group imports by source, enforce a specific import order, and keep internal interfaces unexported to maintain clean module boundaries and ensure maintainability.

Can I use cn() for Tailwind styling when creating React components?▼

Yes, you can use cn() for Tailwind styling when creating React components, as it provides a ready-to-use skeleton that applies Tailwind-friendly class naming conventions directly within the generated component output.

Does this React component generator support functional components and prop typing?▼

Yes, this React component generator supports functional components and prop typing by applying documented conventions and naming rules to common component scenarios, producing a ready-to-use skeleton with strict type definitions.

Why should I not export internal interfaces from my React components?▼

You should not export internal interfaces from your React components to satisfy documented project conventions, ensuring strict module boundaries, preventing external access to internal types, and maintaining consistent code architecture.