SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsweb-design

web-design

Frontend & websites

View repository

Updated 10-15 19:53

About this skill

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
  • 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

Full boundary statements: references/route-outs.md.

Instructions

Step 1: Classify the request into one family

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.

Step 3: Check whether it is installed

ls "${SKILLS_ROOT:-$HOME/.agents/skills}" | grep -x "<matched-skill-name>" || echo "not installed"

Step 4: Fetch the sub-skill if missing

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.

scripts/fetch-upstream-skills.sh --list
scripts/fetch-upstream-skills.sh --skill gsap --skill animation-on-scroll
scripts/fetch-upstream-skills.sh --dry-run --all
scripts/fetch-upstream-skills.sh --all

Step 5: Sequence multi-family work

When more than one family is warranted, apply them in this order (details in references/family-routing.md §5):

  1. Direction / style pack — fixes color, type, and structural rules
  2. Layout — grids, containers, split layouts
  3. Background / 3D — WebGL, shader, or particle layer sized against final layout
  4. Motion — scroll and reveal systems once DOM structure is stable
  5. Component states — hover/loading/selected/focus on real components
  6. 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

  1. 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.
  2. Combine across families only when the request genuinely spans layers — most requests are one sub-skill.
  3. Respect the application order — motion wired before layout is final will re-measure against stale element boundaries.
  4. Never stack two sub-skills that solve the same problem (two word-reveal recipes, two scroll listeners); pick the narrowest match per section.
  5. Keep the upstream SKILL.md authoritative — fetch the folder whole rather than paraphrasing its instructions here.
  6. 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.

References