load_ui_guidelines
Load design guidelines for generating visual widgets like charts, diagrams, and mockups to ensure consistent, high-quality visualizations before creating your first widget.
Instructions
Load detailed design guidelines for generating visual widgets. Call this before generating your first widget in a conversation. Available modules: interactive, chart, mockup, art, diagram.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| modules | Yes | Which guideline modules to load. interactive = HTML controls/forms, chart = Chart.js, mockup = UI mockups, art = SVG illustrations, diagram = flowcharts/timelines/hierarchies. |
Implementation Reference
- src/index.ts:32-45 (handler)The MCP tool handler for 'load_ui_guidelines' which calls the getGuidelines helper to return design specifications.
server.tool( "load_ui_guidelines", `Load detailed design guidelines for generating visual widgets. Call this before generating your first widget in a conversation. Available modules: ${AVAILABLE_MODULES.join(", ")}.`, { modules: z .array(z.enum(["interactive", "chart", "mockup", "art", "diagram"])) .describe( "Which guideline modules to load. interactive = HTML controls/forms, chart = Chart.js, mockup = UI mockups, art = SVG illustrations, diagram = flowcharts/timelines/hierarchies." ), }, async ({ modules }) => ({ content: [{ type: "text", text: getGuidelines(modules) }], }) ); - src/guidelines.ts:193-211 (helper)The getGuidelines helper function that assembles and deduplicates design guideline sections based on requested module names.
export function getGuidelines(moduleNames: string[]): string { const seen = new Set<string>(); const parts: string[] = []; for (const mod of moduleNames) { const key = mod.toLowerCase().trim(); const sections = MODULE_SECTIONS[key]; if (!sections) continue; for (const section of sections) { if (!seen.has(section)) { seen.add(section); parts.push(section); } } } if (parts.length === 0) { return `No guidelines found. Available modules: ${AVAILABLE_MODULES.join(', ')}`; } return parts.join('\n\n\n'); }