component

Generate Darkroom-compliant React components with TypeScript and CSS Modules.

41|3|Updated Jan 12, 2026

Search Tags:#typescript #react #scaffold #component #generate #css-modules

Ready to run

npx skills add https://github.com/darkroomengineering/cc-settings --skill component-darkroomengineering

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component
Source: https://github.com/darkroomengineering/cc-settings/tree/main/skills/component
Command: npx skills add https://github.com/darkroomengineering/cc-settings --skill component-darkroomengineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create consistent, reusable React components quickly by following Darkroom conventions and boilerplate templates.

Core Features & Use Cases

Automated scaffolding: creates components/<name>/ with index.tsx and <name>.module.css
Enforces Darkroom conventions: named export, CSS Modules alias s, and explicit props
Use Case: rapidly bootstrap components like Button, Header, or Card for new UI needs

Quick Start

Create a Button component.

Frequently Asked Questions about 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 CSS Modules?▼

To scaffold a React component with TypeScript and CSS Modules, generate a directory containing an index.tsx file for named exports and a CSS Module file for scoped styling. This enforces consistent boilerplate conventions automatically.

What is the best way to generate consistent React UI components across projects?▼

Generating React UI components across projects is best handled by automating boilerplate creation with a standard template. This ensures every component follows the same directory structure, export patterns, and styling conventions without manual setup.

Do I need TypeScript to generate CSS Module components?▼

Yes, TypeScript is required to generate these CSS Module components. The scaffolding process relies on the standard TypeScript component template to enforce explicit props and named exports according to Darkroom conventions.

How does component scaffolding enforce Darkroom conventions?▼

Component scaffolding enforces Darkroom conventions by automatically generating a structured directory with index.tsx and a CSS Module file. It strictly applies named exports, the CSS Modules alias s, and explicit props typing.

Can I use this to rapidly bootstrap React UI elements like a Button or Card?▼

Yes, you can rapidly bootstrap React UI elements like a Button, Header, or Card. Providing a simple name instantly generates the complete component directory with the required TypeScript and CSS Module files.

What limitations exist when generating React components from a name?▼

Generating React components from a name is limited to producing boilerplate structure and styling files. It does not implement complex internal logic, state management, or business behavior beyond the standard template scaffolding.