# Frontend Taste Engineer

> Use before generating new UI/frontend code — components, landing pages, dashboards — to override the model's default drift toward generic, templated-looking interfaces. Applies measurable dials (layout variance, motion intensity, visual density) and a banned-pattern list instead of vague taste calls. Trigger on "make this look premium/distinctive", "avoid generic AI UI", or any fresh component/page generation.

- Skill: `presidenteog/frontend-taste-engineer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add presidenteog/frontend-taste-engineer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/presidenteog/frontend-taste-engineer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: PresidenteOG (https://skillmd.com/u/presidenteog)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/presidenteog/frontend-taste-engineer

---


# Frontend Taste Engineer

*Adapted from https://raw.githubusercontent.com/ai-boost/awesome-prompts/main/prompts/frontend_taste_engineer.txt (ai-boost/awesome-prompts, GPL-3.0) — rewritten, not copied.*

## Overview
Left to its defaults, an LLM converges on the same UI every time: centered hero, three equal cards, Inter, a purple glow, "John Doe" in a circle avatar. This skill is a set of dials and hard bans applied *while generating* — it changes what gets written, not what gets flagged after the fact.

## Which skill, when
| Situation | Use |
|---|---|
| Writing new UI/components right now | **this skill** — intervenes at generation time |
| UI already exists, looks visually off, needs targeted fixes | `refactoring-ui` |
| UI already exists, needs a structured UX audit (flows, trust, consistency) | `ui-ux-pro-max` |
| Setting overall aesthetic direction or mood before building | `frontend-design` |

These compose: use `frontend-design` to pick a direction, this skill to generate without drifting generic, then `refactoring-ui` or `ui-ux-pro-max` to audit afterward.

## The three dials
Set once per project at the default below; override anytime the user asks for something different.

| Dial | 1 | Default | 10 |
|---|---|---|---|
| Layout variance | perfectly symmetric grid | **8** | asymmetric, masonry, fractional columns |
| Motion intensity | static, hover/active only | **6** | scroll-choreographed, spring physics throughout |
| Visual density | gallery-airy | **4** | cockpit-dense, monospace data, no card boxes |

Don't ask the user to tune this file directly — read their prompt for explicit overrides and apply the default otherwise.

## Hard bans (regardless of dial settings)
- **Typography**: no Inter for anything "premium" or "creative" — pick a font with actual character (Geist, Outfit, Cabinet Grotesk, Satoshi). No oversized shouting H1 — carry hierarchy with weight and color, not just size. Serif only in editorial contexts, never on dashboards.
- **Color**: no pure black — use a near-black instead. One accent color maximum, desaturated below 80%. The "AI purple/blue glow" look is banned outright — a neutral base (zinc/slate) plus one high-contrast accent replaces it.
- **Layout**: no centered hero text over a dimmed background image; no three-equal-cards-in-a-row feature section (use a zig-zag, an asymmetric grid, or a scroll strip instead).
- **Fake content**: no "John Doe"/"Sarah Chan" placeholder names, no generic circle-avatar icons, no suspiciously round numbers (`99.9%`, `50%`) — favor organic-looking data (`47.2%`). No "Acme"/"Nexus" placeholder brand names. No copywriting filler ("Elevate," "Seamless," "Unleash").
- **Motion mechanics**: animate `transform`/`opacity` only, never `top`/`left`/`width`/`height`. Nothing meant to feel premium should ease linearly — use spring physics instead. No custom cursors.

## Required states
Every interactive surface ships four states, not just the happy path: loading (a skeleton matched to the real layout, not a generic spinner), empty (tells the user how to populate it), error (inline, next to the field it concerns), and tactile pressed feedback (a small translate or scale-down on press, not just a color change).

## Density-specific rule
At visual density 7 and above, drop card containers in favor of dividers or negative space — boxing every metric in its own card reads as templated, not as a dashboard.

## Pre-flight check
Before finishing generation, check: the layout collapses to a single column on mobile regardless of desktop variance; full-height sections use a viewport unit that doesn't jump on mobile Safari; every animation loop is isolated so it can't force parent re-renders; loading, empty, and error states all exist.

Note: this skill is deliberately opinionated — the bans are the point, not a suggestion to soften. Where the user explicitly asks for a banned pattern, honor the request and drop the ban for that one instance.