القائمة
Use during brainstorming when visual content would help — mockups, wireframes, layout comparisons, architecture diagrams. Zero-dependency, no server required.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use before any creative work, new features, architecture changes, or behavior modifications — explores intent, constraints, and design before implementation begins
Execute an implementation plan using the coordinator pattern — per task, dispatch implementer → spec-reviewer → code-quality-reviewer; per wave, synthesize and verify. Parallel where independent, sequential where dependent. Use when you have a plan ready to execute.
Systematic debugging with hypothesis tracking, evidence collection, and checkpoint management. Use when encountering any bug, test failure, or unexpected behavior — diagnoses before fixing.
Use when implementation is complete and you need to merge, create a PR, keep, or discard a branch — handles integration and cleanup after development work
Use when creating new Athena skills, editing existing skills, or building skills for any Claude Code plugin — guides skill authoring with TDD validation
Use when starting any conversation — ensures Athena workflow skills are considered before taking ANY action, including before clarifying questions. Loaded at session start via SessionStart hook.
| name | athena-canvas |
| description | Use during brainstorming when visual content would help — mockups, wireframes, layout comparisons, architecture diagrams. Zero-dependency, no server required. |
You create browser-viewable visual content during brainstorming — mockups, wireframes, diagrams, comparisons. Zero dependencies, no server needed. Just HTML files the user opens directly.
Decide per question, not per session:
Use Canvas (browser):
Use Terminal (text):
A question about UI is not automatically visual. "What kind of dashboard?" = terminal. "Which of these dashboard layouts?" = canvas.
When you anticipate visual questions during /athena-brainstorm, offer it once:
"Some of this would be easier to show than describe. I can create mockups you view in your browser — just open the HTML file I generate. Want me to use visuals when they'd help?"
This offer is its own message. Don't combine it with other questions. If they decline, use text-only brainstorming.
Create the canvas directory in the project:
mkdir -p .athena/canvas
Add to .gitignore if not already there:
git check-ignore -q .athena 2>/dev/null || echo ".athena/" >> .gitignore
Write self-contained HTML files to .athena/canvas/. Each file is a complete, standalone page — no server, no dependencies, no build step.
File naming: Semantic names with step numbers — 01-layout.html, 02-color-scheme.html, 01-layout-v2.html for iterations.
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Question Title]</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: #0a0a0a; color: #e0e0e0; padding: 2rem; line-height: 1.6; }
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #fff; }
.subtitle { color: #888; margin-bottom: 2rem; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.option { border: 2px solid #333; border-radius: 12px; padding: 1.5rem; cursor: pointer;
transition: all 0.2s; position: relative; }
.option:hover { border-color: #666; background: #1a1a1a; }
.option.selected { border-color: #4a9eff; background: #0d1b2a; }
.option .letter { font-size: 0.875rem; font-weight: 700; color: #4a9eff;
text-transform: uppercase; margin-bottom: 0.75rem; }
.option h3 { font-size: 1.125rem; margin-bottom: 0.5rem; color: #fff; }
.option p { color: #aaa; font-size: 0.925rem; }
.mockup { border: 1px solid #333; border-radius: 8px; overflow: hidden; background: #111; }
.mockup-header { padding: 0.5rem 1rem; background: #1a1a1a; border-bottom: 1px solid #333;
font-size: 0.8rem; color: #888; }
.mockup-body { padding: 1rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mock-nav { padding: 0.75rem 1rem; background: #1a1a1a; border-bottom: 1px solid #333; }
.mock-sidebar { width: 200px; min-height: 300px; background: #1a1a1a; padding: 1rem;
border-right: 1px solid #333; }
.mock-content { flex: 1; padding: 1rem; }
.mock-button { padding: 0.5rem 1rem; background: #4a9eff; color: #fff; border: none;
border-radius: 6px; cursor: pointer; }
.tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px;
font-size: 0.75rem; font-weight: 600; }
.tag-pro { background: #0a2a1a; color: #4ade80; }
.tag-con { background: #2a0a0a; color: #f87171; }
.selected-indicator { position: fixed; bottom: 1rem; right: 1rem; background: #4a9eff;
color: #fff; padding: 0.75rem 1.5rem; border-radius: 8px;
display: none; font-weight: 600; }
</style>
</head>
<body>
<h1>[Question]</h1>
<p class="subtitle">[Context for the choice]</p>
<div class="options">
<div class="option" onclick="select(this)" data-choice="a">
<div class="letter">A</div>
<h3>[Option Name]</h3>
<p>[Description]</p>
</div>
<div class="option" onclick="select(this)" data-choice="b">
<div class="letter">B</div>
<h3>[Option Name]</h3>
<p>[Description]</p>
</div>
</div>
<div class="selected-indicator" id="indicator">Selected: <span id="choice"></span></div>
<script>
function select(el) {
document.querySelectorAll('.option').forEach(o => o.classList.remove('selected'));
el.classList.add('selected');
const indicator = document.getElementById('indicator');
const choice = document.getElementById('choice');
indicator.style.display = 'block';
choice.textContent = el.dataset.choice.toUpperCase() + ' — ' + el.querySelector('h3').textContent;
}
</script>
</body>
</html>
After writing each HTML file:
Canvas ready: .athena/canvas/01-layout.html
Open it in your browser and let me know which option you prefer.
[Brief text summary of what's on the page]
Always provide a text summary — the user should understand the question even without opening the file.
The user reports their choice in the terminal. No server events needed — the terminal is the feedback channel.
If the user wants changes to the current screen, write a new version (01-layout-v2.html). Only advance to the next question when the current one is settled.
The template above includes these ready-to-use patterns:
| Component | Class | Use For |
|---|---|---|
| Option cards | .options > .option | A/B/C choices with click selection |
| Mockup frame | .mockup > .mockup-header + .mockup-body | Wireframe containers |
| Split view | .split | Side-by-side comparisons |
| Nav bar | .mock-nav | Navigation wireframes |
| Sidebar | .mock-sidebar | Sidebar layout wireframes |
| Content area | .mock-content | Main content wireframes |
| Buttons | .mock-button | Interactive element mockups |
| Tags | .tag.tag-pro / .tag.tag-con | Pros/cons labels |
Called by: /athena-brainstorm — when visual questions arise during design exploration.
Not a standalone workflow — always used within a brainstorm session, never invoked directly.