taste-skill-frontend-design

What this skill does

```markdown
---
name: taste-skill-frontend-design
description: Gives AI coding agents premium frontend design taste — stops generic, boring, template-looking UI by enforcing modern layouts, typography, motion, and visual quality.
triggers:
  - make my UI look better
  - improve the design of my frontend
  - stop generating generic looking interfaces
  - give my app premium design quality
  - redesign this component with good taste
  - make this look modern and polished
  - apply good design principles to my code
  - fix the boring slop UI my AI keeps generating
---

# Taste Skill

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A collection of `SKILL.md` files you drop into your project to give AI coding agents (Cursor, Claude Code, Codex, etc.) strong frontend design taste. Instead of producing generic, template-looking UI, the AI will produce modern, premium interfaces with proper typography, spacing, motion, and visual hierarchy.

---

## What It Does

Taste Skill is not a library or framework — it's a set of instruction files your AI reads and follows. Each skill file teaches the AI a specific design philosophy:

| Skill | Purpose |
|---|---|
| `taste-skill` | Core design skill: layout, typography, color, spacing, motion |
| `redesign-skill` | Audits and upgrades existing projects |
| `soft-skill` | Premium/luxury feel: fonts, whitespace, spring animations, depth |
| `output-skill` | Prevents lazy output: no placeholders, no skipped blocks |
| `minimalist-skill` | Notion/Linear-style editorial UI: monochrome, serif contrast, bento grids |

---

## Installation

### Step 1: Copy the skill file into your project

```bash
# Clone the repo
git clone https://github.com/Leonxlnx/taste-skill.git

# Copy the skill you want into your project root
cp taste-skill/SKILL.md ./SKILL.md

# Or for a specific skill
cp taste-skill/redesign-skill/SKILL.md ./SKILL.md
cp taste-skill/soft-skill/SKILL.md ./SKILL.md
cp taste-skill/minimalist-skill/SKILL.md ./SKILL.md
cp taste-skill/output-skill/SKILL.md ./SKILL.md
```

You can also copy multiple skills and reference them by name:

```
project/
├── SKILL.md              ← main taste-skill
├── REDESIGN_SKILL.md     ← redesign-skill
├── OUTPUT_SKILL.md       ← output-skill
└── src/
```

### Step 2: Reference the skill in your AI tool

**Cursor:**
```
@SKILL.md redesign this hero section
```

**Claude Code:**
```
Read SKILL.md and follow it. Now redesign the landing page hero.
```

**Codex / any agent:**
```
Follow the rules in SKILL.md. Rewrite src/components/Hero.tsx.
```

That's it. No installs, no config files, no dependencies.

---

## Configuration (taste-skill only)

Open `SKILL.md` and edit the three settings at the top of the file:

```
DESIGN_VARIANCE: 7
MOTION_INTENSITY: 5
VISUAL_DENSITY: 3
```

### DESIGN_VARIANCE (1–10)
Controls how experimental and asymmetric the layout is.

| Range | Effect |
|---|---|
| 1–3 | Clean, centered, standard grids |
| 4–7 | Overlapping elements, varied sizes, modern structure |
| 8–10 | Asymmetric, extreme whitespace, editorial/avant-garde |

### MOTION_INTENSITY (1–10)
Controls how much animation is added.

| Range | Effect |
|---|---|
| 1–3 | Almost none — simple hover effects only |
| 4–7 | Fade-ins, smooth scroll, subtle entrance animations |
| 8–10 | Magnetic cursor, spring physics, scroll-triggered reveals |

### VISUAL_DENSITY (1–10)
Controls how much content appears per screen.

| Range | Effect |
|---|---|
| 1–3 | Spacious luxury feel — one element at a time |
| 4–7 | Normal app/website spacing |
| 8–10 | Dense dashboards, data-heavy interfaces |

**Example config for a luxury SaaS landing page:**
```
DESIGN_VARIANCE: 8
MOTION_INTENSITY: 6
VISUAL_DENSITY: 2
```

**Example config for a data dashboard:**
```
DESIGN_VARIANCE: 3
MOTION_INTENSITY: 2
VISUAL_DENSITY: 9
```

---

## Skill-by-Skill Usage

### taste-skill (main)

Use this when building new UI from scratch.

```
@SKILL.md Build a pricing section for a SaaS product called "Volta".
Use DESIGN_VARIANCE: 7, MOTION_INTENSITY: 5, VISUAL_DENSITY: 3.
```

What the AI will produce (React/Tailwind example):

```tsx
// The AI will write something like this instead of a generic table
export function PricingSection() {
  return (
    <section className="py-32 px-6 bg-neutral-950">
      <div className="max-w-5xl mx-auto">
        <p className="text-xs uppercase tracking-widest text-neutral-500 mb-4">
          Pricing
        </p>
        <h2 className="text-6xl font-semibold text-white leading-[1.05] mb-20">
          Simple,<br />honest pricing.
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-800">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className="bg-neutral-950 p-10 flex flex-col gap-8 hover:bg-neutral-900 transition-colors duration-300"
            >
              <div>
                <p className="text-neutral-400 text-sm mb-1">{plan.name}</p>
                <p className="text-5xl font-semibold text-white">${plan.price}</p>
                <p className="text-neutral-500 text-sm mt-1">/month</p>
              </div>
              <ul className="flex flex-col gap-3 flex-1">
                {plan.features.map((f) => (
                  <li key={f} className="text-neutral-300 text-sm flex items-start gap-2">
                    <span className="text-emerald-400 mt-0.5">↗</span>
                    {f}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3 border border-neutral-700 text-white text-sm hover:bg-white hover:text-black transition-all duration-200">
                Get started
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

---

### redesign-skill

Use this when you have existing code that looks bad and want the AI to audit and fix it.

```
@REDESIGN_SKILL.md Here is my current Dashboard.tsx. Audit it and fix the biggest design problems.
```

The AI will:
1. Identify the worst visual issues (generic colors, poor spacing, bad typography)
2. Prioritize fixes by visual impact
3. Rewrite the component with improvements applied

---

### soft-skill

Use this when you want a premium, expensive-feeling UI.

```
@SOFT_SKILL.md Build a hero section for a luxury skincare brand.
```

What soft-skill enforces:
- Premium fonts (e.g. `font-['Playfair_Display']`, `font-['Inter']`)
- Massive breathing whitespace (`py-48`, `gap-24`)
- Layered card depth (`shadow-2xl`, `backdrop-blur`)
- Spring-based animations (Framer Motion `type: "spring"`)
- Floating navigation bars
- **Bans:** default blue buttons, generic sans-serif, card borders without depth

```tsx
// soft-skill will push the AI to write motion like this
import { motion } from "framer-motion"

<motion.div
  initial={{ opacity: 0, y: 40 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ type: "spring", stiffness: 60, damping: 20, delay: 0.2 }}
  className="text-8xl font-['Playfair_Display'] leading-none tracking-tight"
>
  Effortless<br />beauty.
</motion.div>
```

---

### minimalist-skill

Use this for Notion/Linear-style editorial interfaces.

```
@MINIMALIST_SKILL.md Build a project management dashboard in Notion/Linear style.
```

What minimalist-skill enforces:
- Warm monochrome palette (`#1a1a1a`, `#f5f0eb`, `#e8e3dd`)
- Typographic contrast: serif headings + clean sans body
- Massive whitespace
- Flat bento grid layouts
- Hairline borders (`border border-stone-200`)
- Muted pastel accents only
- **Bans:** gradients, heavy shadows, generic SaaS card patterns, colorful CTAs

```tsx
// minimalist-skill output example
<div className="min-h-screen bg-[#f5f0eb] font-['Inter']">
  <div className="max-w-4xl mx-auto py-24 px-8">
    <h1 className="font-['Playfair_Display'] text-5xl text-[#1a1a1a] mb-2 leading-tight">
      Your projects
    </h1>
    <p className="text-[#8a8070] text-sm mb-16">3 active · Last updated today</p>

    <div classNam