redactd-canvas-muibook

name	redactd-canvas-muibook
description	Create Muibook UI on an active Redactd canvas. Uses bundled Muibook component knowledge in assets/muibook-knowledge/ to generate valid Redactd JSON trees and send them directly to redactd.xyz.

Redactd Canvas: Muibook

Use this skill when asked to create, add, send, or modify Muibook UI on a Redactd canvas.

1. Knowledge Source & Muibook Handoff

Before building any tree, choose and inspect the active Muibook knowledge source:

1. Bundled Plugin Knowledge Assets (PRIMARY): When running in or alongside the Redactd Canvas plugin, inspect the local asset files in assets/muibook-knowledge/ (specifically assets/muibook-knowledge/skills/muibook-components/SKILL.md, custom-elements.json, compositions.ts, json-rules.ts, and DESIGN.md). Use these files directly for comprehensive component, attribute, slot, token, and composition knowledge.
2. Lightweight Skill Pair: When using this skill standalone outside the plugin repository, prefer the installed muibook-components skill for component, public attribute, slot, token, and composition references.
3. Muibook MCP & Redactd API Tools: If the working Muibook Knowledge MCP is available, call its start_here tool and use its rules, compositions, component lookup, and dynamic attrs as needed. In the full plugin, if get_redactd_component_knowledge is available, call it with format: "summary". Treat a newer MCP or API version as authoritative over static local files.
4. Independent Core (Last-resort fallback): If operating standalone without access to assets/muibook-knowledge/, muibook-components, or active MCP/API tools, use the compact Independent Core section below for basic layouts.

Muibook Tag & Prop Conversion Rules

For native Muibook components and compositions:

• Remove mui- and convert kebab-case to PascalCase: mui-card-body becomes CardBody.
• Convert mui-icon-name to _Icon with props.icon: "mui-icon-name".
• Before assigning an icon, inspect the available mui-icon-* component names in the selected Muibook knowledge source and use an exact existing name. If none semantically matches the requested concept, use _Icon with props.icon: "mui-icon-rectangle" as the neutral fallback. Never invent an icon component or icon name.
• Convert mui-illustration-name to _Illustration with props.illustration: "mui-illustration-name".
• Put rendered text in props.text for Heading, Body, Button, Link, Badge, Status, Chip, TabItem, and ListItem.
• Move native slot="name" to props.slot: "name".
• Preserve documented props and token values. Do not blindly copy internal or dynamic attributes.

2. Mandatory Layout & App Shell Rules

• Mandatory First-Pass App Shell Rule: Whenever a wireframe or prompt contains a sidebar navigation menu or side panel, use Drawer as the shell region (props: { "open": true, "side": "left", "variant": "persistent" }).
  • Use Drawer as the root when it owns the whole shell.
  • When a global top header must remain full-width above the Drawer, use a zero-space VStack root with HeaderBar first and Drawer second. If Drawer has width: "320px", preserve that width and set left-width: "320px" on HeaderBar. Size the Drawer to the remaining shell height, for example calc(100dvh - var(--header-min-height-medium)).
  • Put the menu (or “hamburger”) action and product identity in a HeaderBar child with props.slot: "left"; put page search/title/actions in the default region and use props.slot: "right" only for a separately aligned right panel. Let HeaderBar own shell height, surface, bottom border, column separators, and contextual action sizing; do not recreate those decisions with a Grid and manual styles. Follow the Header Bar Composition Density Guide in Muibook knowledge for child sizing and responsive choices.
  • Do not use Container, Card, or a horizontal layout as the outer shell when a sidebar exists. Container belongs inside the Drawer page region.
  • The sidebar navigation items belong in Drawer's primary slot (unslotted VStack of Button/Link items with variant="tertiary", align="start", and slot="before" _Icon items). All navigation buttons inside Drawer MUST explicitly set align: "start".
  • The main page content MUST be wrapped in a direct child Div with props: { "slot": "page" }.
• No Hardcoded White/Light Surface Colors: NEVER output var(--white), style: "background: white", #ffffff, or color: black based on visual wireframe image backgrounds or drawing artifacts. All component surface and text styling must be driven by Redactd component variants (, , , etc.) and semantic design tokens so layouts adapt seamlessly to both light and dark mode.

3. Redactd Tree Contract

Build one root JSON object. Every node must contain all four fields:

{
  "id": "unique_descriptive_id",
  "type": "ComponentType",
  "props": {},
  "children": []
}

• id must be a unique, descriptive string across the entire tree.
• type is a Redactd PascalCase component name such as Container, CardBody, or Button.
• props contains component content, public props, and slot placement (props.slot).
• children is always an array, including on leaf nodes.
• Put slot placement in props.slot. Do not add slot beside id, type, or props.

Minimal valid tree:

{
  "id": "welcome_container",
  "type": "Container",
  "props": {
    "center": true,
    "size": "medium"
  },
  "children": [
    {
      "id": "welcome_card",
      "type": "Card",
      "props": {},
      "children": [
        {
          "id": "welcome_card_body",
          "type": "CardBody",
          "props": {},
          "children": 
            
               
               
               
                 
                 
              
               
                
                   
                   
                   
                     
                     
                     
                  
                   
                
                
                   
                   
                   
                     
                     
                  
                   
                
                
                   
                   
                   
                     
                     
                  
                   
                
              
            
          
        
      
    
  

4. Shared Workflow & API Auth

1. STEP 0 - MANDATORY PRE-CHECK FOR API KEY:
   Before building any component tree, before generating any JSON, before writing any scratch files, and before generating any response output:
   Check if REDACTD_API_KEY is present in process.env or if an API key was provided in the prompt/conversation context.
   If NO API KEY IS PRESENT, STOP IMMEDIATELY. Do NOT generate any JSON tree. Do NOT write any scratch files. Ask the user for their Redactd API Key as your entire initial response and wait for their reply.
2. Select and inspect the knowledge source using Knowledge Source above (assets/muibook-knowledge/).
3. Build and validate a Redactd component tree against the Redactd Tree Contract.
4. Primary Automated Transport: Call create_redactd_recipe via the API tool with the apiKey to send the UI tree directly to Redactd and return the one-time canvas_url. Do NOT instruct the user to manually copy/paste JSON files.

API Auth Details

• STOP AND ASK AT THE START: If no API key is set in REDACTD_API_KEY or passed in the conversation, STOP AND ASK THE USER FOR THEIR REDACTD API KEY IMMEDIATELY AS YOUR VERY FIRST STEP before building any JSON or running any scripts.
• Tell the user they can find it in Redactd at Profile > Settings or Team Settings > Account Settings > API Key.
• For automated or local development use, setting REDACTD_API_KEY in the shell environment (export REDACTD_API_KEY="rdx_...") is supported to bypass all prompts.

5. Independent Core (Fallback Only)

When operating standalone without access to assets/muibook-knowledge/, muibook-components, or an active MCP server, use this compact core for basic layouts:

• Container: center, size, style.
• Card with a direct CardBody child; CardBody: size, style.
• VStack, HStack: space, padding, alignX, alignY, width, height, style, slot.
• Grid: col, space, padding, alignX, alignY, style, slot.
• Heading: text, size, level; Body: text, size, weight, variant.
• Button: text, variant, size, aria-label; Link: text, href, variant, size.
• Field: label, variant, message, size; Input: label, type, placeholder, name, value, size.
• Badge: required non-empty text, variant (neutral|positive|warning|attention|overlay), size; _Icon: icon, size, color, slot. Never output Badge with missing, empty, or whitespace-only text; omit the Badge when no meaningful visible label is available. Omit Badge variant for neutral; never use , , or .

6. Wireframe Interpretation

When a wireframe image, sketch, or screenshot is provided for a Redactd canvas:

1. Follow the wireframe-to-muibook-components skill (in skills/wireframe-to-muibook-components/SKILL.md or assets/muibook-knowledge/) for authoritative visual interpretation rules (intent over pixel-perfection, unlabelled region handling, Slat vs HStack rules, Drawer shell detection, and avoiding hardcoded canvas colors).
2. Convert the resolved components into the Redactd JSON Tree format ({ id, type, props, children }).
3. Send the verified tree directly to Redactd via create_redactd_recipe.

7. Muibook Chart Data

When a prompt asks for a populated Muibook chart, include its structured dataset in the Redactd tree.

• FinancialChart.props.data: [{ time, open, high, low, close, volume? }]
• MarketSparkline.props.data: [{ time, value }]
• FinancialBarChart.props.data: [{ time, value }]
• ComparisonChart.props.series: [{ id, label, color?, data: [{ time, value }] }]

Keep datasets as structured JSON arrays. Do not stringify them or generate JavaScript assignment code. Use numeric values, order points chronologically, and use ISO YYYY-MM-DD dates for daily illustrative data unless the user supplies another valid time format.

• Use finite numeric values and one unique time per datum within each dataset or comparison series.
• For Financial Chart, ensure high >= max(open, close) and low <= min(open, close); area charts still receive the full OHLC shape and plot close.
• For Financial Bar Chart, match value-format to raw numeric percent, currency, decimal, or full volume values. Negative values are valid for directional data around a baseline.
• For Comparison Chart, use unique series ids. Absolute mode expects a shared unit; indexed and percent modes expect raw values with a non-zero first value and perform their own transformation.
• For Market Sparkline, keep labels, currency, baseline, trend, and scale in props rather than encoding them into { time, value } data.

8. Tree Rules

When running in the plugin environment, inspect assets/muibook-knowledge/json-rules.ts; when using the muibook-knowledge MCP, call get_rules to read json-rules. For standalone use, follow the self-contained summary of core tree construction rules below:

• Component API Compliance: Use only component types and props from the selected Muibook knowledge source. Never invent Redactd component names, aliases, props, CSS tokens, or Material UI names.
• Icon Resolution: Check the available Muibook icons before choosing one and use its exact mui-icon-* name. If no available icon matches, use _Icon with props.icon: "mui-icon-rectangle"; never invent an icon name.
• Slat Column Defaults: variant="action" automatically defaults to col="minmax(0, 1fr) auto" so trailing actions stay end-aligned. Standard variant="row" defaults to col="1fr 1fr". Only set props.col explicitly (e.g. "1fr auto") when a non-action row needs a constrained trailing column.
• Mandatory CSS Units: All length props (height, width, min-height, gap, padding, space) MUST include valid CSS units (e.g. "240px", "320px", "100%"). NEVER output bare numeric strings like "240" or "320".
• Slat & SlatGroup Rows: Prefer SlatGroup and Slat over ad-hoc HStack for structured row items. Place primary row content in slot="start", trailing metadata/status/action in slot="end", and leading avatar/icon in slot="accessory". Always specify an explicit variant ("row", "action", or "header").
• Drawer Shell Layout: When a wireframe or prompt requests a sidebar navigation app shell, use Drawer as the root only when it owns the entire shell (variant: "persistent" or "push", open: true, side: "left"). If a global top header spans above it, use a zero-space VStack root containing HeaderBar and Drawer as siblings. Preserve an explicit Drawer width and apply the same value to HeaderBar left-width; use HeaderBar's left, default, and optional regions instead of rebuilding shell columns with Grid. In both shell structures, wrap all main page content in a direct plain child with .

9. Response

• API workflow with ok: true: summarize what was added and include canvas_url.
• API workflow with ok: false: show the returned error and request_id.