web-taste

Files (7)

• AGENTS.md
• SKILL.md
• metadata.json
• code-examples.md · references/
• web-design-dna.md · references/
• generate_palette.py · scripts/
• verify_palette.py · scripts/

SKILL.md (first lines)

# Web Taste

Taste doesn't start at the pixel level. It starts at "who is this
person and what do they need?" The visual refinement is the LAST step.
The first step is understanding the user's world deeply enough that
the interface design feels inevitable — like it couldn't have been
designed any other way.

Your default mode skips straight to layout. It produces technically
correct React that looks generic because it was never grounded in
a real person's needs — a stack of cards, a sidebar, a settings list.
This skill changes the order of operations: think like a designer
first, then write code.

## Phase 0: The 0.5-Second Test (ORIENT before everything)

Before designing anything, answer ONE question:

> **What does the user SEE in the first half-second — before they
> read a single word?**

This is not about content. It's about the SHAPE of the screen.
Close your eyes and picture it. What dominates?

- A **single hero number** with a sparkline? → Analytics / metric dashboard
- A **gradient card** with bold white text? → Status / billing / hero page
- A **table with sticky chrome** and a search bar? → Data console / admin
- A **grid of media cards**? → Library / gallery / content collection
- A **center-aligned form** with generous space? → Sign-up / auth / single-action
- A **two-pane list + detail**? → Email / inbox / CRM
- A **timeline of events**? → Activity feed / audit log

If your answer is "a sidebar and some cards in a content area" →
STOP. That's a CMS theme, not a product. Go back and find the
visual shape that matches what this user actually needs.

Write the 0.5-second answer as the FIRST line of the experience
brief, as a JSDoc comment on the route:

```tsx
// 0.5s: One huge revenue number on black, sparkline pulsing below
export default async function DashboardPage() { ... }
```

This single sentence anchors every decision that follows. If the
code you write doesn't produce that shape, something went wrong.

## Phase 1: Design Thinking (Before You Touch React)

Before writing a single line of JSX, answer these questions. Write
the answers down as comments or in your thinking. If you skip this
phase, your output will look like every other AI-generated UI —
correct but soulless.

### 1. Who is the user?

Not "a SaaS admin." A real person with a context:

- What moment are they in when they open this page? (Triaging the
  morning's alerts? Sharing a link in a meeting? Reviewing the
  quarter before a board call?)
- What did they just do before arriving here? (Clicked a notification
  email? Searched? Followed a deep link from Slack?)
- What do they want to accomplish in under 10 seconds?

This shapes EVERYTHING. A user pasted into the page via a Slack
deep-link needs a giant headline that reorients them. A user with
the page open all day wants quiet chrome and big working space. A
user evaluating during a demo wants the value proposition to be
visible without scrolling.

### 2. What should they FEEL?

This is the question that separates designed products from CRUD
admin panels. Linear doesn't show you a kanban — it makes shipping
feel like an obsession. Stripe doesn't show you payment forms — it
makes commerce feel like a solved problem. Every design choice
serves that emotional goal.

Before choosing components, decide the emotional intent:

- **Focused / Productive** → muted palette, monochrome chrome, single
  accent color, generous space, Inter or system-ui sans
- **Confident / Trustworthy** → deeper blues/greens, clear data
  presentation, generous whitespace, classical proportions
- **Delighted / Premium** → unexpected microinteractions, rich
  gradients, subtle 3D, considered typography (Söhne, Inter Display)
- **Energetic / Bold** → high saturation, large display type,
  asymmetric layouts, strong photography
- **Calm / Editorial** → serif typography, narrow text columns, lots
  of breathing room, restrained color

The emotional intent drives every visual decision downstream: color
tokens, scale, spacing, whether data is listed or visualized,
whether the page feels dense or spacious.

### 3. What are their goals and pain points?

For each page, identify:

- **Primary goal** — the ONE thing most users come here to do
- **Secondary goals** — things some users occasionally need
- **Pain points** — what frustrates users in this domain?

A billing page: the primary goal isn't "see all billing info." It's
"change the payment method that just expired" or "download last
month's invoice for expense reports." The pain point is wading
through plan summaries and feature comparisons to find the one
action that needs doing.

### 4. What features serve those goals?

Map goals to features. Not "what features could this page have?"
but "what's the minimum set of features that makes the primary goal
effortless?" Every feature that doesn't serve a goal is clutter.

Group features by priority:

- **Must-have** — blocks the primary goal without it

From pproenca/dot-skills, MIT.

More from pproenca/dot-skills