web-design

WCAG 2.2-aligned accessibility audit — semantics, ARIA, keyboard navigation, color contrast, focus management, motion preferences. Severity guide + tooling notes. Used by `accessibility-auditor` (primary).

Author a project's generation-time brand-voice contract (brand-guidance.md) — a named aesthetic, a two-typeface max, a tiny palette, a 4px spacing scale, a motion philosophy, and a project-scoped anti-pattern catalogue that bans the recurring "AI slop" patterns (generic-sans brand faces, indigo gradients, 3-card grids, card-in-card, stock-photo 100vh heroes) by default. Loaded into context before every page-generation call — the tokens answer "what are the values," this answers "how does an agent reliably apply them." Reach for this skill when a project's design-tokens.json exists (or is being produced alongside) and no brand-voice contract exists yet. Used by `visual-designer` (primary); `frontend-implementer` and `content-strategist` co-consume it (voice rules straddle visual and copy).

Design and implement an Intercom-style card / "tile" UI — discrete soft-shadowed rounded surfaces on a calm monochromatic canvas, in a multi-pane (navigation-rail + content) layout, with a single restrained accent used only as hairlines, outlines, and occasional text. Used by `visual-designer` (primary) and `frontend-implementer` (token-to-code wiring). Invoke when a brief asks for a "card", "tile", "panel", "Intercom-style", "dashboard-like", or "clean SaaS" surface, or when restyling an existing flat/monochromatic page toward elevated content tiles.

Audit existing site content — full inventory (URL × type × intent × last-updated × owner), scoring against business / user-need / SEO criteria, remediation queue (keep / consolidate / rewrite / retire), and the migration plan when re-platforming. Reach for this skill at the start of a re-platform, before an SEO push, or when content quality has stopped predicting conversion. Used by `content-strategist` (primary) + `web-architect`.

Design and audit conversion-focused screens — funnel definition, friction-vs-trust balance, form field selection (every field is a cost), one CTA per screen discipline, social-proof placement, microcopy patterns, and the conversion-rate measurement plan. Reach for this skill when designing or reviewing a landing page, sign-up flow, checkout, or any "convert visitor → action" screen. Used by `ux-designer` (primary) + `content-strategist`.

Diagnose and improve Core Web Vitals (LCP / CLS / INP). Includes a Mermaid decision tree for root-cause triage across all three vitals + canonical fix-by-symptom map. Field data (CrUX / RUM) at p75 is the measurement target. Used by `performance-engineer` (primary).

Audit an existing brand / design system for consistency, completeness, token coverage, dark-mode readiness. Used by `visual-designer` (primary) + `frontend-implementer` (token-to-code wiring).

Scaffold a token system from brand spec to token JSON to CSS variables to framework theme (Tailwind / Shadcn / CSS-in-JS / Theme UI). Includes naming convention, scale design (color / spacing / typography / radius / shadow / motion), light/dark mode, semantic vs primitive tokens, and the dual-mode build pipeline. Reach for this skill when launching a new design system or when an existing system has "design drift" between Figma and code. Used by `visual-designer` (primary) + `frontend-implementer`.

Implement a Fluent UI v9 + React website end-to-end — set up FluentProvider, turn a brand color into a BrandVariants ramp and light/dark/high-contrast themes (createLightTheme / createDarkTheme), wire design tokens, style with Griffel makeStyles, handle Next.js App Router SSR (the use-client + renderToStyleElements boundary) or Astro islands, build custom components on Fluent primitives, and ship a themed Storybook. Reach for this skill when building or reviewing a Fluent/React site, implementing a brand as a Fluent design language, or debugging Fluent SSR / dark-mode / theming issues. Used by `frontend-implementer` (primary) + `visual-designer` (brand to theme).

The gated pipeline the web-design Team Lead runs on a new marketing site or storefront — and, for a pure web-app, as a thinner brand/UX/a11y/perf wrapper around frontend-engineering's build, not the app's build pipeline: nine fail-closed gates (discovery → IA → tokens → content → build → a11y → perf → SEO/AEO → pre-launch), each against numeric WCAG 2.2 / CWV / SEO bars, seaming app builds to frontend-engineering and auth/payments to security-reviewer, ending in one Go / Conditional / No-go.

Design site information architecture — sitemap, URL taxonomy, navigation patterns (primary / utility / footer / contextual), card-sort discipline, content model that the IA implies, and the URL-to-template mapping. Reach for this skill at the start of a new build or when redesigning navigation on an existing site. Used by `web-architect` (primary) + `ux-designer`.

Technical SEO sweep — crawlability, indexability, schema markup, sitemaps, OG / Twitter Card metadata, hreflang, structured data. Used by `web-architect` (primary, technical) + `content-strategist` (content-SEO).

Build a non-React static site: semantic HTML, token-driven CSS (custom properties, grid/flex, container queries, logical properties), and an SSG-first Astro/11ty/Hugo or plain HTML+CSS build with islands only where earned. Covers reflow to 320px, in-markup performance (AVIF/WebP srcset, lazy-load, font-display, critical CSS), and accessible markup. Used by frontend-implementer; dispatched by gold-standard-website-pipeline G5 for non-React static stacks.

Catalogue and hygiene-audit third-party scripts on a marketing site — performance budget by category (analytics / chat / A/B / fonts / video / social), async-defer patterns, consent-gating (GDPR / CCPA / consent-mode v2), CSP implications, and the periodic re-audit cadence. Every third-party is debt; this skill quantifies it. Reach for this skill before launch, during a Core Web Vitals push, or when adding a new external script. Used by `performance-engineer` (primary) + `web-architect`.