UI Design & Development Skills

Hero-section pipeline for building Awwwards/FWA-tier hero sections. Extracts design direction from reference images, provides six hero architectures with implementation blueprints, and enforces the fundamentals that separate award-winning heroes from generic AI output - viewport-scale typography, single focal point, extreme whitespace, tight palette. Hero-only. Pair with other skills for full pages.

Motion design pipeline for building Awwwards/Apple-tier animations, micro-interactions, scroll sequences, page transitions, and kinetic typography. Enforces the principles that separate award-winning motion from generic CSS transitions - intentional easing, scroll-linked choreography, staggered reveals, magnetic interactions, text splitting, parallax depth, morphing state transitions, and the invisible micro-animations that make interfaces feel alive. Every animation must justify its existence, respect reduced-motion, and run at 60fps. Motion is choreography, not decoration.

Below-the-fold landing page sections pipeline. Companion to awwwards-hero. Covers feature showcases, social proof, pricing, process/how-it-works, case studies, stats/metrics, CTA banners, FAQs, footers, and visual break sections. Enforces the same Awwwards/FWA-tier quality gates - no generic 3-card grids, no icon+heading+paragraph repeats, no stock photography, no AI-purple gradients. Each section has named architectures with CSS blueprints, a page-level sequencing system, and a final composition diff.

Premium brand-kit image generation skill for producing identity-studio-grade brand boards. Fires when the user asks for brand kits, logo concepts, identity systems, brand-system presentations, or brand-guidelines decks. Enforces an 8-phase pipeline - Visual Reference Acquisition (Phase 0), Brand Strategy, Identity Architecture, Panel Composition, Prompt Engineering, Visual Diff, Panel Surgery (Phase 6), Logo Originality Gate (Phase 7) - with quality gates at every phase. Phase 0 asks for a visual reference image and auto-generates a REFERENCE INSTRUCTION block that extracts texture, layout, and color DNA while blocking name/logo/palette cloning. Phase 6 enables single-panel regeneration and Figma compositing when individual panels fail. Phase 7 forces a geometry-difference audit between the generated mark and the reference image's symbol. 14 visual modes (including 4 reference-calibrated modes trained against Polished Snow, Nexus, Lumora, Thesis, and NORI studio work), 6 board layouts (including Mega System for 18-21 panels), logo hard constraints (3-primitive cap, favicon gate, one-sentence geometry rule), 25-point pre-flight checklist, detailed mockup specs (website hero, social media profile, app icon dock, physical products), and aggressive anti-slop protocol. Image generation only. Does not write code.

Elite frontend image-direction skill for generating premium, conversion-aware website design reference images via ChatGPT image generation.

Surgical aesthetic upgrade pipeline for existing React codebases. Takes ugly, functional code (Bootstrap defaults, generic Tailwind, amateur CSS) and transforms it to Awwwards-tier quality WITHOUT touching or breaking the underlying JavaScript logic - states, effects, API calls, event handlers, routing, and data flow are sacred and untouchable. Audits the existing code across 7 layers (tokens, typography, spacing, color, components, atmosphere, motion), classifies every element as Sacred (JS logic - do not touch) or Slop (visual cruft - upgrade), then executes precise CSS-only surgery layer by layer. The skill that turns a developer's "make this look better" into a controlled, non-destructive visual transformation.