web-design

name	web-design
description	Route web design, motion, WebGL, and visual-styling requests into the narrowest matching sub-skill of the 79-skill MengTo/Skills web-design family — Style/Design-System Packs, Full-Site Quality & Direction, Motion & Scroll Systems, WebGL/3D Backgrounds & Shaders, Library Embeds & Integrations, Component & State Effects, and CSS Technique Primitives. Use when picking and fetching the right visual recipe for a marketing site, landing page, portfolio, or dashboard shell, then combining layers in direction → layout → background → motion → component-state → polish order. Triggers on: web design, landing page, awwwards, GSAP, Lenis, scroll animation, WebGL background, shader, glass UI, dark mode design system, editorial layout, cursor trail, progressive blur, gradient border, three.js background, vanta, globe.gl, unicorn studio, marketing site polish.
allowed-tools	Bash Read Write Edit Glob Grep WebFetch
compatibility	Best for browser front-ends (HTML/CSS/Tailwind/React/Next.js) where the task is choosing and fetching the correct upstream MengTo/Skills web-design sub-skill. Not for design-token governance, component API design, accessibility audits, or game runtimes — route those out.
license	MIT
metadata	{"tags":"web-design, motion, webgl, gsap, threejs, css, landing-page, skill-routing, skill-pack, mengto-skills","version":"1.0","source":"https://github.com/MengTo/Skills/tree/main/agent-skills/web-design"}

Web Design

Use this skill when the real question is "which upstream web-design recipe should own this visual task, and how do I get it installed?"

This is a routing pack, not a reimplementation. The 79 real sub-skills live upstream at MengTo/Skills · agent-skills/web-design. The job here is to:

1. classify the request into one of seven families,
2. pick the single narrowest sub-skill in that family,
3. fetch it locally if it is not already installed,
4. sequence multi-family work in the documented order, and
5. route out to this repo's system/architecture/accessibility skills when they are the real owner.

The seven families

Family	Count	Route here when the request is about
Style/Design-System Packs	23	A whole brand or site aesthetic — background, hero, nav, cards, and type together ("dark glass dashboard", "clean beige SaaS", "bright-green technical system")
Full-Site Quality & Direction	10	A page/site-level brief or a bar to clear ("Awwwards-quality", pricing page, enterprise AI product page, service booking site)
Motion & Scroll Systems	10	Scroll behavior, reveal timing, pinning, choreography, scroll progress
WebGL/3D Backgrounds & Shaders	8	A real-time rendered background or hero object not tied to one named package (grid, laser, particle field, faceted 3D object)
Library Embeds & Integrations	10	A named third-party library or package — GSAP, Three.js, Tailwind, Matter.js, globe.gl, cobe, Vanta.js, Unicorn Studio, Shaders
Component & State Effects	4	One component's interactive states — hover, loading, focus, selected, pressed
CSS Technique Primitives	14	A single small reusable CSS/SVG technique or decorative detail (gradient border, alpha mask, progressive blur, corner cuts, shadows, icons)

The full 79-row table with a real "use when" per sub-skill is in references/skill-catalog.md. Family-selection rules, the narrowest-match rule, and the combining rules are in references/family-routing.md.

When to use this skill

• The task is designing or upgrading the visual layer of a marketing site, landing page, portfolio, editorial page, or dashboard shell