Standalone UI prototypes — each a self-contained Vite + React app in its own folder, built and deployed together as one Vercel project and served at https://prototypes.fvm.house/<name>/.
- editor-header-breadcrumb — a breadcrumb-style document bar for the WordPress block editor.
- media-tab-inserter — a redesigned Media tab for the block editor's inserter sidebar.
- responsive-dashboard-widget — a WordPress dashboard widget that adapts its layout and content across five size tiers as it's resized on a grid.
Every prototype explores an idea for WordPress itself — Core or Gutenberg — built from the WordPress Design System so it looks and behaves like WordPress. Prototypes are ideas to discuss and iterate on with contributors, not code meant to ship into WordPress as-is.
The
wordpress-design-systemMCP is the crucial entry point to the WordPress Design System. Whenever you touch the Design System or the components that live in it, go through this MCP first — it's the authoritative source for which components and tokens exist and how to use them. Query it (get_components,get_component_details,get_design_tokens) instead of relying on memory.MCP vs. the
wpdsskill — they don't overlap. Thewordpress-design-systemMCP is the data source (the "what"): the authoritative facts about which components/props/tokens exist. Thewpdsskill is the working method (the "how"): the rules for building WPDS UI, which itself calls into the MCP for the facts. For what exists and its exact API, the MCP is the source of truth; for how to build, follow thewpdsskill. Use both — one is never a substitute for the other.
- Create a folder
<name>/with a Vite app — setbase: './'in itsvite.config.js, and add an.npmrcwithlegacy-peer-deps=true. - Build the UI from
@wordpress/componentsand its design tokens (resolved via thewordpress-design-systemMCP); avoid custom UI styling. - Add a
WPDS-COMPONENTS.mddocumenting which WordPress Design System components the prototype references (from the brief or the Figma designs). - Push to
main. Vercel runsbuild.sh, which builds each prototype intodist/<name>/and serves it atprototypes.fvm.house/<name>/.
Run one locally: cd <name> && npm install && npm run dev. Full process in CLAUDE.md.