From awwwards
Elite frontend orchestrator — slams the full design stack together for Awwwards-tier, blow-my-mind UI work. Use when the user asks for an elite/premium/showcase/standout/hero/jaw-dropping/portfolio-grade/award-worthy frontend, a landing page that has to wow, a client demo that needs to land, a brand site, a marketing hero, a creative coding piece, an interactive showcase, a Remotion video composition, or any single-shot HTML/React artifact where the bar is craft, not just function. Composes frontend-design + impeccable + ui-ux-pro-max + design-motion-principles + color-expert + color-palette-extractor + agent-browser + remotion-best-practices, plus the proven runtime stack of Framer Motion + anime.js + Three.js + 21st.dev component patterns via the Magic MCP. Triggers on phrases like 'elite', 'blow my mind', 'Awwwards', 'absolutely insane', 'go all out', 'showcase', 'something special', 'don't hold back', 'jaw-dropping', 'wow factor', 'premium feel', 'hero piece', 'pitch deck slide', 'creative coding', and on any request to build a brand site, landing hero, portfolio, demo reel, or interactive artifact where craft outranks shipping speed. NOT for utilitarian admin UI, internal CRUD dashboards, or quick patches — use frontend-design or impeccable alone for those.
How this skill is triggered — by the user, by Claude, or both
Slash command
/awwwards:awwwards [brief — what you're building and the vibe][brief — what you're building and the vibe]The summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are about to build something elite. The bar is **Awwwards-tier craft** — the page someone screenshots and shares, not the page that just works. This skill orchestrates the full Switchyard frontend stack into one disciplined pipeline.
You are about to build something elite. The bar is Awwwards-tier craft — the page someone screenshots and shares, not the page that just works. This skill orchestrates the full Switchyard frontend stack into one disciplined pipeline.
Do not treat this as a checklist to race through. Each phase is load-bearing. Skipping the brief = generic. Skipping the colour pass = wrong palette. Skipping verification = "works on my machine" delivered to a paying client.
The skill description handles the trigger. Inside the skill, your job is to commit to the bar and run the pipeline.
If the request is genuinely utilitarian (internal admin, CRUD form, bug fix), STOP and tell the user this skill is overkill — point them at frontend-design or impeccable instead. Don't burn an elite pipeline on a settings page.
| Phase | Skill / Tool | What it produces |
|---|---|---|
| 1. Brief | (this skill) | Aesthetic direction, register, success criteria |
| 2. Palette | color-palette-extractor OR color-expert | OKLCH tokens, named roles, commitment level |
| 3. Inspiration | ui-ux-pro-max:ui-ux-pro-max + mcp__magic__21st_magic_component_inspiration | Reference components, patterns, anti-patterns |
| 4. Composition | frontend-design | Bold, committed layout with a clear conceptual direction |
| 5. Motion calibration | design-motion-principles | Three-lens decision: restraint / polish / play |
| 6. Implementation | (this skill, see Architecture below) | Working code with Framer Motion + anime.js + Three.js + 21st.dev pieces |
| 7. Video (if applicable) | remotion-best-practices | Remotion composition, captions, hero loops |
| 8. Polish & audit | impeccable | Restraint pass, hierarchy, edge cases, accessibility |
| 9. Verification | agent-browser | Real-browser screenshot, viewport sweep, interaction test |
Hard rule: Phases 1, 2, 4, 6, 8, 9 are mandatory for any elite build. Phase 3 is mandatory if you don't already have a strong reference in mind. Phase 5 is mandatory the moment you add a single transition. Phase 7 fires only for video deliverables.
Before opening an editor, lock the brief. Either elicit from the user or commit to your own answers and surface them for sign-off:
Write these into a short brief and confirm with the user before phase 2. If ~/CLAUDE.md or a project-level PRODUCT.md exists for the active project (e.g. Switchyard Web's Railyard aesthetic), the brief inherits from it — don't reinvent.
Branch A — the design is for a real client / existing brand:
color-palette-extractor against the client's live site via headless browser screenshot. Never invent "tasteful guess" colours for a paying client.Branch B — original creative piece:
color-expert to invent a palette. Pick a commitment level explicitly (the impeccable taxonomy):
Both branches: Output OKLCH values, not hex. Never #000 or #fff — tint every neutral toward the brand hue (chroma 0.005–0.01). Reduce chroma as lightness approaches 0 or 100.
Save the resulting tokens as CSS variables (--bg, --ink, --accent, etc.) and reuse them everywhere. No hardcoded duplicates.
When sourcing component patterns:
ui-ux-pro-max:ui-ux-pro-max — load the design intelligence library. Pull the relevant style (glassmorphism / brutalism / bento / etc.), the matching font pairing, the UX guidelines for the component type, and the chart stack if data viz is involved.mcp__magic__21st_magic_component_inspiration — search for the specific component type ("hero with 3D object", "velocity marquee", "bento grid", "audit pin tooltip"). Pull 2–4 references.mcp__magic__21st_magic_component_builder — when you find a 21st.dev pattern that fits exactly, generate the component code through Magic instead of rewriting from scratch.mcp__magic__logo_search — if real brand logos are needed (testimonials, integration grid), pull them properly. Never fake logos.Inspiration is a starting point, not a destination. Always remix; never copy 1:1.
Invoke frontend-design's principles for the overall composition:
NEVER produce AI-generic output: purple gradients on white, generic fonts, predictable layouts, cookie-cutter components.
Invoke design-motion-principles and pick a lens:
Pick one lens per surface and commit. Mixing lenses inside one section reads as indecision.
There are three architecture branches. Pick before writing a line.
The Switchyard signature for showcase pages, demos, client pitches, internal artifacts. Loads in seconds, no toolchain, zero deployment friction. Reference: reference/architecture-single-html.md.
Key moves:
react, react-dom, framer-motion, three, htm, animejs from esm.shhtm tagged templatesWhen the build is going into ~/switchyard/web or another deployed app. Use vercel:nextjs, vercel:shadcn, vercel:next-cache-components for the platform layer. Still apply phases 1–5 from this skill before coding.
For motion graphics, brand intros, demo reels. Hand off to remotion-best-practices for the composition rules, then return here for the audio + delivery pass via switchyard-video.
| Tool | Use for |
|---|---|
| Framer Motion | React component motion, layout transitions, useScroll/useVelocity/useTransform/useSpring/useMotionValue/useAnimationFrame. Velocity-driven marquees. Mouse-tilt 3D cards. Layout choreography. |
| anime.js | Specific effects — number counters (count-up via easing: 'easeOutCubic'), text scramble, stagger pulses, SVG path morphs. |
| Three.js | Hero 3D objects. Use MeshPhysicalMaterial (iridescence, clearcoat). Procedural environment maps via PMREMGenerator on a CanvasTexture gradient. Real 3D orbit text via CylinderGeometry + CanvasTexture + FrontSide (auto-culls back half). |
| CSS-only | Static decoration, hover micro-interactions, page-load stagger via animation-delay. First reach. |
Detailed patterns in reference/motion-recipes.md.
color: transparent from the parent but have no background. Fix: render gradient italics as a single motion.span, not character-split.useMotionValue/useSpring to its own component (e.g. MagneticCTA)..ps1 files for Sam's environment, use ASCII-only OR re-save with -Encoding utf8. See [[powershell-tool-quirks]] memory.style={{}} work fine even though the typings complain. style={{ '--accent': value }} is valid.Full list: reference/gotchas.md.
If the deliverable includes motion graphics:
remotion-best-practices for composition structureswitchyard-video for end-to-end production (brief → render → social cuts)Hand the finished artifact to impeccable for the final pass:
impeccable audit — restraint check, hierarchy, contrast, edge casesimpeccable shape — if a section needs structural reworkimpeccable live — for live browser iteration on specific elementsThe audit covers: visual hierarchy, cognitive load, accessibility (contrast ratios, touch target size ≥44px, focus rings, motion-meaning), responsive behavior at all viewports, error states, edge cases, copy precision.
Use agent-browser to:
Type checking and test suites verify code correctness, not feature correctness. If you can't open it in a browser, say so explicitly rather than claiming success.
~/CLAUDE.md)impeccable audit pass completeagent-browser verification at 4 viewports completeSam's ~/skills-showcase/index.html (built 2026-05-16) is the canonical reference for what "absolutely elite" means in this stack. When in doubt, mirror its choices:
useVelocity + useSpring + useTransform)That file is the standard. If the new build isn't at least that polished, it's not done.
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
npx claudepluginhub ga14ctic/awwwards-skill --plugin awwwards