ai-maestro-webdesign

Orchestrator for any web, UI, slide, prototype, or design task. Enforces three hard rules — (1) gather context, (2) produce ≥3 variants, (3) reject AI-slop — and routes to executors. Triggers on "design a page", "landing page", "mockup", "UI for", "prototype", "wireframe", "slide deck", "dashboard", "website". Plan phase runs in ASCII via /amw-sketch; HTML follows approval. Use when the user requests any visual design artifact. Trigger with /amw-sketch.

Author, lint, extract, audit, and convert DESIGN.md design-system specifications. Triggers on "create DESIGN.md", "lint DESIGN.md", "extract DESIGN.md from URL/Tailwind/codebase", "audit DESIGN.md", "DESIGN.md companions". Does NOT trigger on generic "design system", "extract design tokens" — those route to amw-design-principles or amw-design-extract. Use when authoring, linting, or converting a DESIGN.md spec. Trigger with /amw-design-md-create.

Convert a free-text system description into a layered architecture diagram (graph JSON, SVG, or PNG). Triggers on "draw my architecture", "architecture diagram for X", "layered diagram", "export architecture as SVG/PNG", "component diagram". Does NOT trigger on "design", "sketch the UI" — routes to design-principles / diagram-editorial. For Mermaid, use `amw-mermaid-diagram`. Use when converting a system description into a layered diagram. Trigger with /amw-create-or-modify-svg-diagram.

Structural comparison of two diagrams — diff two flowcharts, compare v1/v2, find what changed, cross-format diagram diff. Triggers on "compare these diagrams", "diff two flowcharts", "what changed between v1 and v2", "structural diff of two diagrams". Source formats may differ (ASCII vs Mermaid is valid). PNG-as-input is refused. Does NOT claim generic design vocabulary — those route to design-principles. Use when comparing two diagrams structurally. Trigger with /amw-compare-diagrams.

Cross-format diagram conversion — convert a diagram from one format to another across the 5-format matrix (ASCII, HTML, SVG, Mermaid, PNG). Triggers on "convert this diagram to X", "turn my ASCII into SVG", "convert flowchart to mermaid", "export diagram as PNG". PNG-as-source is refused. Does NOT claim generic design vocabulary — those route to design-principles. Use when converting a diagram across the 5-format matrix. Trigger with /amw-convert-any-diagram-format.

Editorial-quality HTML+SVG diagrams with brand-matched styling — 13 types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layer, Venn, pyramid/funnel). Triggers on "sequence diagram", "ER diagram", "blog-ready architecture diagram". NOT for generic design, freeform SVG, or graph JSON — routes to design-principles / svg-creator / diagram-architecture. Use when creating an editorial diagram. Trigger with /amw-create-or-modify-html-diagram.

Authoritative spec for ASCII / HTML / SVG / Mermaid formats, IR schema, conversion matrix, validation dispatcher, modify/diff pipelines. Triggers on "diagram IR schema", "format detection", "conversion matrix", "IR-level diff", "Mermaid format spec". Does NOT trigger on diagram creation — routes to ascii-creator / svg-diagram / html-diagram. References-only — NEVER emits diagrams. Use when looking up IR schema or format specs. Trigger with "diagram IR schema".

Natural-language request to SVG diagram primitives — flowcharts, architecture diagrams, system illustrations with nodes, edges, arrowheads. Triggers on "draw a flowchart of X", "SVG diagram of X", "render data flow as SVG", "draw the architecture as SVG", "node-and-arrow diagram". Does NOT trigger on broad design vocabulary — those route to `design-principles`. Use when authoring an SVG flowchart or architecture diagram. Trigger with /amw-create-or-modify-svg-diagram.

Re-emit an existing webpage (`.html`) from an edited diagram source (ASCII / SVG / Mermaid). Chains diagram → IR → ASCII → HTML, overwrites the page (originals to `.bak`), surfaces a diff. Triggers on "edit diagram in my webpage", "modify webpage from this diagram", "sync diagram into my HTML". Does NOT claim generic design vocabulary. Refuses raster-image-tag diagrams. Use when syncing a diagram back into a webpage. Trigger with /amw-modify-webpage-from-diagram.

Evangelion / NERV-HUD aesthetic skill — original Eva-inspired interface language for web and mobile. Severe geometry, amber / red / signal-green palette discipline, condensed sans + tabular numerals, mechanical state-driven motion. Activates on narrow triggers only: "evangelion ui", "NERV hud", "anime control room", "tactical diagnostic overlay", "sync monitor", "breach warning ui", "reactor diagnostic screen", "psychograph", "title card sci-fi". Does NOT activate on generic "sci-fi", "cyberpunk", "dark mode", "tactical dashboard" — those route to amw-design-principles.

Generate hand-drawn Excalidraw-style conceptual illustrations via the Gemini API — white background, rough sketch, in-panel labels. GATED — requires `GEMINI_API_KEY` + per-call consent. Triggers on "Excalidraw-style illustration", "hand-drawn concept diagram", "whiteboard sketch". Does NOT trigger on broad design intent or other diagram formats — routes to design-principles. Use when generating a hand-drawn illustration. Trigger with /amw-create-excalidraw-like-diagram-png.

GPU shader background catalog for the web — 11 generative background types (mesh-gradient, voronoi, liquid-metal, plasma, etc.) plus 17 image-overlay effects (ASCII, dither, halftone, glitch, etc.). Activates on narrow triggers only: "generative background", "shader background", "WebGL background", "mesh gradient background", "voronoi hero", "liquid metal background", "fragment-shader hero", "GLSL background", "background effect catalog". Does NOT activate on generic "background", "gradient", "hero section", "wallpaper" — those route to amw-design-principles.

Author OR edit an HTML-rendered diagram — editorial architecture / flowchart / sequence / state / ER / timeline / swimlane / quadrant / tree / layer / venn, or an infographic page. Triggers on "create HTML diagram", "modify HTML diagram", "render structure as HTML", "edit .html diagram". Does NOT claim generic design / UI / landing-page vocabulary — routes to design-principles. Use when authoring an HTML diagram. Trigger with /amw-create-or-modify-html-diagram.

hypercomp reference — TypeScript library compiling a chainable Effect API to SVG filters. Triggers on "hypercomp", "SVG filter", "SVG filter composition", "compose SVG filter effects", "feTurbulence", "feDisplacementMap", "feGaussianBlur", "feColorMatrix", "image-processing filter chain". Does NOT trigger on generic "add an effect" or broad design intent. Use when authoring or reading a hypercomp Effect chain or compiled SVG filter. Trigger with "hypercomp" or "SVG filter composition".

HTML composition to MP4 video rendering via the external Hyperframes monorepo. Triggers on "render HTML as video", "HTML to MP4", "website to video", "create video from HTML", "rasterize composition to mp4". Does NOT trigger on generic "animation" / "video" — those route to pretext or the user's pipeline. Use when rendering HTML to MP4 via Hyperframes. Trigger with "render HTML as video" or "HTML to MP4".

Dense editorial infographics as HTML + PNG + PDF from a structured data brief — tokenomics, whitepaper summaries, ecosystem maps, roadmaps, airdrop guides, staking breakdowns, stat posters. Triggers on "infographic", "tokenomics graphic", "ecosystem map", "turn stats into a graphic". NOT for generic design (design-principles) or editorial diagrams (diagram-editorial). Use when producing a dense infographic from a data brief. Trigger with /amw-create-or-modify-html-diagram.

liquid-glass-js implementation skill — WebGL 2.0 Apple visionOS-style frosted-glass UI (real-time refraction, blur, rim lighting, warp distortion). Activates on narrow triggers only: "liquid-glass-js", "liquid-glass library", "dashersw liquid glass", "visionOS glass component", "glass refraction WebGL", "glass container.js / button.js", "tintOpacity / blurRadius / edgeIntensity / rimIntensity / warp" used together. Does NOT activate on generic "glassmorphism", "frosted glass", "backdrop-filter blur", "transparent card" — those route to amw-design-principles or the S-034 Liquid Glass preset.

Material Design 3 (Material You) token reference: HCT tonal palettes, role-based color tokens, state layers, tonal elevation, shape scale, type styles, and the 4dp spatial grid. Activates on narrow triggers only: "material 3", "material design 3", "M3 tokens", "HCT palette", "tonal elevation", "state layer", "md-sys color", "MaterialTheme colors". Does NOT activate on generic "material design" or broad design vocabulary - those route to amw-design-principles.

Author OR edit Mermaid source — flowchart, sequenceDiagram, stateDiagram-v2, classDiagram, erDiagram, gantt, pie, journey, mindmap. Triggers on "create Mermaid diagram", "modify Mermaid at a file path", "edit .mmd file", "write mermaid source". Does NOT claim generic design vocabulary. Distinct from mermaid-render (renders only) — this skill OWNS AUTHORING + MODIFYING. Use when authoring/editing Mermaid source. Trigger with /amw-create-or-modify-mermaid-diagram.

Render Mermaid diagram text to themed SVG or terminal/markdown ASCII via the vendored beautiful-mermaid backend. Triggers on "render mermaid as SVG", "mermaid to SVG", "mermaid ASCII", "themed mermaid diagram", "batch render .mmd files", "apply dracula/tokyo-night theme to mermaid". ONLY Mermaid renderer in the plugin — all skills producing Mermaid source delegate rendering here. Use when rendering Mermaid source to themed SVG or ASCII. Trigger with /amw-create-or-modify-mermaid-diagram.

Mobile-native UI / UX reference: iOS HIG vs Android Material 3 platform differences (touch targets, navigation, gestures, type scales), thumb-zone reachability, hitSlop / accessibility-area patterns, per-industry mobile design languages, and the Peak-End workflow. Activates on narrow triggers only: "mobile app design", "iOS HIG", "android material 3 app", "touch target size", "thumb zone", "hitSlop", "react native ui", "swiftui mobile design", "jetpack compose ui", "mobile a11y", "mobile screen design". Does NOT activate on generic "design a page", "responsive design", "small screen" — those route to amw-design-principles.

Deprecated. See the amw-pretext skill for the unified pretext workflow. This file is a redirect stub only. Use when the pretext-art trigger is invoked — redirect to amw-pretext. Trigger with explicit "pretext-art" or legacy pretext-art phrasing.

Pretext-driven typography, text measurement, layout, virtualized tables, ASCII-on-canvas, calligrams, 3D/motion text. Triggers on "pretext", "@chenglou/pretext", "text-on-path", "balanced headline", "shrink-wrap text", "virtualized list", "kinetic typography", "auto-fit font". Does NOT claim generic design vocabulary — design-principles retains those. Use when applying pretext-based typography or layout. Trigger with "pretext".

progressive-blur reference — the MIT drop-in progressive (gradient) backdrop-blur React component (RadialBlur + LinearBlur). Covers the two components, their strength/steps/falloffPercentage/tint props, LinearBlur's side direction, the layered backdrop-filter plus gradient-mask mechanism, and the Chrome overflow + border-radius gotcha. Does NOT trigger on generic "add a blur", "make it blurry", or a uniform CSS filter blur. Use when wiring a progressive (gradient) backdrop-blur overlay.

react-colorful reference — the tiny dependency-free React/Preact color-picker component (HexColorPicker, RgbaColorPicker, HslColorPicker, HexColorInput, setNonce). Covers the 15 picker components, the controlled color/onChange/onChangeEnd props, the 6 color-model types, HexColorInput alpha/prefixed props, CSS class hooks, and the setNonce CSP helper. Does NOT trigger on generic color help, palette/token design, or choosing brand colors. Use when wiring a react-colorful color-picker widget.

react-promptify reference — the dependency-free window.prompt replacement for React (createPrompter factory, the Prompter render-host, the async prompt() resolving to a typed value or null on cancel). Triggers on "react-promptify", "custom prompt modal", "window.prompt replacement", "createPrompter", "promise-based modal returning a value". Does NOT trigger on generic "add a modal", "open a dialog", or "make a form". Use when wiring a react-promptify async value-returning prompt flow.

SEO + Core Web Vitals evaluation framework (E-E-A-T quality signals, LCP/INP/CLS, structured data, technical foundations). Triggers on "SEO", "core web vitals", "E-E-A-T", "structured data", "schema markup", "page performance ranking", "search ranking", NOT generic design intent. Use when evaluating or improving a webpage's SEO, Core Web Vitals, or structured data markup. Trigger with explicit "SEO", "core web vitals", or "structured data" phrasing.

shadcn/ui component usage, theming, forms, charts, and framework integration (Next.js / Vite / Remix / Astro / Laravel / Gatsby). Triggers on "shadcn component", "data-table", "shadcn form", "shadcn theme", "dark mode for shadcn", "install shadcn", registry questions, accessibility of Radix-based components, NOT generic "UI library" or "React component". Use when selecting, theming, or integrating a shadcn/ui component into a project. Trigger with explicit "shadcn" phrasing or component name.

Plugin-maintenance audit — pins every skill to a source commit via `source` / `source_version` frontmatter, detects DRIFT when the upstream source has moved since the pin, and emits a re-distill PLAN classifying each skill as CLEAN / PIN-ONLY / STALE. Read-only — never rewrites skills or bumps pins. Triggers on "audit skill drift", "check skill pins against upstream", "re-distill plan", "skill source-version drift", "is my plugin in sync with the source skills". Does NOT trigger on generic "audit my plugin" — those go to plugin-validation; this is specifically for distilled-from-upstream skill content.

Integrate with the Stitch MCP server for design-system extraction, component-library bridging, and design-flow handoff. Triggers on "stitch", "stitch design", "stitch flow", "stitch component library", "import from stitch", "export to stitch". Does NOT trigger on generic "design" or "component" — those route to amw-design-principles. Activates only when the Stitch MCP server is reachable; otherwise emits a clean fallback message and routes to amw-design-extract or amw-design-md-extractor-agent.

Produce polished technical SVG — icons, logos, badges, patterns, data-vis primitives, animations — with a render-verify-deliver loop. Triggers on "SVG icon", "SVG logo", "SVG pattern", "SVG animation", "polished SVG finish". GATED — does NOT accept illustration, character, mascot, scene, portrait, avatar (banned by ai-slop-avoid.md item 3). Use when creating a polished SVG icon, logo, badge, or pattern. Trigger with "SVG icon".

Author OR edit a standalone SVG diagram — freeform node-and-edge, layered architecture, or structural flow. Triggers on "create SVG diagram", "modify SVG diagram", "edit .svg diagram", "render structure as SVG". Does NOT claim generic design / illustration / logo vocabulary — routes to design-principles / svg-creator. Dispatcher over diagram-svg (freeform) + diagram-architecture (layered). Use when authoring an SVG diagram. Trigger with /amw-create-or-modify-svg-diagram.

Tailwind CSS v4 reference — utilities, variants, @theme, @utility/@custom-variant directives, PostCSS/CLI/Vite tooling, v3-to-v4 migration. Triggers on "tailwind v4", "tailwind config", "tailwind migration", "@theme", "@utility", "@apply", "@source", "@reference", "tailwind variants", "tailwind prefix". Does NOT trigger on generic "style my page", "CSS help", or framework-agnostic layout. Use when looking up Tailwind v4 classes, directives, or migration. Trigger with "tailwind v4" or "@theme".

Layered ASCII architecture diagrams (context, container, component level) for terminals, PRs, ADRs. Triggers on "ascii architecture diagram", "text-only system diagram", "terminal-safe architecture sketch", "ADR-embeddable diagram". Does NOT trigger on "architecture" / "system diagram" alone — routes to design-principles / diagram-architecture. ASCII only; passes amw-validate-ascii.py. Use when creating a terminal-safe ASCII architecture diagram. Trigger with "ascii architecture diagram".

Portable ASCII CLI command panels — tabular cheat sheets for gh, git, kubectl, deploy scripts — with macOS/Linux + Windows variants side by side. Triggers on "ASCII cheat sheet", "CLI reference panel in monospace", "command grid for a README", "gh cheat sheet". Does NOT trigger on "cheat sheet", "guide", "docs" alone — those are docs tasks. ASCII only; passes amw-validate-ascii.py. Use when creating an ASCII CLI cheat sheet. Trigger with "ASCII cheat sheet".

ASCII retrospective grids, milestone timelines, heatmaps for team retros, experiment readouts, launch post-mortems — pastes into PRs, GitHub Discussions, Slack. Triggers on "ASCII retro template", "text retrospective grid", "start-stop-continue in ASCII", "post-mortem grid as ASCII". Does NOT trigger on "retro", "post-mortem", "review" alone — those are docs tasks. ASCII only; passes amw-validate-ascii.py. Use when producing an ASCII retro grid or timeline. Trigger with "ASCII retro template".

ASCII state machines and storyboards for user journeys, retention loops, lifecycles, stateful processes — for PRs, ADRs, growth docs. Triggers on "ASCII state machine", "text state diagram", "user journey in ASCII", "retention loop as text", "issue lifecycle in monospace". Does NOT trigger on "state", "journey", "lifecycle" alone — routes to design-principles / ux-flows / diagram-svg. Use when producing an ASCII state machine or storyboard. Trigger with "ASCII state machine".

ASCII flowcharts and timelines for multi-step workflows (PR lifecycle, launch plan, triage, incident response) — pastes into GitHub PRs, Slack, Notion, terminals. Triggers on "ascii flowchart", "text timeline", "workflow diagram in monospace", "PR-safe flowchart". Does NOT trigger on "design", "diagram", "chart" alone — routes to design-principles / diagram-*. ASCII only; passes amw-validate-ascii.py. Use when producing an ASCII flowchart for a PR. Trigger with "ascii flowchart".

Retro/cyberpunk/terminal aesthetic for web — three signature palettes (phosphor green / cyberpunk neon / amber CRT), monospace + box-drawing typography, CSS CRT effects (scanlines, neon glow, barrel distortion, flicker), terse-uppercase copy voice, and Tuimorphic React-library reference. Triggers on "phosphor terminal", "CRT effect", "scanlines + neon glow", "amber CRT", "cyberpunk terminal UI", "Tuimorphic", "retro hacker interface". Does NOT trigger on generic "retro design", "dark theme", or "make it look cool" — those route to amw-design-principles. Use when wiring a deliberate terminal/CRT aesthetic onto a web UI.

Programmatic UI sound design using Web Audio API. Activates on narrow audio-specific triggers — "design UI sound", "click sound", "notification chime", "toggle feedback", "hover sound", "success audio", "error audio", "whoosh effect", "UI sound library", "Web Audio API". Does NOT activate on broad design vocabulary ("design a page", "build a UI") — those route to amw-design-principles. Direct-port from MIT-licensed ui-sound-design-skill (© 2026 Danny Williams).