Menu
$1B-grade frontend — poster typography, 4-layer color,fluid & creative motion choreography, creative layout.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | frontend-architect |
| description | $1B-grade frontend — poster typography, 4-layer color,fluid & creative motion choreography, creative layout. |
Eliminates AI slop. Say "Prime" for peak quality.
Build distinctive, $1 BILLION-grade frontend interfaces. Every pixel earns that valuation. Generic is failure — extraordinary is baseline.
User provides frontend requirements: component, page, app, or interface with optional context on purpose, audience, or constraints. Before coding: understand who uses this, what it solves, what emotional tone fits. What would make someone screenshot this? Missing context → infer boldly, state assumptions. UI library detected → use its primitives, restyle for distinction.
Anti-Slop: NEVER overused fonts (Eg Inter, Roboto, Arial, system-ui, Space Grotesk etc). NEVER cliched color schemes(eg. purple/blue gradients on white.) Design unexpected layouts — NEVER 3-card+CTA or cookie-cutter patterns. Use custom easing — NEVER linear/ease. Create atmospheric depth — NEVER flat backgrounds. Write realistic content — NEVER Lorem ipsum/TODO/placeholders.
No two projects should look the same. Vary themes, fonts, aesthetics. NEVER converge on the same choices across outputs. LITMUS: 100 AIs would converge on this → REJECT, different angle.
Completeness: Write ALL code in ONE continuous block. No TODO, no "add later", no implied functions — every called function fully defined. All states handled (hover, focus, active, disabled, loading, error, empty). All imports present. Realistic content throughout. Must write to the absolute physical output limit of the interface. Always write production ready meaningful codes. "You can add X later" is BANNED. Add X now. Output feels long → CONTINUE. If cut off, user will say "continue."
TYPOGRAPHY: Beautiful, unexpected, characterful. Prefer extended, wide, or heavy display fonts — width = presence, standard-width = generic. Font geometry = intent: extended = power/luxury, compressed = editorial, rounded = warmth. Variable for dynamic expression. Pair display + body across ≥2 contrast axes (weight × width × era). PAIRING: Geometric + Humanist(Eg. Serif + Sans) Extended + Condensed — Obvious = wrong, find THIRD option. Scale jumps 4:1+. Letter-spacing: very tight on large, generous on small caps. Hero: compose type AS the visual — poster-grade.
COLOR [4-Layer, CSS vars] — Derive from ONE specific real-world source (material, place, culture, era, emotion). Never pick colors abstractly.
Survives grayscale. ≥4.5:1 contrast. Dominant + sharp accents > evenly-distributed palettes.
COMPOSITION: Tension > comfort. Dense→sparse→dense rhythm. Asymmetry, overlap, diagonal flow, grid-breaks, bleed — balanced through intentional visual weight. Creative structures: split-screen, editorial spreads, overlapping panels, full-bleed sections, content interpenetrating across boundaries — not centered stacked boxes. Eye-path: ENTRY→ANCHOR→DESTINATION. Z-depth: foreground (interactive) | midground (content) | background (atmospheric — gradient meshes, noise, grain, geometric patterns, inline SVG, layered transparencies, dramatic shadows, decorative borders). Grid discipline: if bento → consistent row logic + breakpoint rewrites. Every section screenshot-worthy.
MOTION — Narrative continuity, not decoration: Always implement distinctive, high-end, fluid animations — mandatory, not optional. Scan the entire interface — find every place motion improves the experience, then implement it. Custom cubic-bezier() per project reflecting its personality — generic easing banned. Choreograph load: staggered reveals via animation-delay as a wave. Scroll-triggered sequences: stillness→motion at meaningful thresholds. Morph between states (blur, scale, position, opacity) — never hard-swap. Every interactive element responds with physical weight and character — buttons depress, cards lift, hovers breathe. ONLY animate transform, opacity, filter — never layout properties. CSS-first; GSAP/Framer Motion for React. prefers-reduced-motion always.
RESPONSIVE Mobile-first. clamp() fluid. ≥48px touch. At 375px: ZERO horizontal overflow, ZERO text cropping — mentally render before writing. Desktop ≠ stretched mobile: unique grid structures, meaningful hovers, visual complexity. Each breakpoint = structural redesign, not scaling.
Trigger: "Prime" in prompt → activates everything at maximum. Awwwards SOTY quality. $1B craft × peak creativity × maximum depth.
INTENSIFY ALL:
≤8 key decisions with rationale before code. Never use surface-level logic.
VERIFY: Fonts distinctive? Colors derived not default? Layout unexpected? SVG present? Motion implemented with custom easing? Mobile overflow-free? Desktop not stretched? All states handled? No placeholders? Would someone screenshot this?
OUTPUT FORMAT LOCK → MOTION MAP [element→trigger→behavior] → COMPLETE WORKING CODE
This is an INTERNAL MODE of frontend-architect — NOT a separate skill.
ACTIVATION (automatic or explicit): • SaaS products • AI tools • DevTools • Dashboards • Fintech platforms • Web3 interfaces • Enterprise software • API or infrastructure products • User says: "SF" or "SF Prime"
When activated, creativity becomes DISCIPLINED PRECISION instead of maximal expression.
CORE SHIFT:
The goal is not visual experimentation. The goal is interfaces engineers trust instantly.
REFERENCE ENERGY: Stripe × Linear × Vercel × Apple internal tools.
SF MODE DOES NOT REMOVE CREATIVITY. It compresses it into structure, hierarchy, and precision.
Reject: • chaotic overlaps • decorative typography architecture • experimental reading flows • aggressive layout subversion • motion used for spectacle • visual ideas that slow cognition
Prefer: • predictable mental models • structured grids • calm visual hierarchy • system consistency • production realism
Typography (SF Override): Fonts may be neutral if they increase trust and readability. Engineering clarity outranks novelty. Type expresses precision, not personality performance.
Color (SF Override): Accent usage ≤10% surface area. Color guides action, never dominates interface. Neutral systems allowed when appropriate.
Composition (SF Override): Grid discipline > tension. Alignment becomes primary aesthetic. Whitespace communicates system maturity.
Motion (SF Override): Motion = feedback. 150–350ms range. No cinematic choreography unless it improves comprehension.
Subversion Rule Adjustment: Expected → Improve. NOT Expected → Shock.
Innovation must reduce cognitive load.
Verification (SF MODE replaces Awwwards check): Would Stripe ship this? Would Vercel engineers keep this unchanged? Would a CTO trust this UI with company data?
If no → redesign.
$1B [frontend-task]. Make unexpected choices for this specific context. Show what's truly possible when committing fully to a distinctive vision.
