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](https://github.com/MengTo/Skills/tree/main/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](references/skill-catalog.md). Family-selection rules, the
narrowest-match rule, and the combining rules are in
[references/family-routing.md](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
- You need to choose between two or more upstream web-design sub-skills and are not sure
  which one is narrowest
- The request names a specific effect (cursor trail, laser ba