create-ui-component

Create Foundry platform UI components with Storybook stories and Untitled UI icons.

Updated Apr 10, 2026

Search Tags:#theming #react #component #storybook #design-system #ui-components #untitled-ui

Ready to run

npx skills add https://github.com/qdhenry/Foundry-OSS --skill create-ui-component-qdhenry

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds consistent, design-system compliant UI components for the Foundry platform, enabling rapid iteration while preserving visual fidelity.

Core Features & Use Cases

Design-system compliant React components with automatic dark/light theming.
Co-located Storybook stories and integration with Untitled UI tokens and icons.
CLI-driven workflows to create new components, add stories, or bring in Untitled UI source-owned components.

Quick Start

Choose the component you want to create and trigger the guided workflow to scaffold the component and its Storybook story.

Frequently Asked Questions about create-ui-component

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

FAQPage Schema

How do I create React UI components that adhere to a design system?▼

To create React UI components, this Skill scaffolds design-system compliant files with automatic dark and light theming, co-located Storybook stories, and Untitled UI icon integration for the Foundry platform.

What is the best way to add Storybook stories for new UI components?▼

The best way to add Storybook stories is through co-located component files. This Skill triggers a guided workflow to scaffold both the React component and its Storybook story simultaneously.

Can I use Untitled UI icons and tokens with my React design system components?▼

Yes, you can use Untitled UI icons and tokens. The Skill integrates Untitled UI source-owned components into your design system, ensuring visual fidelity across dark and light themes.

Does this workflow support automatic dark and light theming for React components?▼

Yes, this workflow supports automatic theming. It builds design-system compliant React components for the Foundry platform that automatically apply dark and light theme tokens.

How do I structure files for new UI components in a design system?▼

To structure files properly, the Skill defines specific directories: scripts/ for deterministic tasks, references/ for docs, assets/ for assets, and co-locates component and story files together.