frontend▌

23 performance optimization rules for React and Vite across build, code splitting, development, assets, environment, and bundle analysis. \n \n Covers six rule categories prioritized by impact: build optimization and code splitting (critical), development and asset handling (high), environment config and bundle analysis (medium) \n Includes route-based lazy loading with React.lazy() and Suspense, manual vendor chunk separation, and strategic prefetching patterns \n Provides recommended vite.conf

Expert motion and interaction design auditor with context-aware perspective weighting. \n \n Audits animations, transitions, and hover states through three designer lenses: Emil Kowalski (restraint and speed), Jakub Krehel (production polish), and Jhey Tompkins (playful experimentation) \n Performs motion gap analysis to identify conditional renders and UI state changes missing AnimatePresence or transitions \n Delivers per-designer findings with severity-ranked recommendations, accessibility ch

Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.

Pixel-perfect HTML to PDF conversion with automatic RTL and Hebrew language support. \n \n Renders using Chrome headless engine with full CSS3/HTML5 support, including Flexbox, Grid, custom fonts, and JavaScript execution \n Automatic right-to-left direction detection for Hebrew, Arabic, and other RTL languages; includes --rtl flag for forced RTL mode \n Configurable page formats (A4, Letter, Legal, A3, A5), orientation, margins, scale, and optional headers/footers \n Requires one-time npm setup

Audit and upgrade existing websites to premium design standards without breaking functionality. \n \n Provides a comprehensive design audit checklist covering typography, color, layout, interactivity, content, components, and iconography to identify generic AI patterns and weak points \n Works with any CSS framework (Tailwind, vanilla CSS, styled-components) or tech stack by scanning and improving existing code rather than rewriting from scratch \n Includes strategic upgrade techniques for typog

Craft-focused design philosophy for building interfaces where every detail compounds into something that feels right. \n \n Covers animation decision framework (frequency, purpose, easing, duration) with custom cubic-bezier curves and performance rules for UI interactions \n Includes component patterns: button press feedback, origin-aware popovers, tooltip delays, blur masking, and clip-path reveals \n Provides gesture and drag principles: momentum-based dismissal, boundary damping, and friction

Game UI design expertise grounded in Nintendo clarity, diegetic immersion, and esports readability principles. \n \n Covers HUD design, menu architecture, diegetic interfaces, and adaptive layouts across 4K displays, handheld screens, and input methods (controller, keyboard, touch) \n Emphasizes controller-first navigation, safe zones for TV viewing, and animation as communication rather than decoration \n Prioritizes accessibility as a core feature, not an afterthought, with guidance on readabi

Complete SEO setup for Next.js 16+ apps with metadata, sitemaps, robots.txt, and Core Web Vitals guidance. \n \n Covers essential files (root metadata, dynamic sitemaps, robots configuration) with ready-to-use TypeScript examples for App Router \n Includes rendering strategy comparison (SSG, SSR, ISR, CSR) and Core Web Vitals targets (LCP, INP, CLS) for performance optimization \n Provides quick audit checklist, common mistakes to avoid, and dynamic metadata patterns for product pages and canoni

Comprehensive Next.js development guidelines covering file structure, RSC patterns, data fetching, optimization, and error handling. \n \n Covers 15+ topic areas including file conventions, route segments, RSC boundaries, async patterns, metadata generation, and image/font optimization \n Provides runtime selection guidance, directive usage, and error handling strategies with specific file conventions like error.tsx and not-found.tsx \n Includes data fetching patterns, route handler best practic

Behavioral guidelines to reduce common LLM coding mistakes through explicit assumptions, simplicity, and verifiable success criteria. \n \n Emphasizes surfacing assumptions and tradeoffs upfront rather than making silent decisions or hiding confusion \n Advocates for minimum viable code with no speculative features, abstractions, or error handling beyond what was requested \n Requires surgical, focused edits that touch only what's necessary and match existing code style without improving adjacen