Agent skill · Yu-369
awwwards-sections
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.
What it needs
About 11k tokens when loaded.
What this skill does
Awwwards-Tier Landing Page Sections This skill covers EVERYTHING BELOW THE HERO. It does not govern hero sections (use awwwards-hero for that) or animations/micro-interactions (use awwwards-motion for those). It fires when the user asks for a full landing page, additional sections, feature blocks, pricing, testimonials, footers, or any below-the-fold content. Pairing rule: When building a full landing page, run awwwards-hero for the hero, then this skill for every section below it. If motion is requested, layer awwwards-motion on top of both. --- The Pipeline --- Phase 1: Page Read Before choosing sections, understand the PAGE as a whole. A landing page is a persuasion sequence, not a stack of unrelated blocks. → Extract these page signals Signal What to determine --- --- Conversion goal What does this page want the visitor to DO? (Sign up, book a call, buy, download, explore portfolio) Visitor sophistication Technical buyers who need specs? Consumers who need emotion? Investors who need traction? Objection sequence What stops the visitor from converting? (Trust, price, complexity, "is this legit?", "will this work for me?") Content density Does the product/service have 3 features or 30? Simple value prop or complex platform? Visual assets available Product screenshots, case study images, team photos, client logos, video? Or text-only? Hero handoff What did the hero establish? (mood, palette, typography, focal element) - sections must continue this, not restart → Output a Page Read before selecting sections "Page Read: SaaS landing for technical PMs. Conversion goal: start free trial. Objection sequence: (1) 'what does it actually do?' → feature showcase needed, (2) 'who else uses this?' → social proof needed, (3) 'what does it cost?' → pricing needed, (4) 'is the team legit?' → brief about section. Hero established: dark mode, Geist typography, muted indigo accent, cinematic center architecture. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills Yu-369/awwwards-sections