Read .agents/software-principles/SKILL.md and .agents/frontend/SKILL.md first.
Design Thinking
Before writing code, commit to a clear aesthetic direction:
- Purpose — What problem does this UI solve? Who uses it?
- Tone — Pick one and commit: minimal · editorial · playful · brutalist · luxury · retro-futuristic · organic · industrial · soft · geometric. Intentionality over intensity.
- Differentiation — What is the one thing a user will remember about this UI?
No two designs should look the same. Avoid converging on safe, predictable choices.
Typography
Choose characterful, distinctive fonts — never Inter, Roboto, Arial, or system fonts as a default. Pair a display font with a refined body font. Font choice drives the entire aesthetic — treat it as the first design decision.
Color & Composition
- Apply 60-30-10: dominant (60%) · secondary (30%) · accent (10%)
- Map every color to a semantic role (background, surface, foreground, muted, primary, accent, destructive, success) — never use raw hex ad hoc
- Contrast minimum WCAG AA: normal text ≥ 4.5:1, UI components ≥ 3:1
- Commit to light or dark — don't default to neutral gray
- Asymmetry, overlap, diagonal flow, grid-breaking elements over predictable grid layouts
- Generous negative space OR controlled density — pick one and execute it fully
Spatial Design (8-Point Grid)
All spacing, sizing, and layout values must be multiples of 4px. Prefer 8px increments; use 4px only when 8px is too large. Never use odd numbers.
- Applies to: padding, margin, gap, width, height, border-radius, icon size
- Min touch target: 44×44px
- Border radius: pick one scale per project (
4 · 8 · 12 · 16 · 24 · 9999px) and use it consistently
UI/UX Principles
- Hierarchy — one primary CTA per view; use size + contrast + weight to signal importance
- Proximity — related elements closer together than unrelated ones
- Consistency — same component, same appearance everywhere; one icon style (outlined vs filled), never mixed
- Four states — every interactive element must handle: ideal · loading (skeleton > spinner) · empty (with actionable next step) · error (specific + recoverable)
- Accessibility — keyboard-navigable with visible focus ring;
aria-label on icon-only buttons; wrap animations in prefers-reduced-motion
- Responsive — mobile-first; fluid type/spacing with
clamp()
Motion
Focus on high-impact moments: page load with staggered reveals, surprising hover states, scroll-triggered transitions. One orchestrated entrance creates more delight than scattered micro-interactions everywhere. Use whatever motion tool fits the project — CSS animations, Framer Motion, GSAP, Three.js, etc. Match tool complexity to the aesthetic vision.
Visual Details
Add depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders. Match the effect to the tone. Do not add texture that contradicts the chosen aesthetic direction.
Never Do
- Generic AI aesthetics: Inter/Roboto/Arial, purple-on-white gradients, cookie-cutter card layouts
- Aesthetic choices that contradict the committed tone
- Converge on the same aesthetic across different designs
outline: none without a visible focus replacement- Color as the sole indicator of meaning or state
1---2name: frontend-design3description: Baseline design philosophy for distinctive, production-grade UI. Use when visual quality and aesthetic direction matter — components, pages, layouts, styling. Extends frontend skill — all frontend rules still apply.4license: MIT5---67> Read `.agents/software-principles/SKILL.md` and `.agents/frontend/SKILL.md` first.89## Design Thinking1011Before writing code, commit to a clear aesthetic direction:12131. **Purpose** — What problem does this UI solve? Who uses it?142. **Tone** — Pick one and commit: minimal · editorial · playful · brutalist · luxury · retro-futuristic · organic · industrial · soft · geometric. Intentionality over intensity.153. **Differentiation** — What is the one thing a user will remember about this UI?1617No two designs should look the same. Avoid converging on safe, predictable choices.1819## Typography2021Choose characterful, distinctive fonts — never Inter, Roboto, Arial, or system fonts as a default. Pair a display font with a refined body font. Font choice drives the entire aesthetic — treat it as the first design decision.2223## Color & Composition2425- Apply **60-30-10**: dominant (60%) · secondary (30%) · accent (10%)26- Map every color to a semantic role (background, surface, foreground, muted, primary, accent, destructive, success) — never use raw hex ad hoc27- Contrast minimum WCAG AA: normal text ≥ 4.5:1, UI components ≥ 3:128- Commit to light or dark — don't default to neutral gray29- Asymmetry, overlap, diagonal flow, grid-breaking elements over predictable grid layouts30- Generous negative space OR controlled density — pick one and execute it fully3132## Spatial Design (8-Point Grid)3334All spacing, sizing, and layout values must be **multiples of 4px**. Prefer 8px increments; use 4px only when 8px is too large. **Never use odd numbers.**3536- Applies to: padding, margin, gap, width, height, border-radius, icon size37- Min touch target: 44×44px38- Border radius: pick one scale per project (`4 · 8 · 12 · 16 · 24 · 9999px`) and use it consistently3940## UI/UX Principles4142- **Hierarchy** — one primary CTA per view; use size + contrast + weight to signal importance43- **Proximity** — related elements closer together than unrelated ones44- **Consistency** — same component, same appearance everywhere; one icon style (outlined vs filled), never mixed45- **Four states** — every interactive element must handle: ideal · loading (skeleton > spinner) · empty (with actionable next step) · error (specific + recoverable)46- **Accessibility** — keyboard-navigable with visible focus ring; `aria-label` on icon-only buttons; wrap animations in `prefers-reduced-motion`47- **Responsive** — mobile-first; fluid type/spacing with `clamp()`4849## Motion5051Focus on high-impact moments: page load with staggered reveals, surprising hover states, scroll-triggered transitions. One orchestrated entrance creates more delight than scattered micro-interactions everywhere. Use whatever motion tool fits the project — CSS animations, Framer Motion, GSAP, Three.js, etc. Match tool complexity to the aesthetic vision.5253## Visual Details5455Add depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders. Match the effect to the tone. Do not add texture that contradicts the chosen aesthetic direction.5657## Never Do5859- Generic AI aesthetics: Inter/Roboto/Arial, purple-on-white gradients, cookie-cutter card layouts60- Aesthetic choices that contradict the committed tone61- Converge on the same aesthetic across different designs62- `outline: none` without a visible focus replacement63- Color as the sole indicator of meaning or state
hilmifawwazsaad