skill CX Codex

ui-design · starchild-ai-agent — Claude Code skill: what it does, how to install

Q: How do I install ui-design in Claude Code?

Run `npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code`, then check `~/.claude/skills/ui-design/SKILL.md`.

Q: Does ui-design require taste-skill?

Yes. The workflow calls `taste-skill` for Brief Inference, Design Dials, and the Anti-slop gate, while `ui-design` owns engineering decisions.

A build guide and quality gate for visual interfaces, covering track selection, accessibility, responsive behavior, themes, motion, and preview delivery.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code

Open on GitHub

What ui-design does

ui-design is the main workflow for user-facing HTML/CSS/JS, including landing pages, dashboards, web apps, portfolios, and internal tools. It starts by choosing Track A, based on vanilla HTML/CSS/JS, or Track B, using React/Vite/Next with a component library. The process also checks accessibility, responsive behavior, theming, performance, and preview delivery.

Style direction comes from taste-skill, which is called for Brief Inference, Design Dials, and the final Anti-slop check. A project that produces visual HTML/CSS/JS must use this skill with project-builder. Interactive pages also need tactile feedback and feedback for state changes; otherwise their interaction states are treated as incomplete. Engineering references live under references/, while the style rules are read from https://github.com/Leonxlnx/taste-skill.

What it helps with

choose a build track for a visual page
plan motion before implementing interactions
check an interface for accessibility and responsive behavior
prepare a dashboard for preview delivery
separate style decisions from engineering constraints

Example prompts for the agent

Use the ui-design skill to choose a track for a landing page built with HTML/CSS/JS.
Design an interactive dashboard with a motion plan, then review accessibility and responsive behavior.
Build this visual project with project-builder and use taste-skill for the style decisions.

How to install ui-design

1Skills CLI (Vercel)

npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code

2Manually: put the files in place

~/.claude/skills/ui-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/ui-design/

1Skills CLI (Vercel)

npx skills add Starchild-ai-agent/official-skills --skill ui-design -a codex

2Manually: put the files in place

.agents/skills/ui-design/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add Starchild-ai-agent/official-skills --skill ui-design -a cursor

2Manually: put the files in place

.cursor/skills/ui-design/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install Starchild-ai-agent/official-skills ui-design

2Manually: put the files in place

.github/skills/ui-design/SKILL.md

1Skills CLI (Vercel)

npx skills add Starchild-ai-agent/official-skills --skill ui-design -a gemini-cli

2Platform CLI

gemini skills install https://github.com/Starchild-ai-agent/official-skills --path ui-design

Manually: put the files in place

.devin/skills/ui-design/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add Starchild-ai-agent/official-skills --skill ui-design -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about ui-design

How do I install ui-design in Claude Code?

Run npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code, then check ~/.claude/skills/ui-design/SKILL.md.

What does ui-design do?

It guides the implementation of visual interfaces, from selecting a build track to checking accessibility, responsive behavior, themes, performance, motion, and preview delivery.

Does ui-design require taste-skill?

Yes. The workflow calls taste-skill for Brief Inference, Design Dials, and the Anti-slop gate, while ui-design owns engineering decisions.

Similar skills

Everything for Frontend and UI →

ui-design by other authors comes first.

ui-design mblode Picks a visual direction, writes the interface code, and audits what shipped for user-facing defects. Useful when you need a landing page or a dark mode pass. CX Codex +1 1,400installs ui-design frappe A skill that gives the agent design rules for layout, type, color and spacing. Useful when no product design-system skill exists. CX Codex +1 832installs ui-design TencentCloudBase Makes the agent output a design specification — palette, fonts, layout — before it writes any interface code. CX Codex +1 1,800installs ui-design PyModel Frontend design guidelines covering 42 rules across 8 categories. It steers interface code toward WCAG accessibility and Core Web Vitals standards. CX Codex +1 513installs ui-design Mindrally Gives the agent a checklist for interfaces: accessibility, responsive layout, performance. Useful when it writes or reviews frontend code. CX Codex +1 981installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set30

xai-grok-onboarding Signs an Anthropic account into your agent over OAuth 2.0 device-code — X Premium, SuperGrok or SuperGrok Heavy. Useful when you want Claude without a separate API key. CX Codex +1 2,300installs tg-bot-binding Guides the AI through linking a Telegram bot to Starchild via QR code or manual BotFather tokens, plus resolving pairing errors. CX Codex +1 2,200installs wechat-binding A skill that walks the agent through WeChat binding: QR generation, scan, connect, reconnect and disconnect. CX Codex +1 2,200installs video-analysis Inspects local video files using direct model ingestion for small clips or ffmpeg frame extraction and Whisper audio transcription for larger media. CX Codex +1 1,800installs feishu-binding This skill walks through device flow authorization so your agent can message you on Feishu or Lark. Handy the first time you bind an account. CX Codex +1 1,400installs worldcup Pulls FIFA World Cup 2026 schedules, live match scores, and runs a prediction game with points. Useful for tracking fixtures and placing bets directly in chat. CX Codex +1 1,400installs upbit Use the upbit CLI through an agent to inspect market data and manage exchange accounts and orders. Private commands need API credentials. CX Codex +1 1,300installs x402 This skill configures x402 payments for an HTTP service and helps an agent pay for other agents’ services. Use it for per-call charges, subscriptions, or timed free promotions. CX Codex +1 1,200installs