Summary
This is your single entry point for any visual HTML/CSS/JS work, whether you're building a landing page, dashboard, or web app. It forces you to pick a build track upfront (hand-built static or component library), then runs a mandatory taste layer from an external GitHub skill for style decisions while keeping engineering quality (accessibility, responsiveness, performance, motion design) in house. The integration model is clean: taste-skill handles Brief Inference, Design Dials, and anti-slop rules, while ui-design owns track selection, component strategy, and delivery. One catch: it requires interactive pages to have actual motion design, not just static hover states. If you ship UI with Claude, this is the orchestration layer.
Install to Claude Code
npx -y skills add starchild-ai-agent/official-skills --skill ui-design --agent claude-codeInstalls into .claude/skills of the current project.
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Files
SKILL.mdView on GitHub
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-designkeeps ownership of engineering quality and delivery.taste-skillprovides 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-designto 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 |
Featured
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
