Distinctive, production-grade frontend interfaces that reject generic AI aesthetics through intentional design choices. Guides aesthetic direction selection (brutalist, maximalist, retro-futuristic, luxury, organic, etc.) before implementation to ensure cohesive, memorable designs Emphasizes typography, color theming with CSS variables, motion design, spatial composition, and textural details as core design pillars Generates working code (HTML/CSS/JS, React, Vue) that matches implementation complexity to the aesthetic vision, from refined minimalism to elaborate maximalism Explicitly avoids overused fonts, clichéd color schemes, and predictable layouts that characterize generic AI-generated interfaces

React and Next.js performance optimization across 70 rules prioritized by impact. Organized into 8 categories from critical (eliminating waterfalls, bundle optimization) to low priority (advanced patterns), each with specific, actionable rules prefixed for easy reference Covers server-side performance including React.cache() deduplication, parallel fetching, and serialization minimization Addresses client-side concerns: re-render optimization through memoization and dependency management, rendering performance with CSS strategies and hydration patterns Includes JavaScript-level optimizations like DOM batching, caching, and Set/Map lookups for O(1) performance Each rule includes detailed explanations, incorrect and correct code examples, and contextual guidance for automated refactoring and code generation

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

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