Build Your Own Component

Generate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add ethankongee/build-your-own-component --skill build-your-own-component

Manual install

git clone --depth 1 https://github.com/ethankongee/build-your-own-component.git /tmp/build-your-own-component
mkdir -p ~/.claude/skills
cp -r /tmp/build-your-own-component/. ~/.claude/skills/build-your-own-component

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Build Your Own Component Library

You are building a complete 24-component UI library. Follow these steps exactly.

---

## Step 1: Gather Requirements

Before writing any code, ask the user these 5 questions. Wait for answers before proceeding.

1. **Framework**: Vanilla JS or React?
2. **Design sets**: How many design variations? (1, 2, or 3) — Note: 3 sets takes significantly longer.
3. **Style preferences**: Any aesthetic direction? (e.g., minimal, playful, corporate, retro, brutalist, glassmorphism). If none provided, invent distinct creative directions for each set.
4. **Color mode**: Dark mode, light mode, or both?
5. **Icon style**: Any icon style preference? (e.g., outlined, filled, rounded, sharp). If none, pick a style that fits each set's aesthetic.

Once you have answers, confirm the plan back to the user before proceeding.

---

## Step 2: Set Up Output Directory

All output goes under `/tmp/ComponentLibrary/`.

For each set, create a directory named `set-{N}-{LibraryName}` where `{LibraryName}` is a creative PascalCase name you invent (e.g., `AuroraUI`, `EmberKit`, `NovaPrime`).

### Directory structure per set:

Read the full skill on GitHub

Details

Skill name: build-your-own-component
Repository: ethankongee/build-your-own-component
Repo updated: 15 March 2026

FAQ

What does the Build Your Own Component skill do?

How do I install the Build Your Own Component skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add ethankongee/build-your-own-component --skill build-your-own-component. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Build Your Own Component popular?

It lives in ethankongee/build-your-own-component, which has 6 GitHub stars and 0 forks.

Related skills

Cockpit UI Skill

KrasAndy/cockpit-ui-skill

暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。

Frontend & Design

Apple Design

XOVIET-GAME/apple-design-skill

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

Frontend & Design

Elementor Pro Designer Skill

jainshwetank/elementor-pro-designer-skill

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS

Frontend & Design

Telegram Premium Emojis

abbosahmad/telegram-premium-emojis

Comprehensive guide, design system, and code generator for Telegram Bot Premium Custom Emojis, Aiogram 3 card UI, icon_custom_emoji_id inline buttons, and sticker pack discovery.

Frontend & Design

Image First Frontend

jinshiqwq/image-first-frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

Frontend & Design

Figma Design Extract

jeltehomminga/figma-design-skills

Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". This is design-to-code only - to push code into Figma, use figma-generate-design instead.

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.