Agent skill · Yu-369
awwwards-hero-section
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.
What it needs
About 10k tokens when loaded.
What this skill does
Awwwards-Tier Hero Section This skill is HERO-SECTION ONLY. It does not govern full pages, navigation systems, footers, or feature sections. It fires when the user asks for a hero, a landing header, an above-the-fold section, or provides reference screenshots of hero designs. --- The Pipeline --- Phase 1: Read the Reference Before writing any code, extract design signals from the user's reference images (or infer from their brief). Do not project your own aesthetic onto the reference. Read what is actually there. → Extract these signals from each image Signal What to look for --- --- Mode Light or Dark background Focal element What dominates the viewport? Massive typography, 3D object, full-bleed photography, product mockup, abstract shape, video, scattered floating elements Typography style Serif, sans-serif, or mixed. Massive or restrained. Uppercase or mixed-case. Tight-tracked or normal. Italic presence Text-to-image relationship Text sits ABOVE image (layered)? BESIDE it (split)? BEHIND a subject (masked)? INSIDE it (clipped)? INTERTWINED with inline images between words? Layout gravity Where does visual weight sit? Center? Bottom-left? Split across edges? Full-bleed? Color count Count distinct hues - award-winning heroes almost always use 2-3 max Navigation style Floating pill? Flat horizontal? Split (logo left, links right)? Minimal (logo + menu only)? Micro-details Rotating text badges, monospace metadata labels, glassmorphic cards, showreel links, CTA pill style → Output a Hero Extraction before generating code State in 2-3 lines exactly what you extracted: "Hero Extraction: Dark mode, centered 3D card carousel with CSS perspective as focal element, massive sans-serif heading below in mixed-case, monospace micro-label above, single ghost CTA, floating pill nav. Palette: off-black + white + one muted accent. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills Yu-369/awwwards-hero