ui-design

Q: How do I install ui-design?

Run npx skills add https://github.com/starchild-ai-agent/official-skills --skill ui-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-design/ (personal) or .claude/skills/ui-design/ (project).

by starchild-ai-agentFrontend & Design

UI/UX quality gate and build guide for every visual output — landing pages, dashboards, web apps, portfolios, and tools. ui-design remains the main entry point. Integration model: ui-design main trunk + taste-skill overlay. - ui-design owns engineering quality (track selection, component-library strategy, accessibility, responsiveness, theming, performance, preview delivery) - taste-skill is invoked inside the ui-design workflow for style decisions (Brief Inference, Design Dials, Anti-slop hard rules) MUST USE together with project-builder whenever a project produces visual HTML/CSS/JS.

Installs: 1.8K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/starchild-ai-agent/official-skills --skill ui-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads ui-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

UI Design Skill

This skill is the single entry point for visual work.

Use it for any user-facing HTML/CSS/JS output: landing pages, dashboards, product UI, internal tools, and portfolio pages.

Step 1 — Pick the build track

Choose deliberately before coding:

Track A (hand-built): static preview, vanilla HTML/CSS/JS, quick custom pages
Track B (component library): React/Vite/Next project using shadcn/ui, HeroUI, or coss ui

Track decision and component-library strategy are always owned by ui-design.

Step 2 — Taste Overlay Contract (mandatory)

Inside ui-design workflow, invoke taste-skill for exactly these 3 style blocks:

Brief Inference
Design Dials (layout variance / motion intensity / visual density)
Anti-slop hard rules

Boundary

ui-design keeps ownership of engineering quality and delivery.
taste-skill provides style direction and anti-template taste constraints.

This avoids overlap with ui-design’s engineering references (component libraries, a11y, preview, data dashboard implementation).

Step 3 — Runtime order (use this every time)

Use ui-design to select Track A/B.
Run taste Brief Inference before writing UI code.
Apply taste Design Dials to set style direction.
For any interactive page, define a motion plan first (what animates, why, frequency, duration, easing, reduced-motion path).
Implement with ui-design engineering rules (a11y/theme/responsive/component strategy/performance).
Run taste Anti-slop check as final style gate before delivery.

One sentence summary:

taste decides style character
ui-design guarantees robust implementation

Hard rule: if the page has interactions, motion design is mandatory (at least tactile feedback + state transition feedback). Static-looking interaction states are treated as incomplete UI.

Step 4 — Conflict arbitration

When rules overlap:

Style conflict → taste-skill wins
Engineering safety/correctness conflict → ui-design wins

Engineering safety includes: accessibility, responsive stability, interaction reliability, runtime correctness, and performance constraints.

Step 5 — Where to read/download taste-skill (no local mirror)

Do not maintain a local mirror or version-stamp file.

Always read/update taste rules directly from GitHub:

Repo: https://github.com/Leonxlnx/taste-skill
Main skill to consult: https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
Raw download URL: https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md
Full skill package directory: https://github.com/Leonxlnx/taste-skill/tree/main/skills

When taste-skill updates, re-check the GitHub source directly and apply needed changes in the ui-design overlay contract.

Engineering references

File	Purpose
`references/design-process.md`	Engineering quality gate (a11y/theme/responsive/interaction/runtime checklist)
`references/component-libraries.md`	shadcn/ui · HeroUI · coss ui selection + lookup workflow
`references/animations.md`	Motion implementation standards, interactive-motion requirements (integrated with emil-design-eng decision framework), and GSAP usage notes
`references/charts.md`	Chart.js/ECharts implementation patterns
`references/dashboards.md`	Data sourcing, real-time updates, dashboard structure, performance
taste-skill GitHub source	Read style rules directly from GitHub: `https://github.com/Leonxlnx/taste-skill/tree/main/skills`

FAQ

What does the ui-design skill do?

How do I install ui-design?

Run npx skills add https://github.com/starchild-ai-agent/official-skills --skill ui-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-design/ (personal) or .claude/skills/ui-design/ (project).

Which AI agents can use ui-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is ui-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains ui-design?

It is published by starchild-ai-agent in starchild-ai-agent/official-skills. It has 1,788 recorded installs.