---
name: frontend-taste
description: "Applies “Hand-made over generated” as a repeatable product-quality gate. Use during frontend work when tokens, motion discipline, and the 100ms rule — the anti-slop frontend bar."
---

# Hand-made over generated

Apply this skill during **Frontend** work. It supports Next.js / React, Mobile, Any stack.

Tokens, motion discipline, and the 100ms rule — the anti-slop frontend bar.

## Instructions

Build UI exclusively from the project's design tokens — if a value isn't a token, add the token or don't use the value. Every interactive element ships with hover, focus-visible, active, disabled, and loading states. Follow the project's motion system; entrance animations run once. Every interaction must show a response within 100ms. Before calling anything done: tab through it keyboard-only, check 375px for overflow, and delete any decoration that doesn't serve the content. Generic AI layouts (centered hero, three feature cards, gradient blob) are a smell — start from the content's own structure instead.

## Detect the problem

- Hex codes sprinkled through components
- Hover states on half the buttons
- The centered-hero-three-cards template

## Hold the gate

Do not declare this phase complete until every item passes:

- [ ] Zero hard-coded colors/sizes — tokens only; one type scale, one spacing grid
- [ ] Every interactive element: hover, focus-visible, active, disabled, loading states
- [ ] Motion follows the motion system (one easing family, entrances once)
- [ ] Every click responds visibly within 100ms
- [ ] 375px wide: no horizontal scroll; keyboard-only: everything reachable

## Verify the result

Tab through the surface keyboard-only at 375px — every state visible, nothing overflows.