create-component

Scaffold a DUI component extending a dui-primitive with self-registration.

Updated Mar 11, 2026

Search Tags:#typescript #scaffold #component #design-tokens #web-components #primitives #dui

Ready to run

npx skills add https://github.com/deepfuturenow/dui --skill create-component-deepfuturenow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/deepfuturenow/dui/tree/main/.agents/skills/create-component
Command: npx skills add https://github.com/deepfuturenow/dui --skill create-component-deepfuturenow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create-component helps developers quickly scaffold a new DUI component by extending an existing dui-primitive, ensuring consistency with design tokens and automatic self-registration.

Core Features & Use Cases

Scaffold a new DUI component that extends a primitive, injects tokens, and self-registers
Generate the necessary files (name.ts and index.ts) and update configuration for deno.json mappings
Use when users ask to add or create a component, or say "create component" or "add a component" etc.

Quick Start

Ask the AI to scaffold a new DUI component by extending a dui-primitive and auto-registering it with a unique tag.

Frequently Asked Questions about create-component

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

FAQPage Schema

How do I scaffold a new web component that extends an existing primitive?▼

Scaffolding a new DUI component involves extending a dui-primitive to generate a TypeScript class and index.ts file. This ensures the new web component self-registers as a custom element and supports token injection.

What files are generated when creating a new DUI component?▼

Creating a DUI component generates a dedicated TypeScript class file and an index.ts file. It also updates deno.json configuration mappings to ensure the new component properly supports token injection.

How does design token injection work for scaffolded web components?▼

Design token injection works by extending a dui-primitive within the scaffolded TypeScript class. This ensures the newly created custom element automatically receives and applies the necessary design tokens.

Do I need TypeScript to use this component scaffolding tool?▼

Yes, TypeScript is required. The scaffolding process generates a dedicated TypeScript class and index.ts file to ensure proper type safety and custom element self-registration within the DUI framework.

Can I auto-register a scaffolded component as a custom element?▼

Yes, auto-registering a scaffolded component as a custom element is a core feature. The tool ensures the new web component self-registers by extending a dui-primitive and updating the necessary configuration.

What is the best way to add a new component to a DUI design system?▼

The best way to add a new component to a DUI design system is to scaffold it by extending an existing dui-primitive. This ensures consistency with design tokens and automatic self-registration as a custom element.