skills.rest
abdoulayesow
abdoulayesowCOMMUNITY
Explore all skills by this author →
GitHub

add-component

Generates React components with TypeScript interfaces, dark mode support, LocaleProvider i18n integration, and responsive design templates.

Updated Aug 23, 2026
Search Tags:#typescript#react#scaffolding#i18n#generate#dark-mode
One-click install
npx skills add https://github.com/abdoulayesow/restaurant-hub-app-001-2026 --skill add-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-component
Source: https://github.com/abdoulayesow/restaurant-hub-app-001-2026/tree/main/.claude/skills/add-component
Command: npx skills add https://github.com/abdoulayesow/restaurant-hub-app-001-2026 --skill add-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffolds React components with TypeScript, dark mode support, i18n integration, and design-system templates to speed up UI development.

Core Features & Use Cases

  • Generates TS interfaces, prop typings, and patterned component templates (modal, table, card, form, chart)
  • Ensures dark mode, i18n, and responsive design adherence
  • Use Case: Quickly bootstrap a new UI element like a modal or data table with full typing and localization

Quick Start

Run the /component [name] [type] command to generate a new React component.

Frequently Asked Questions about add-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 dark mode support?▼

To scaffold a React component with TypeScript and dark mode, use the /component [name] [type] command to generate typed templates that enforce TS interfaces, locale integration, and dark-mode class patterns automatically.

Can I generate React table and modal components with i18n integration?▼

Yes, you can generate React table and modal components with i18n integration. The scaffolding process applies locale integration via LocaleProvider to ensure your generated UI elements support multiple languages out of the box.

What React component types can I scaffold for dashboard development?▼

You can scaffold modal, table, card, form, and chart component types for dashboard development. Each generated component enforces TypeScript interfaces, responsive design, and dark-mode class patterns suitable for internal tools.

Do I need to manually configure TypeScript interfaces when scaffolding React components?▼

No, you do not need to manually configure TypeScript interfaces when scaffolding React components. The generated code automatically enforces TS interfaces and prop typings, ensuring type safety across your UI elements without manual setup.

Does scaffolding React components with i18n require a LocaleProvider setup?▼

Scaffolding React components with i18n applies locale integration via LocaleProvider directly in the generated code. This ensures your modal, table, card, form, and chart components are ready for localization without requiring separate manual configuration.

Are there limitations to scaffolding React components with design-pattern templates?▼

Scaffolding React components with design-pattern templates is limited to modal, table, card, form, and chart types. The generated code enforces TS interfaces, dark mode, i18n, and responsive design patterns strictly, which may require customization for non-standard UI elements.

Related Skills

Explore More Software Engineering Skills→
saddam-eng-techsaddam-eng-tech

react-scaffold

Generate a React TypeScript component folder with tests and Storybook stories.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

styling-with-tailwind

Style user interfaces with Tailwind CSS utility classes and responsive breakpoints.

Community
Intermediate
blockmatic-iceboxblockmatic-icebox
4

Tailwind v4 + shadcn/ui

Convert Tailwind v4 design tokens into a CSS-variable theming system for React apps.

Official
Advanced
Holo00Holo00
6

frontend-patterns

Create Next.js 16 React components with TypeScript, Tailwind CSS, and dark-mode styling.

Community
Intermediate