skills.rest
deepfuturenow
deepfuturenowOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/deepfuturenow/dui --skill create-component-deepfuturenow
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
deepfuturenowdeepfuturenow

create-primitive

Scaffold a new unstyled DUI primitive with boilerplate files and wired exports.

Official
Advanced
guichefferguicheffer
3

zest-components-web-patterns

Generate Zest design system components with TypeScript, styles, variants, tests, and Storybook documentation.

Community
Intermediate
duc01226duc01226

design-system

Generate design tokens and slide templates from a three-layer token architecture.

Community
Advanced
ThedouglerThedougler

chrome-devtools

Automate browser navigation, element interaction, and performance trace capture via Chrome DevTools MCP.

Community
Advanced