create-design-system

Create reusable React UI components with style tokens and naming conventions.

Updated Aug 23, 2026

Search Tags:#frontend #react #code generation #design system #component development #ui primitives

Ready to run

npx skills add https://github.com/tokijh/minapp --skill create-design-system-tokijh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-design-system
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/create-design-system
Command: npx skills add https://github.com/tokijh/minapp --skill create-design-system-tokijh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured guide and template for creating new, reusable UI components within a design system, ensuring consistency and maintainability across the application.

Core Features & Use Cases

Component Creation Guide: Offers a step-by-step process for developing new design system primitives.
File Generation Template: Provides a React component template with essential props and structure.
Style Token Enforcement: Mandates the use of design system style tokens for consistent theming.
Use Case: When a new button variant or a custom input field is needed that will be used in multiple places, this Skill guides its creation and integration into the presentation/components/ui/ directory.

Quick Start

Follow the guide to create a new component named 'Avatar' in src/presentation/components/ui/avatar.tsx.

Frequently Asked Questions about create-design-system

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

FAQPage Schema

How do I create reusable React components for a design system?▼

Creating reusable UI components involves using a step-by-step guide and React template that enforces design system style tokens, ensuring consistent application-wide theming and strict dependency rules.

What are UI primitives and when do I need them in component development?▼

UI primitives are foundational, reusable design system components like buttons or custom input fields. You need them when building application-wide functionality and consistent theming across multiple locations in your project.

How do I enforce style tokens when building new UI components?▼

You enforce style tokens by using a component generation template that mandates the use of established design system tokens for styling, ensuring consistent theming and maintainability across the application.

Can I use this approach to add a custom input field to my React design system?▼

Yes, you can use this guide to add custom input fields or new button variants. It facilitates the development of common UI primitives and integrates them into the presentation components directory.

What is the best way to maintain consistency across application-wide UI components?▼

The best way to maintain consistency across application-wide UI components is to enforce strict dependency rules and mandate the creation of associated sub-skills for documentation and cataloging during component generation.

Does creating a design system component require setting up sub-skills?▼

Yes, creating a design system component mandates the creation of associated sub-skills for documentation and cataloging, ensuring that every new UI primitive is properly tracked and maintained within the system.