Menu
Locks visual design style. Decides layout, color palette, font family and saves design_spec.md. Can analyze reference URLs/images. Responds to "lock design", "pick colors/fonts", "make design spec" . Stage 4 of the workflow.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Runs the full project sync pipeline — lifecycle update, audit, L0→L1 publish, commit, push, and PR creation.
Runs the full project sync pipeline — lifecycle update, audit, L0→L1 publish, commit, push, and PR creation.
Turn a topic or your own materials into a single self-contained, interactive HTML report — top tabs, clickable reference drawers, dense tables, comparison heatmaps, inline SVG, in-page search, a light/dark theme toggle, and multilingual support. Use when: user says "/explain-me", "/reportme", "make a report", "create report", "explain this topic". Inspired by beret21/reportme.
Document Production Workflow for co-deck — generates searchable, themed handbooks as static sites (GitHub Pages). Three modes: standalone handbook, lecture companion (reads co-deck slide_deck.md), full course site. Responds to "make handbook", "create handbook", "build course site", "companion handbook" (triggered by Korean phrases too). H-Stage pipeline (H-0 through H-7). Independent from the 11-Stage slide pipeline.
Turn a topic or your own materials into a single self-contained, interactive HTML report — top tabs, clickable reference drawers, dense tables, comparison heatmaps, inline SVG, in-page search, a light/dark theme toggle, and multilingual support. Use when: user says "/explain-me", "/reportme", "make a report", "create report", "explain this topic". Inspired by beret21/reportme.
Pre-edit fact-forcing quality gate. Ensures agents investigate a file's importers, schemas, and scope constraints before making changes. Part of the 3-layer enforcement model (Hook → Prompt → Skill).
| name | design |
| scope | co-deck |
| version | 1.2.0 |
| description | Locks visual design style. Decides layout, color palette, font family and saves design_spec.md. Can analyze reference URLs/images. Responds to "lock design", "pick colors/fonts", "make design spec" . Stage 4 of the workflow. |
| status | active |
| owner | design |
| last_reviewed | "2026-06-19T00:00:00.000Z" |
| prerequisites | storyline |
Locks the visual design — layout, colors, and fonts — into design_spec.md. This file is the shared reference for HTML generation and PDF export. Invoked at Stage 4, after Gate 2 (content approval) is passed.
Confirm with the user (skip anything already mentioned):
If a reference URL is provided, open it in Claude in Chrome and analyze colors and fonts.
Decide on at least 8 role-based colors:
| Role | Name | HEX | RGB |
|---|---|---|---|
| Slide background | slide-bg | ||
| Header / dark bg | bg-dark | ||
| Title text | title-color | ||
| Body text | body-color | ||
| Accent | accent | ||
| Muted text | muted | ||
| Border | border | ||
| Visual panel bg | vis-bg |
Decide in CSS px (HTML). Auto-converted to pt during PDF export.
| Element | CSS px | Note |
|---|---|---|
| Slide title | ||
| Bullet text | ||
| Header section label | ||
| Right panel title | ||
| Right panel body | ||
| Divider part number | ||
| Divider title | ||
| Divider description | ||
| Cover main title | ||
| Cover subtitle |
Save the decisions above as design_spec.md in the workspace.
Bundling CSS variables makes the HTML stage directly consumable:
:root {
--slide-bg: ; /* slide background */
--bg-dark: ; /* header / dark elements */
--accent-color: ; /* accent highlights */
--primary-color: ; /* title text */
--text-muted: ; /* muted / secondary text */
--border-color: ; /* borders */
--vis-bg: ; /* visual panel background */
--font-family: , serif; /* Korean-compatible font */
}
presentations/<project>/design_spec.md containing: layout decisions, 8-color palette table (with HEX/RGB), font family and size table, CSS variables block.
storyline — provides slide_deck.md that drives layout decisionshtml-build — consumes design_spec.md CSS variablesmeasure — uses font/color info from design_spec.md for PDF preparation