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.
Instrucciones de origen · Vista previa de solo lectura
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.
pick the single narrowest sub-skill in that family,
fetch it locally if it is not already installed,
sequence multi-family work in the documented order, and
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)
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 background, progressive blur,
scroll-pinned section) and you need the recipe that already encodes it
The request names a library (GSAP, Three.js, Vanta, globe.gl, Unicorn Studio) and you need
the integration/cleanup patterns rather than improvised setup code
Several visual layers must be combined for one page and you need a safe application order
The upstream sub-skill needed for the task is not installed yet
When not to use this skill
The task is adopting a ready-made animated React component library rather than authoring the
effect yourself → use react-bits
The task is generating design evidence — real app screenshots, competitor references, UI
critique input → use lazyweb
The task is design-token governance, theming contracts, or system-wide consistency rules →
use design-system
The task is breakpoint strategy, page-shell adaptation, or container-query classification →
use responsive-design
The task is React render/bundle/data-fetching performance, not visual styling →
use react-best-practices
The task is an accessibility audit, WCAG conformance, or assistive-technology behavior →
use web-accessibility
The task is interactive 3D that is gameplay (cameras, enemies, combat, encounters) →
use web-game-development
The task is generating 2D pixel-art sprite sheets → use perfectpixel
Use references/family-routing.md §1. Match the shape of the
request, not a keyword. If a request straddles two families, route by primary intent — a
question about a component's state semantics is Component & State Effects even when it ships
as a named package; a question about wiring a library up is Library Embeds & Integrations.
Step 2: Pick the single narrowest sub-skill
Use references/skill-catalog.md and name one sub-skill. Prefer
the specific recipe over a broader neighbor: "fade the bottom edge of this image" is
css-alpha-masking, not a whole style pack.
scripts/fetch-upstream-skills.sh sparse-checkouts only agent-skills/web-design from
https://github.com/MengTo/Skills.git and copies the requested folder(s) into
${SKILLS_ROOT:-$HOME/.agents/skills} without deleting anything already there.
Direction / style pack — fixes color, type, and structural rules
Layout — grids, containers, split layouts
Background / 3D — WebGL, shader, or particle layer sized against final layout
Motion — scroll and reveal systems once DOM structure is stable
Component states — hover/loading/selected/focus on real components
Polish — CSS Technique Primitives as the final additive pass
Step 6: Report the route
State the family, the chosen sub-skill, whether it was already installed or fetched, any
additional families being combined and why, and any route-out you took instead.
Examples
"Make our landing page feel like an Awwwards site — dark, glassy, with a laser background
and scroll reveals."
→ Full-Site Quality & Direction (build-awwwards-quality-sites) for direction, then
Style/Design-System Packs (dark-glass-clean-layout) for the surface system, then
WebGL/3D Backgrounds & Shaders (webgl-laser) for the background, then Motion & Scroll
Systems (animation-on-scroll) last. Applied in that order per §5.
"Add a fade at the bottom of this hero image."
→ CSS Technique Primitives, single sub-skill css-alpha-masking. Do not pull in a style pack.
"Set up Vanta.js on our Next.js hero and make sure it cleans up on route change."
→ Library Embeds & Integrations, vantajs. The request is library wiring and lifecycle
cleanup, not a visual direction choice.
"Our design tokens are inconsistent across three apps."
→ Route out to design-system. This pack styles pages; it does not govern tokens.
Best practices
Name one sub-skill before writing any code — improvising a shader or scroll system when
a matching recipe exists is the failure mode this pack prevents.
Combine across families only when the request genuinely spans layers — most requests are
one sub-skill.
Respect the application order — motion wired before layout is final will re-measure
against stale element boundaries.
Never stack two sub-skills that solve the same problem (two word-reveal recipes, two
scroll listeners); pick the narrowest match per section.
Keep the upstream SKILL.md authoritative — fetch the folder whole rather than
paraphrasing its instructions here.
Route out early — token governance, component APIs, breakpoints, and accessibility are
owned by other skills in this repo, and answering them here produces confident wrong advice.
