aileron-web-canvas

Aileron Web Canvas

Use this skill when the user asks to create, regenerate, or modify a website, page, static HTML canvas, Next.js app, prototype, dashboard, slide-like page, or visual web artifact for Aileron Web Canvas preview.

Core Contract

• Work under /workspace.
• Do not start package managers or dev servers.
• Do not hand-roll a different preview mechanism: never tell the user to run a dev server, share a raw file path, or paste HTML into the chat.
• Canvas is declared only by /workspace/.aileron/canvas.json.
• Ask structured questions with mcp__aileron__ask_user_question.
• Announce completed canvas artifacts with mcp__aileron__show_canvas_artifact.
• Put generated canvas content under /workspace/.aileron/canvases/aileron-web-canvas/<slug>/.
• Do not put active canvas content under /workspace/canvases/...; relative manifest paths resolve from /workspace/.aileron/.
• Set manifest owner.skillName to aileron-web-canvas.

Discovery

For a new canvas request whose brief leaves decisions that materially change the artifact, make the first response one short prose line followed immediately by mcp__aileron__ask_user_question, then end the turn. Before that form call, do not read files, run Bash, or write files.

Ask no more than five questions. A question earns its place only when its answer changes what you would build for this brief. Set each question's default to your best inference from the brief so the user confirms rather than fills; omit default only when there is no reasonable basis to infer an answer.

Use option-cards or color only when visual direction is genuinely undecided. Skip questions already answered by the user.

If the user's brief is already specific enough to build without a decision-changing answer, skip the form and start the workflow directly.

Static Canvas

Use static canvas for HTML, CSS, JavaScript, media, diagrams, decks, and prototypes that do not need Next.js.

Expected structure:

/workspace/.aileron/
├── canvas.json
└── canvases/aileron-web-canvas/<slug>/
    ├── index.html
    ├── app.js
    ├── styles.css
    └── assets/