Claude Code plugin
When Claude Code writes a Section, wires up an Orchestr handler, or builds a hero component from a Figma frame, you want it following the same patterns the Laioutr core team applies in the monorepo: schema field naming, the ui-kit / ui / ui-app layering, --z-index-* tokens, currency formatting through canonical types. The Laioutr developer plugin ships those workflows as Claude Code skills, plus the docs MCP server wired up out of the box, so any project gets the same defaults from a single install.
The plugin lives in the public marketplace at github.com/laioutr/claude-marketplace and targets external developers building Vue 3 / Nuxt 3 storefronts, UI components, and Orchestr integrations.
Install
Open Claude Code, then type these as slash commands inside the session (once per machine for the marketplace, then per install for the plugin):
/plugin marketplace add laioutr/claude-marketplace
/plugin install laioutr-developer@laioutr
After install, run /reload-plugins (or restart Claude Code) so the skills, slash commands, and MCP server pick up.
Updating
The marketplace catalog does not refresh on its own. To pull a new plugin version, refresh the catalog and re-run the install:
/plugin marketplace update laioutr
/plugin install laioutr-developer@laioutr
Then run /reload-plugins to activate the new version without restarting.
To opt into automatic refreshes for this marketplace, open /plugin, switch to the Marketplaces tab, and toggle auto-update on laioutr.
Requirements
- Claude Code 2.x with plugin support (the
/plugincommand is available). - Node 20+ and pnpm or npm for the storefront you are working on.
- Outbound HTTPS to
https://docs.laioutr.ioso the docs MCP server can connect.
What it ships
Two surfaces load on demand based on your prompt:
- Skills auto-load when Claude detects a matching task.
laioutr-platformtriggers broadly on any Laioutr work; the task-specific skills fire on narrower prompts. The matching skill's body loads in full. - References sit inside each skill's
references/directory with one-line triggers. When a task plausibly matches one, Claude opens that file before changing code.
Skills
| Skill | Auto-loads on | Carries |
|---|---|---|
laioutr-platform | Any Laioutr work (mentions of Laioutr, @laioutr-core/*, defineSection, defineBlock, Orchestr handlers) | Platform overview, discovery surfaces (docs MCP / Storybook / ui-source), Orchestr handler reference, commit conventions, index for 24 cross-cutting reference files |
writing-section-block-definitions | defineSection / defineBlock, schema fields, Block*.vue naming | Sidebar group order, canonical field names, forbidden-name list, if operators, defineSelectOptions rules. Plus 6 reference files. |
writing-storybook-stories | .stories.ts authoring, Storybook variants | Meta titles, variant naming, no per-viewport exports, theming checks, refactor workflow |
figma-design-analysis | Decomposing a multi-component Figma frame (PDP, checkout, full layouts) | Frame exploration, component matching, token mapping, themable defaults, subagent orchestration. Plus 6 reference files. |
figma-component-architecture | Producing component API specs (props, slots, events, state) from a design plan | Spec format, core architectural constraints, output template. Plus 3 reference files. |
figma-to-component | Writing Vue components from a Figma design or analysis plan | Vue component conventions, breakpoint handling, verification pass |
figma-export-assets | Exporting illustrations, photos, logos, markers, screenshots, custom icons from Figma into the repo | MCP probe, inventory, leaf isolation, format selection, destination, bytes, wire-up |
writing-claude-rules | Authoring a rule file in rules/ or .claude/rules/ | Position-claim shape, verification before encoding, voice discipline, examples format |
adr | Capturing an architectural decision | ADR section template, clarification-first workflow |
Forcing a specific skill
If a prompt does not match a skill's triggers but you want it anyway, invoke it as a slash command:
/laioutr-developer:figma-to-component
/laioutr-developer:writing-section-block-definitions
Docs MCP server
The plugin registers the laioutr-docs HTTP server at https://docs.laioutr.io/mcp automatically. That is the same server documented at Documentation MCP Server.
Once connected, Claude can search the live docs in-session for props, emits, and usage examples on @laioutr-core/* components, Orchestr handler signatures, schema field types, CLI commands, and the canonical TypeScript types.
Troubleshooting
If the docs MCP server will not connect, a skill is not firing, or a reference file is not loading when you expect it to, see the plugin README.