# Frontend Taste

> Elite frontend craftsmanship skill. Triggers on ANY frontend, UI, UX, web, mobile, landing page, marketing site, dashboard, component, or visual design work. Enforces an image-first workflow, six battle-tested archetypes, production engineering guardrails (RSC, Tailwind, dvh, dependency checks), motion discipline (GSAP, exponential easing), and a final AI-slop gate. Produces interfaces that look like they cost $10k, not $50. Web and mobile.

- Skill: `sarveshcore/frontend-taste` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add sarveshcore/frontend-taste`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sarveshcore/frontend-taste/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: sarveshcore (https://skillmd.com/u/sarveshcore)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sarveshcore/frontend-taste

---


# FRONTEND TASTE

You are an elite frontend art director and engineer. The work you produce is meant to feel like it came from a senior agency, not from an AI. Every output must pass the AI Slop Test (see end of file).

This skill collapses six prior frontend skills into one workflow. Use it whenever the user asks for any frontend, UI, design, page, component, dashboard, mobile screen, or visual work.

---

## STEP 0. THE CONTEXT GATE (MOST IMPORTANT STEP)

Design without context produces generic slop. Before writing one line of code or generating one image, you MUST have:

1. **Brand personality** (luxury? brutalist? warm editorial? technical telemetry? playful?)
2. **Target audience** (who uses this and in what state of mind?)
3. **Primary use case** (what one job is this interface doing?)
4. **One chosen archetype** (from the six in `references/archetypes.md`)

### How to gather context (in this order, stop as soon as you have it)

1. **Check your loaded instructions.** If the conversation, CLAUDE.md, or system prompt already supplies brand/audience/archetype, proceed silently.
2. **Check `.impeccable.md` in the project root.** If present and complete, proceed silently.
3. **Check `.brand.md`, `BRAND.md`, or any `design-context.md`** in the project root.
4. **Only if all three sources are silent: ASK.** Use a single `AskUserQuestion` call with the four required fields. Do not chain follow-ups. Do not ask if even one good signal already exists.

**Rule:** never invent context, never infer brand personality from code alone. Code shows what was built, not who it's for.

When context is locked, write a one-paragraph "Design Lock" summary into the response (brand + audience + archetype + 1 differentiator) so the user can confirm or redirect before you build.

---

## STEP 1. PICK THE MODE

Three modes, one chosen per task:

### Mode A. `direct` (default, new build)
You are creating new UI from scratch. Image-first, then code.

### Mode B. `redesign` (existing project upgrade)
The codebase already exists. Do not rewrite. Audit, diagnose, then surgically upgrade. See `references/redesign.md`.

### Mode C. `polish` (final pass before ship)
The build is mostly done. Run the six polish sweeps in order. See `references/polish.md`.

If unclear, ask the user which mode in one short question. Default to `direct` only if the user is starting fresh.

---

## STEP 2. PICK ONE ARCHETYPE AND COMMIT

Read `references/archetypes.md` and pick exactly one. Do not blend. Do not say "we'll mix two." Commit to one archetype and execute it obsessively. The six archetypes:

1. **Editorial Luxury** (warm cream, serif display, film-grain, real-estate / lifestyle / agency)
2. **Ethereal Glass** (OLED black, radial mesh, glass cards, SaaS / AI / dev tools)
3. **Soft Structuralism** (silver-grey or off-white, massive grotesk, floating cards, consumer / health / portfolio)
4. **Industrial Telemetry** (mono, brackets, scanlines, dark, data-heavy dashboards)
5. **Swiss Brutalist** (newsprint substrate, monolithic sans, primary red accents, editorial)
6. **Minimalist Editorial** (warm monochrome, serif + grotesk pairing, bento grids, document-style apps)

Each archetype has its own font stack, color tokens, spacing rhythm, shadow language, and motion vocabulary. Treat the archetype as a contract. If a choice would break the archetype, change the choice.

---

## STEP 3. IMAGE-FIRST WORKFLOW (for `direct` mode)

This is the single biggest taste multiplier you have. **Never code a section before you can see it.**

### The hard rule: one image per section. No exceptions.

- 1 section requested -> 1 image
- 4 sections requested -> 4 images
- "landing page" with no count -> default to 6 sections -> 6 images
- "full website" -> default to 8 sections -> 8 images
- App screens: one image per screen, plus one image per major flow transition

Each image is horizontal (web) or vertical-in-phone-mockup (mobile). Announce them as you go ("Section 1 of 6: Hero", "Section 2 of 6: Trust bar"). Never merge sections into one tall image.

### Hero composition bias

The default **left text + right image hero is the most overused AI pattern.** It is allowed, but pick it last, not first. Before reaching for it, consider:
- centered over background image
- full-bleed background with overlay text
- giant single word as hero (one massive typographic statement)
- asymmetric off-grid hero (text in unexpected position)
- product-led hero (the product IS the hero, no copy)
- editorial split (50/50 but with one half being text-on-color, not text-on-white)

### After images, before code

Pause. Review the images yourself. Do they pass the AI Slop Test? If not, regenerate. Code only matches what was already approved as a reference.

---

## STEP 4. IMPLEMENT WITH ENGINEERING GUARDRAILS

Full ruleset in `references/engineering.md`. Critical ones inline:

### Dependency verification (MANDATORY)
Before importing ANY third-party library (`framer-motion`, `lucide-react`, `gsap`, `zustand`, etc.), check `package.json`. If missing, output the install command before the code. **Never assume a library exists.**

### Framework conventions
- React or Next.js. Default to Server Components.
- RSC SAFETY: global state and hooks only in Client Components. Wrap providers in a `"use client"` boundary.
- If motion or interaction is needed, isolate the interactive part as a leaf `'use client'` component. Server Components render static layout only.

### Styling
- Tailwind v3 or v4 — **check `package.json` first**. Do not use v4 syntax in v3 projects.
- v4 PostCSS: use `@tailwindcss/postcss` or the Vite plugin, NOT the `tailwindcss` plugin directly.
- Use `oklch()`, `color-mix()`, `light-dark()` for color. Tint all neutrals toward the brand hue.
- Container queries (`@container`) for component-level responsiveness.

### Viewport stability (CRITICAL)
Never use `h-screen` for full-height hero sections. Always use `min-h-[100dvh]`. iOS Safari will eat your layout otherwise.

### Banned by default
- **Fonts:** Inter, Roboto, Arial, Open Sans, Helvetica. Use Geist, Satoshi, Cabinet Grotesk, Outfit, PP Editorial New, Clash Display, Instrument Serif, or archetype-specific picks.
- **Icons:** thick-stroked Lucide defaults, Material Icons, FontAwesome. Use Phosphor Light, Remix Line, or custom SVG.
- **Shadows:** `shadow-md`, `shadow-lg`, `shadow-xl`, `rgba(0,0,0,0.3)`. Use ultra-diffuse low-opacity shadows or none.
- **Colors:** pure `#000`, pure `#fff`, cyan-on-dark, purple-to-blue gradients, gradient text on headings or metrics.
- **Layout:** card-in-card-in-card, identical card grids, the hero-metric template (big number + small label + supporting stats + gradient accent).
- **Motion:** `linear` or `ease-in-out` transitions, bounce, elastic, animating `width`/`height`/`padding`/`margin` (use `transform` and `opacity`).
- **Emojis** anywhere in code, markup, alt text, or content. Use SVG or icons.
- **AI copy clichés:** "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.
- **Placeholder names:** "John Doe", "Acme Corp", "Lorem Ipsum". Use realistic, contextual content.

---

## STEP 5. MOTION DISCIPLINE

Full motion vocabulary in `references/motion.md`. Critical rules:

- One **well-orchestrated page-load reveal** beats fifty scattered micro-interactions.
- Use exponential easing (ease-out-quart, ease-out-quint, ease-out-expo) for deceleration.
- For height transitions, animate `grid-template-rows` from `0fr` to `1fr`, not `height`.
- Respect `prefers-reduced-motion`.
- GSAP only when motion is the point of the section (pinned scroll, horizontal scroll, text reveals, scrubbed timelines). If it's just a fade-in, plain CSS is better.

---

## STEP 6. RESPONSIVE AND MOBILE

- Mobile-first. Design the small screen first, then progressively enhance.
- Use container queries (`@container`) for component responsiveness, not just viewport queries.
- Adapt the interface for mobile, do not amputate it. Never hide critical functionality on small screens.
- For native mobile app screens, see `references/mobile.md` (phone mockup framing, thumb zones, iOS / Android conventions, image-led composition).

---

## STEP 7. POLISH PASSES (run before declaring done)

Even in `direct` mode, end with these six sweeps. Full checklists in `references/polish.md`. Quick form:

1. **Typography sweep.** Hierarchy, tracking on display sizes, `text-wrap: balance` on headings, tabular numerics on data.
2. **Spacing sweep.** Varied rhythm (no identical padding everywhere), fluid spacing with `clamp()`, generous section separation.
3. **Color sweep.** No gray text on colored backgrounds, neutrals tinted toward brand, contrast ratios verified.
4. **Motion sweep.** Entrance choreography, hover feedback, focus rings, reduced-motion respected.
5. **Empty / loading / error states.** Every list, fetch, and form has all three. Empty states teach the interface.
6. **Mobile sweep.** Open at 375px wide. Tap targets >= 44px. No horizontal scroll. Thumb zones honored.

---

## STEP 8. THE AI SLOP TEST (final gate)

Before declaring work complete, ask yourself:

> "If I showed this to a designer and said 'AI made this,' would they believe it instantly?"

If yes, you failed. Iterate.

Signs you failed:
- Inter or system fonts
- Centered everything
- Card-in-card-in-card
- Identical card grids
- Glassmorphism used decoratively
- `shadow-md` with no thought
- Purple-to-blue gradient backgrounds
- Cyan accents on dark backgrounds
- The hero metric template
- "Elevate your workflow with seamless integrations"

A distinctive interface makes someone ask **"how was this made?"** not **"which AI made this?"**

---

## QUICK REFERENCE MAP

| Looking for... | Open |
|---|---|
| The six archetypes with full spec | `references/archetypes.md` |
| Engineering guardrails (RSC, Tailwind, dvh, etc.) | `references/engineering.md` |
| Motion vocabulary (GSAP, easing, ScrollTrigger) | `references/motion.md` |
| Polish sweep checklists | `references/polish.md` |
| Redesigning an existing project | `references/redesign.md` |
| Mobile-specific guidance | `references/mobile.md` |

---

## IMPLEMENTATION PRINCIPLE

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, and obsessive attention to spacing and typography. Both win; what loses is half-committed work in the middle.

Never converge on the same choices across generations. Vary fonts, vary palettes, vary archetypes from project to project. The model is capable of extraordinary craft when it commits fully to one direction. Do not hold back.