skills.rest
bettercallzaal
bettercallzaalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

new-component

Generates a React component scaffold with TypeScript props interface and Tailwind classes at src/components/[path].tsx.

1|1|Updated Mar 12, 2026
Search Tags:#typescript#react#scaffold#tailwind#new-component#zao-os
One-click install
npx skills add https://github.com/bettercallzaal/ZAOOS --skill new-component-bettercallzaal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/bettercallzaal/ZAOOS/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/bettercallzaal/ZAOOS --skill new-component-bettercallzaal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a rapid, consistent scaffold for a new React component that follows ZAO OS conventions (use client, dark theme, mobile-first, Tailwind v4), reducing setup time and ensuring uniform structure.

Core Features & Use Cases

  • Generates a ready-to-use component file at src/components/[path].tsx based on a given component name and path (e.g., music/TrackCard).
  • Enforces ZAO OS conventions in the scaffold, including "use client" directive, Tailwind classes, "@/ alias" imports, TypeScript props interface, and responsive class names.
  • Use Case: A developer creating a new UI piece can run the scaffold to obtain a fully structured React component ready for styling and integration.

Quick Start

Run /new-component music/TrackCard to scaffold the component at src/components/music/TrackCard.tsx.

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 with TypeScript and Tailwind automatically?▼

Running /new-component music/TrackCard generates a ready-to-use React component at src/components/music/TrackCard.tsx, complete with a TypeScript props interface and Tailwind styling.

What conventions does a ZAO OS React component scaffold enforce?▼

The scaffold enforces ZAO OS conventions including a 'use client' directive, dark-theme Tailwind styling, mobile-first responsive classNames, TypeScript props interfaces, and '@/ alias' imports.

Do I need Tailwind v4 to use this React component scaffolder?▼

The scaffolder targets React projects using Tailwind v4, applying dark-theme Tailwind classes and responsive classNames by default to ensure your UI development remains consistent with your styling setup.

What is the best way to create a new UI component under src/components?▼

Using a scaffold command like /new-component music/TrackCard places a fully structured React TypeScript file under src/components, reducing manual setup time and ensuring uniform component structure.

Can I specify a nested folder path when generating a new React component?▼

You can specify a nested folder path by passing a slash-separated name like music/TrackCard. This generates the component at the corresponding src/components/music/TrackCard.tsx directory path.

Why does my scaffolded React component include a 'use client' directive?▼

The 'use client' directive is included because the scaffold enforces ZAO OS conventions, ensuring the component is ready for client-side rendering within your React application architecture.

Related Skills

Explore More Software Engineering Skills→
ovachieverovachiever
52

tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui in Vite React projects.

Community
Advanced
TehminanazTehminanaz
1

frontend-component-architect

Design and implement pixel-perfect UI components for Next.js 16 with Tailwind CSS and Shadcn UI.

Community
Advanced
AgentiveCityAgentiveCity
2

shadcn-vite-integration

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

Official
Intermediate
stahurastahura
19

da-cli

Scaffold Domo apps with Vite, React, and TypeScript boilerplate.

Community
Intermediate