ui-design

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

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