skills.rest
qdhenry
qdhenryCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
iButtersiButters
3

react-web

Build React 19+ web applications with Server Components and TypeScript.

Community
Advanced
outscaloutscal
62

asset-creator

Generates scalable SVG visuals from icons and shapes via Python scripts.

Official
Intermediate
sameer-thakkarsameer-thakkar

create-component

Convert Figma designs into React components with PandaCSS and Storybook.

Community
Advanced