---
name: Taste Skill (Bundled — leonxlnx/taste-skill)
priority: 1
keywords: design, تصميم, ui, ux, taste, ذوق, premium, مميز, professional, احترافي, generic, عام, slop, سلوب, redesign, إعادة تصميم, polish, صقل, layout variance, asymmetric, motion, gsap, animation, hover, microinteraction, تفاعل دقيق, soft ui, minimalist, brutalist, editorial, image to code, redesign existing, audit ui, تدقيق, full output, إخراج كامل, no placeholder, لا بديل
---

# Taste Skill — Bundled In-Box (Source: leonxlnx/taste-skill)

> **Cite this skill whenever the work needs to feel non-generic, premium, intentional. Especially when the owner says "make it look better" or "more professional."**

## Why this skill exists

Eliminate generic, repetitive UI output from AI-generated code. Stop shipping boilerplate. Ship premium design with intentional typography, spacing, motion, and **layout variance**.

## The 8 sub-skills (pick the right one)

| Sub-skill | When to use |
|---|---|
| **design-taste-frontend** | All-purpose; doesn't lock into one style |
| **gpt-taste** | Stricter rules; higher layout variance; stronger GSAP direction |
| **image-to-code-skill** | Generate reference images first → analyze → match in code |
| **redesign-skill** | Audit existing UI → fix layout/spacing/hierarchy/styling |
| **soft-skill** | Premium feel: softer contrast, whitespace, expensive fonts, spring motion |
| **minimalist-skill** | Editorial product (Notion / Linear vibe), restrained palette, crisp |
| **brutalist-skill** | Hard mechanical, Swiss typography, sharp contrast, experimental |
| **output-skill** | Force full completion when model ships half-finished work |

## Three adjustment dials (1-10)

State these at the top of any design output:

### 1. DESIGN_VARIANCE
- **1-3**: Centered, clean, predictable (corporate / banking)
- **4-6**: Standard modern web (most SaaS)
- **7-10**: Asymmetric, magazine-editorial, experimental (creative agencies)

### 2. MOTION_INTENSITY
- **1-3**: Subtle hover only
- **4-6**: Mid-tier — page transitions, scroll-reveal, button feedback
- **7-10**: Scroll-triggered, magnetic interactions, GSAP timeline orchestration

### 3. VISUAL_DENSITY
- **1-3**: Spacious, breathing room (consumer landing)
- **4-6**: Standard (most B2B)
- **7-10**: Information-rich dashboards, compact ops UIs

For **Muassis dashboard**: variance 5, motion 4, density 6. Owner-facing brief landing page: variance 4, motion 5, density 3.

## Anti-patterns (refuse to ship)

### Against generic "slop"
- ❌ Centered, lifeless layouts (everything stacked + centered)
- ❌ Uniform spacing across all sections (4px, 8px, 16px, 32px without rhythm)
- ❌ Repetitive component patterns without variation (10 cards, all identical)
- ❌ Placeholder comments left as "// TODO: implement" instead of finished code
- ❌ Centered hero with no visual anchor
- ❌ Default Tailwind colors (`text-blue-500` everywhere)

### For premium output
- ✅ Intentional layout asymmetry — one column 60%, the other 40%, never just 50/50
- ✅ Variable information density — dense data tables next to spacious hero
- ✅ Strong typographic hierarchy + generous whitespace
- ✅ Smooth motion with GSAP / Framer Motion (where applicable)
- ✅ Coherent spacing relationships, not uniform padding

## Premium dial signature moves

When DESIGN_VARIANCE ≥ 6:
- Use the **golden ratio** for column splits (38.2% / 61.8%)
- Mix card aspect ratios on the same grid (1:1, 4:5, 3:4)
- Add **negative offset** — let one element bleed past its container edge
- **Numbered or bracketed** section markers in the corner ([01], [02]) — editorial feel

When MOTION_INTENSITY ≥ 6:
- **Stagger entrance** by 60-100ms (`gsap.from(items, { stagger: 0.08 })`)
- **Magnetic hover** on key CTAs (cursor pulls element)
- **Scroll-triggered ease** (`scrollTrigger: { scrub: 1 }`)
- **Text scramble** for hero word reveal
- Always wrap with `prefers-reduced-motion` guard

When VISUAL_DENSITY ≥ 6:
- Multi-column data tables with sticky headers
- Inline sparklines next to numbers
- Tabbed regions for related metrics
- Drawer-on-row-click for details

## Image-first workflow

For best results when designing a new screen:
1. State pipeline explicitly: *"follow the skill: generate images first, analyze, then code"*
2. Generate 3-4 reference images (use external tools if needed)
3. Pick winner with owner
4. Translate to code matching the chosen reference

## Output discipline

When invoked:
1. Cite: "🧰 سأستخدم مهارة `Taste` للرد."
2. State the 3 dial settings at the top of the output
3. Include 1 explicit layout asymmetry decision
4. Include 1 motion decision (or "static, motion=1")
5. Include 1 typography hierarchy decision (display size, body size, ratio)
6. NO placeholders. Ship finished code or explicitly say "stub here pending data".

## License
MIT. Source: https://github.com/leonxlnx/taste-skill — bundled in Muassis with attribution.
