Frontend & Design

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

AI-powered mobile app design tool with REST API for creating projects, describing designs in plain language, and rendering screens. Supports high-level requests ("design a fitness app") and specific edits ("add a pricing section to this screen"); send natural language descriptions via chat messages and let the AI decide what to create or modify Requires Pro+ plan and API key with scoped permissions ( projects:read/write , chats:read/write , screenshots , components:read ) Async and sync modes available; async returns immediately with a run ID for polling, sync blocks up to 300 seconds Always screenshot newly created or updated screens after each chat run and deliver them to the user; combine all project screens into one screenshot when screens are created for the first time One active run per project at a time; retry failed requests safely using idempotency keys

Create and edit Lark Office slides with XML protocol, supporting presentation creation, page management, and content modification. Supports three creation workflows: one-step creation for simple slides, two-step creation (empty presentation + page-by-page addition) for complex content, and block-level editing of existing pages without reordering Handles slide operations including create, read, delete, and replace at both presentation and individual page levels; automatically parses /slides/ and /wiki/ URLs to extract presentation tokens Requires planning layer (slide_plan.json) before XML generation for new presentations or major rewrites; includes visual planning (layout_type, visual_focus, text_density) and asset planning with fallback strategies Enforces strict XML validation: text must use <content><p>...</p></content> , images require uploaded file_tokens (no external URLs), and all complex content undergoes post-creation verification against validation checklist Provides template search, summarization, and extraction via template_tool.py to avoid boilerplate; prioritizes user identity ( --as user ) for personal content operations

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI. Manages the full component lifecycle: search registries, add components, view docs, preview changes with --dry-run and --diff , and intelligently merge upstream updates while preserving local modifications Enforces critical rules across forms (FieldGroup, Field, InputGroup, validation states), composition (Groups, overlays, Card structure), styling (semantic colors, gap spacing, size shorthand), and icons (data-icon attributes) Supports multiple registries (@shadcn, @magicui, @tailark, community presets) and provides component selection guidance via a reference table covering buttons, forms, overlays, navigation, charts, and layouts Injects project context automatically including aliases, framework, base library (radix vs base), icon library, Tailwind version, and resolved paths to ensure correct imports and APIs

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

Frontend design and iteration for production-grade interfaces, from concept to ship. Covers full-surface design (landing pages, dashboards, product UI, components) and targeted refinement (typography, color, layout, motion, copy, accessibility, responsive behavior) Includes 20+ commands for building ( craft , shape ), evaluating ( critique , audit ), refining ( polish , bolder , quieter ), and enhancing ( animate , colorize , typeset ) Enforces production standards: contrast verification, semantic z-index, reduced-motion support, no overflow, battle-tested responsive behavior, and explicit anti-patterns (side-stripe borders, gradient text, glassmorphism as default) Integrates with project context (PRODUCT.md, DESIGN.md, existing tokens) to preserve brand identity and avoid cross-project monoculture; includes palette generation for new projects and live browser iteration mode

Premium design system enforcing high-end agency aesthetics with strict anti-patterns and motion choreography. Bans generic fonts (Inter, Roboto, Helvetica) and default icons in favor of premium typefaces (Geist, Clash Display) and ultra-light icon sets (Phosphor Light) Enforces nested "Double-Bezel" card architecture, massive whitespace ( py-24 – py-40 ), and custom cubic-bezier motion curves instead of linear transitions Includes three vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and three layout patterns (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) to ensure design variance across outputs Mandates mobile-first responsive collapse below 768px , GPU-safe animations (transform/opacity only), and staggered scroll-reveal entry animations via IntersectionObserver

Audit and upgrade existing websites to premium design standards without breaking functionality. Provides a comprehensive design audit checklist covering typography, color, layout, interactivity, content, components, and iconography to identify generic AI patterns and weak points Works with any CSS framework (Tailwind, vanilla CSS, styled-components) or tech stack by scanning and improving existing code rather than rewriting from scratch Includes strategic upgrade techniques for typography animation, asymmetric layouts, motion design, and surface effects to replace cliche patterns with high-end alternatives Prioritizes fixes by visual impact: font swaps, color cleanup, interactive states, layout refinement, component replacement, and state design in sequence

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules. Covers eight rule categories prioritized by impact: list performance (FlashList, memoization, callback stability), animations (GPU properties, derived values), navigation, UI patterns, state management, rendering, monorepo structure, and configuration List performance rules address critical concerns like virtualizing large lists, optimizing images, and avoiding inline objects that trigger unnecessary re-renders Animation guidance focuses on GPU-accelerated properties (transform, opacity) and Reanimated patterns; navigation recommends native stack and tab navigators over JavaScript alternatives Includes rules for modern UI patterns: expo-image for all images, Pressable over TouchableOpacity, native modals, and safe area handling in ScrollViews

Premium utilitarian minimalism with warm monochrome palette, editorial typography, and bento grids. Enforces strict design constraints: no gradients, heavy shadows, or generic SaaS aesthetics; bans common fonts (Inter, Roboto) and icon libraries (Lucide, Feather) in favor of curated alternatives Typographic hierarchy built on serif headings with tight tracking, geometric sans-serif body text, and monospace for code; off-black text on warm bone backgrounds for editorial feel Color palette limited to warm monochrome with ultra-desaturated pastel accents; all borders and dividers use a single 1px solid #EAEAEA rule for consistency Component specs cover bento grids, flat buttons with micro-interactions, pill-shaped badges, keystroke UI, and faux-OS window chrome; motion via fade-in and hover lifts only, no spectacle Imagery directive: monochromatic line illustrations, desaturated photography with warm grain overlays, and subtle ambient gradients at low opacity to add depth without breaking minimalism

Install and wire reusable blocks and components into HyperFrames compositions via the registry. Blocks are standalone sub-compositions with their own dimensions and timeline; components are effect snippets pasted directly into host compositions Install via hyperframes add <name> with options for custom directories, JSON output, and clipboard control Blocks require wiring through data-composition-src and attributes like data-composition-id , data-start , data-duration , and data-track-index Components require manual merging of HTML elements, CSS styles, and JavaScript into the host composition Install paths and registry source are configurable in hyperframes.json

Raw mechanical interfaces fusing Swiss typography with military terminal aesthetics for data-heavy dashboards. Choose one visual archetype per project: Swiss Industrial Print (light mode, heavy sans-serif, red accents) or Tactical Telemetry (dark mode, monospace, phosphor glow effects) Typographic system demands extreme scale contrast between macro-typography (massive uppercase headers with tight tracking) and micro-typography (small monospace data with generous spacing) Layout enforces visible compartmentalization via CSS Grid with solid borders, 90-degree corners only, and oscillation between extreme data density and vast negative space Includes analog degradation effects: halftone dithering, CRT scanlines, mechanical noise overlays, and ASCII framing devices to simulate declassified blueprints

Generates premium, anti-generic design system files for Google Stitch screen generation. Produces DESIGN.md files that encode visual atmosphere, color calibration, typography rules, component behaviors, layout principles, and motion philosophy in Stitch's native semantic language Enforces strict anti-slop standards: bans generic fonts (Inter, Times New Roman), neon aesthetics, overlapping elements, centered Hero sections, and AI copywriting clichés Includes detailed component styling (buttons, cards, inputs, loaders, empty states) with interaction behaviors and spring-physics motion specs Provides mobile-first responsive rules, asymmetric layout patterns, and explicit anti-pattern lists to guide Stitch's AI in generating distinctive, high-agency interfaces

Elite UX/UI &amp; Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial…