Menu
Methodology for building a large page by progressive decomposition — turn a page brief into a component tree, decide reuse-vs-author per leaf against the graph, build leaves first, and compose upward into an on-system page. Use for /mds:craft:view.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Infer a design system's tokens + voice from a brand reference (screenshots or a URL) — vision-assisted. Use for /mds:system:create --mode extract, feeding the design-system-author skill.
Reason about color on-system — pick/adjust accent, surfaces, and status colors within a design system's palette, check contrast/accessibility, and propose token changes (not raw hex). Adapted from open-design's color-expert. Use for color decisions during build, review, or system edits.
Build a reusable, on-system React+Tailwind component from an intent. Use when creating or editing a component in emdesign. Composes design-system primitives from "@ds", references token roles only, emits a CSF story, and feeds the verify loop.
Author or maintain a design system's DESIGN.md + tokens.css (the contract). Use when fixing the SYSTEM rather than a component — adding tokens, tightening anti-patterns, or capturing visual rules. Adapted from open-design's design-md (Google Labs / Stitch).
Designer-who-codes visual audit + fix. Use to tighten a component before shipping — run the four-source critique, then make atomic, on-system fixes with before/after screenshots. Adapted from open-design's design-review (gstack) to emdesign's code-first loop.
Create or update a design system to the emdesign quality bar — author the 9-section DESIGN.md + tokens.css + base primitives. Use for the System flow (/mds:system:create | :update). Knows the four sources: brief, blank, import, extract.
| name | page-architect |
| description | Methodology for building a large page by progressive decomposition — turn a page brief into a component tree, decide reuse-vs-author per leaf against the graph, build leaves first, and compose upward into an on-system page. Use for /mds:craft:view. |
Big pages are built bottom-up: decompose → build leaves → compose → verify the whole. This is the
methodology the view-loop workflow follows.
get_design_context (the design system's layout rhythm, container width, section spacing,
voice, anti-patterns). A page is a vertical stack of sections; each section is a component.Hero · FeatureGrid · PricingTiers · Testimonial · CTASection · SiteFooter.graph_query({label:'artifact'}) (captured components) + ({label:'primitive'}). If a
captured component already covers a leaf → reuse it (exists: true). Otherwise mark it to author./mds:craft:component / nested design-loop): compose
@ds primitives, token roles only, pass the four-source gate, then capture_reusable_component.critique_score gate;
fix via graph_where_to_fix; record evidence. A page ships only when the page-level gate passes AND a human approves./mds:system:update rather than going off-system.