Profile My skills Saved Collections Edit profile Submit a skill

← all publishers

yu-369

@yu-369 source repo

6 published skills

  1. ▌
    Awwwards Hero Section · yu-369
    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.
    0
    installs
  2. ▌
    Pixel Perfect Replication · yu-369
    Image-to-code replication pipeline. When the user provides a screenshot or design reference, this skill runs a structured extraction across seven layers (grid, type, color, spacing, components, atmosphere, interaction), builds an Extraction Sheet before any code is written, implements with exact fidelity to the reference, and verifies through inline Quality Gates and a final Visual Diff. The reference image is the spec. The code is a translation, not an interpretation.
    0
    installs
  3. ▌
    Awwwards Motion Design · yu-369
    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.
    0
    installs
  4. ▌
    Visual Redesign · yu-369
    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.
    0
    installs
  5. ▌
    Awwwards Sections · yu-369
    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.
    0
    installs
  6. ▌
    Imagegen Frontend Web · yu-369
    Elite frontend image-direction skill for generating premium, conversion-aware website design reference images via ChatGPT image generation. Fires when the user asks to generate website mockups, landing page concepts, section design references, or UI comp images. Enforces ONE separate horizontal image PER section, composition variety (bans the default left-text/right-image on every section), background-image freedom, varied CTAs, varied hero scales, narrative concept spine, second-read moments, and a single consistent palette across all images. Outputs structured prompt blueprints that produce Awwwards-tier visual references a developer or coding model can accurately recreate. Image generation only - does not write code.
    0
    installs