frontend-godSAFE

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: frontend-god
description: "Senior Frontend & Design Engineer skill for React 19, Next.js & Vite. Crafts non-AI-slop interfaces, B2B cockpit high-density dashboards, Tailwind CSS v4 (@theme) & shadcn/ui integrations, compound components, optical iconography, spring motion, container queries, section choreography, and 27-point delivery gate polish."
allowed-tools: Read Write Edit Glob Grep
---

# frontend-god

> **Senior Frontend & Design Engineer Skill (Staff Level)**  
> Transforms AI coding agents into world-class design engineers. Eliminates generic "AI Slop" by enforcing intentional aesthetic archetypes, composable React architecture, Tailwind CSS v4 & v3 token mastery, headless primitives (shadcn/ui & Base UI), optical iconography, tactile motion, extreme text restraint, single-accent color discipline, asymmetric section layout choreography, and forensic benchmarks from the world's 10 highest-craft software companies: **Linear, Vercel, Stripe, Resend, Cursor, Mercury, Ramp, Attio, PostHog, and Anthropic**.

---

## When to Activate This Skill

Activate this skill whenever:
- Designing, building, or refactoring user interfaces, web applications, or landing pages in **React** or **Next.js**.
- Creating reusable UI components, design systems, or component libraries.
- Integrating or customizing **shadcn/ui** or **@base-ui-components/react (Base UI)**.
- Structuring landing page sections, bento grids, and feature placement choreography.
- Implementing layouts, animations (Framer Motion / Motion), or dark/light theming.
- Auditing existing frontend code to eliminate AI slop, layout shift, or accessibility issues.

---

## Style Signature Selection Protocol

Before writing any markup, align with one of the 11 Gold Standard Style Signatures (or let the product's brand dictate it). **Once chosen, DO NOT MIX styles**:

| Style Signature | Benchmark Identity | Key Visual Formula |
| :--- | :--- | :--- |
| **Linear (Orbiter)** | High-precision dev tool, calm dark | `#08090a` canvas, `#5e6ad2` accent, hairline moonlight borders (`rgba(255,255,255,0.07)`), Inter `cv01/ss03` weight 510, Geist Mono. |
| **Vercel (Geist)** | Compiler-grade monochrome restraint | `#000000` canvas, `#ffffff` ink, shadow-as-border (`0 0 0 1px rgba(255,255,255,0.08)`), blueprint gridlines, Geist tracking `-2.4px`. |
| **Stripe (Söhne)** | Fintech authority & twilight depth | Deep navy `#0a2540` canvas, blurple `#635bff` accent, lightweight display headlines (300–400), multi-layer twilight shadows. |
| **Resend (Domaine)** | Pure black speed & "One Loud Element" | Pure black `#000000`, Domaine Display serif headline, green `#00c16a` status dot, whisper-quiet micro controls. |
| **Cursor (Warm)** | Warm minimalism & real code editor | Warm paper `#f7f7f4`, dark ink `#26251e`, Cursor Orange `#f54e00`, Waldenburg Gothic, real code editor hero above fold. |
| **Mercury (Luxury)** | Warm luxury editorial fintech | Cream `#d7c3af` canvas, bespoke 480 weight, 1.625 leading, calm software-first tables. |
| **Ramp & Attio (CRM)** | Soft dark & high-density data tables | Soft slate `#0c0e12`, 36px high-density tables, hairline semi-transparent borders. |
| **PostHog (Product)** | Real interactive telemetry above fold | Dense interactive charts embedded directly in hero section, sharp retro-modern badges. |
| **Anthropic (Editorial)** | Intellectual research & safety | Slate Ink `#141413` and Ivory Cream `#faf9f5` full-bleed band alternation, Instrument Serif 80px display, generous whitespace. |
| **Raycast (Desktop)** | Keyboard-first desktop instrument | Blue-black `#07080a`, Raycast Red `#ff6363` accent, inset glass highlights (`box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06)`), ⌘K action panel. |
| **Pear.vc (Editorial)** | Consumer & Editorial showcase, humanis | Light canvas `#ffffff` / `#fafaf9`, monochrome partner strip, massive `content-box` cards with ambient soft gradient tints (yellow, purple, blue, green), center photography, text $\le 12$ words. |

📖 *Deep dive: [09-gold-standard-style-signatures.md](./references/09-gold-standard-style-signatures.md)*

---

## The Golden Commandments of Frontend God

Every interface and component built under this skill MUST obey these non-negotiable rules:

### 1. Aesthetic Direction First (Zero AI Slop)
Never write JSX without first declaring or inheriting an **Aesthetic Archetype** (Technical Precision, Editorial Modern, Warm Minimalist, or Neo-Craftsman). Reject generic AI tells:
- ❌ **FORBIDDEN**: Random blue-purple gradients, generic cyan radial hero glows, pill buttons on every single element, 3 identical cards in a row.
- ✅ **REQUIRED**: Intentional color palette (60-30-10 rule), Surface Layering (`surface-0`, `surface-1`, `surface-2`), and high-contrast intentional borders (`border-border/40`).
- 📖 *Deep dive: [01-design-taste-archetypes.md](./references/01-design-taste-archetypes.md)*

### 2. The Anchor Cadence (Break Visual Monotony)
In any grid or dashboard section, **never render identical copy-paste cards**.
- One item MUST serve as the **Anchor** (e.g., larger aspect ratio, primary metric focus, or distinct background treatment).
- Secondary items must have subordinate hierarchy. Vary rhythm, height, or density deliberately.
- 📖 *Deep dive: [01-design-taste-archetypes.md](./references/01-design-taste-archetypes.md#2-the-anchor-cadence-rule-break-visual-monotony)*

### 3. Composable Architecture & Semantic Tokens (OKLCH Strictness)
- Build components using **Compound Components** (`<Card.Header>`, `<Card.Title>`), polymorphic rendering via `asChild` (Radix Slot) or render props, and type-safe variants with **Class Variance Authority (`cva`)**.
- **Zero Hardcoded Colors & OKLCH Semantic Discipline**: Never write arbitrary hardcoded colors like `bg-blue-600`, `bg-[#1c1c1a]`, or `bg-[#ffffff]`. All colors must route through semantic CSS tokens (`bg-primary`, `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, `border-border`) backed by native

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (1)

Gates applied: no_behavioural_pass, no_license.