High-Agency Frontend Skill

Concise, distinctive landing pages and portfolios that avoid templated AI aesthetics.

- Reads the design brief first to infer the right aesthetic direction (SaaS minimalist, agency experimental, premium consumer, etc.) before touching code, preventing default AI patterns

- Configures three core dials-design variance, motion intensity, and visual density-that drive layout, animation, and spacing decisions throughout the page

- Enforces strict anti-patterns: bans em-dashes, generic serif fonts, beige+brass premium palettes, three-equal-feature-cards, and other LLM tells; audits every visible string for AI hallucination

- Implements real design systems (Material, Carbon, Fluent, Polaris, Primer, GOV.UK) when applicable; otherwise builds with Tailwind, Motion, and GSAP for custom aesthetics

- Requires a mandatory pre-flight checklist covering contrast, button wrapping, hero fit, color consistency, motion justification, and 50+ other production-readiness gates before shipping

High-Agency Frontend Skill

1. ACTIVE BASELINE CONFIGURATION

- DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)

- MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)

- VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

2. DEFAULT ARCHITECTURE & CONVENTIONS

Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency: