UI Design Skill

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:

1. Brief Inference
2. Design Dials (layout variance / motion intensity / visual density)
3. 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)

1. Use ui-design to select Track A/​B.
2. Run taste Brief Inference before writing UI code.
3. Apply taste Design Dials to set style direction.
4. For any interactive page, define a motion plan first (what animates, why, frequency, duration, easing, reduced-motion path).
5. Implement with ui-design engineering rules (a11y/​theme/​responsive/​component strategy/​performance).
6. 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