Canghe Comic
freestylefly/canghe-skills
Knowledge comic creator supporting multiple art styles and tones.
Produce a mock-audit storyboard — a single HTML page embedding related UX surfaces side-by-side, with per-mock audit checklists, a flow diagram, and gap cards for missing mocks.
Install Storyboard
$ npx skills add citypaul/.dotfiles --skill storyboard -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install citypaul/.dotfiles storyboard --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/claude/.claude/skills/storyboard .claude/skills/storyboard && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "storyboard" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboard into .claude/skills/storyboard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storyboard", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboardType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add citypaul/.dotfiles --skill storyboard -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install citypaul/.dotfiles storyboard --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/claude/.claude/skills/storyboard .agents/skills/storyboard && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "storyboard" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboard into .agents/skills/storyboard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storyboard", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add citypaul/.dotfiles --skill storyboard -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install citypaul/.dotfiles storyboard --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/claude/.claude/skills/storyboard .cursor/skills/storyboard && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "storyboard" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboard into .cursor/skills/storyboard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storyboard", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/citypaul/.dotfiles.git --path claude/.claude/skills/storyboard--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add citypaul/.dotfiles --skill storyboard -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install citypaul/.dotfiles storyboard --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/claude/.claude/skills/storyboard .gemini/skills/storyboard && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "storyboard" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboard into .gemini/skills/storyboard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storyboard", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install citypaul/.dotfiles storyboardInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add citypaul/.dotfiles --skill storyboard -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/claude/.claude/skills/storyboard .github/skills/storyboard && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "storyboard" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboard into .github/skills/storyboard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storyboard", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add citypaul/.dotfiles --skill storyboard -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install citypaul/.dotfiles storyboard --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/claude/.claude/skills/storyboard .opencode/skills/storyboard && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "storyboard" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/storyboard into .opencode/skills/storyboard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "storyboard", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
storyboard- GitHub stars
- 740
- Token cost
- ~4.2k tokens
- SKILL.md length
- 2,205 words
- Files
- 1
- Skills in repo
- 44
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Produce a mock-audit storyboard — a single HTML page embedding related UX surfaces side-by-side, with per-mock audit checklists, a flow diagram, and gap cards for missing mocks.
- Works in 9 steps: Breadcrumb → Header → Flow diagram → …
- Reviewing several mocks together would materially reduce context-switching
- SKILL.md covers When to produce one, When NOT to produce one, Inputs the skill gathers and Output location, plus 10 more sections
- Calls prettier
What it does
Storyboard is an agent skill from citypaul/.dotfiles. Produce a mock-audit storyboard — a single HTML page embedding related UX surfaces side-by-side, with per-mock audit checklists, a flow diagram, and gap cards for missing mocks. Use when reviewing several mocks together would materially reduce context-switching or expose cross-surface gaps, or when the user asks to see or audit a whole flow in one place.
Its SKILL.md is about 4.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Comics and storyboards, HTML artifacts and Audit readiness.
When your agent uses it
- Reviewing several mocks together would materially reduce context-switching
- Expose cross-surface gaps
- The user asks to see
- Audit a whole flow in one place
Example prompts
- “/storyboard”
Workflow steps
9 steps, taken from the step headings in SKILL.md.
- Breadcrumb
- Header
- Flow diagram
- Existing mocks (side-by-side)
- Transition / state gaps
- Gaps to fill
- Upstream / adjacent (for context)
- Proposed sequence
- Footer
What it can do on your machine
Read from SKILL.md and the folder at commit cd4028d. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
prettier
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Storyboard loads about 4.2k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 2,205 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 2,205 words (~4,164 tokens).
“A storyboard is a single reviewable HTML page that stitches every UX surface in a scope of work into one view. Existing mocks are embedded as sandboxed elements only when they are authoritative and safe to load; otherwise the page…”
- name
- storyboard
Files
Just SKILL.md in claude/.claude/skills/storyboard of citypaul/.dotfiles.
Open the folder on GitHubat commit cd4028d
Compare with similar skills
Storyboard next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Storyboard this skillcitypaul/.dotfiles | 740 | — | ~4.2k | Automated safety check: Pass | Custom licence | |
| Canghe Comicfreestylefly/canghe-skills | 461 | 8 repos | ~3.2k | Automated safety check: Pass | None | |
| Tutti UI Systemtutti-os/tutti | 3.8k | — | ~2.7k | Automated safety check: Pass | Apache-2.0 | |
| SN Motion HTMLOpenSenseNova/SenseNova-Skills | 5.7k | — | ~2.2k | Automated safety check: Notes | MIT | |
| Math ExplainerGordenSun/mathVideoMaker | 290 | 1 repos | ~2.4k | Automated safety check: Pass | None | |
| 3D Animation Short Generatortl2012tl/comfyUI-llama-TE | 241 | 4 repos | ~3.7k | Automated safety check: Pass | None |
Similar skills
Tutti UI System
tutti-os/tutti
A skill your agent uses when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business…
SN Motion HTML
OpenSenseNova/SenseNova-Skills
Builds HTML stories where one continuous camera journey advances with page progress, using researched structure, AI stills, Seedance video clips and browser QA.
Math Explainer
GordenSun/mathVideoMaker
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
3D Animation Short Generator
tl2012tl/comfyUI-llama-TE
Create complete stylized 3D animated shorts from a story idea through an ordered production workflow covering project brief, story outline, character and environment cards, standardized shot…
Text to PNG Card Caster
lijigang/ljg-skills
Turns text, URLs or local files into tall PNG cards through HTML typography, with four modes: long reading card, full-text layout, comic and whiteboard.
More from citypaul/.dotfiles
All 44 skills in this repoFind Skills
citypaul/.dotfiles
Discover and, with authorization, install agent skills from the open skills ecosystem.
Render Code Shape
citypaul/.dotfiles
Render the shape of code — module boundaries, the types that cross them, signatures, and a cited call graph — for code that already exists or a change about to be built.
Structure Codebase
citypaul/.dotfiles
Design, audit, and evolve physical source and package structures that expose real architectural boundaries while keeping related behavior together.
Test Design Reviewer
citypaul/.dotfiles
Review test quality using Dave Farley's eight properties of good tests.
Characterisation Tests
citypaul/.dotfiles
A skill your agent uses when modifying existing code that lacks tests and you need to document its actual current behavior before making changes -- the legacy code dilemma where you need tests to…
CI Debugging
citypaul/.dotfiles
Systematic CI/CD failure diagnosis using hypothesis-first investigation, local reproduction, and environment delta analysis.
Related
Categories
Questions about Storyboard
What does Storyboard do?
Produce a mock-audit storyboard — a single HTML page embedding related UX surfaces side-by-side, with per-mock audit checklists, a flow diagram, and gap cards for missing mocks. dotfiles. Produce a mock-audit storyboard — a single HTML page embedding related UX surfaces side-by-side, with per-mock audit checklists, a flow diagram, and gap cards for missing mocks.
When should I use Storyboard?
Storyboard fits situations like: reviewing several mocks together would materially reduce context-switching; expose cross-surface gaps; the user asks to see; audit a whole flow in one place.
How do I install Storyboard in Claude Code?
Run `npx skills add citypaul/.dotfiles --skill storyboard -a claude-code`. Or copy the skill folder (claude/.claude/skills/storyboard in citypaul/.dotfiles) into .claude/skills/storyboard in your project. Claude Code loads it when a task matches its description.
How do I install Storyboard in Codex?
Run `npx skills add citypaul/.dotfiles --skill storyboard -a codex`. Or copy the skill folder (claude/.claude/skills/storyboard in citypaul/.dotfiles) into .agents/skills/storyboard in your project. Codex loads it when a task matches its description.
Can I use Storyboard in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add citypaul/.dotfiles --skill storyboard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/storyboard, .gemini/skills/storyboard, .github/skills/storyboard and .opencode/skills/storyboard in your project.
What does Storyboard need to run?
Going by SKILL.md and its folder, Storyboard needs the command-line tools its instructions call (prettier).
Does Storyboard access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Storyboard safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Storyboard use?
Storyboard has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Storyboard use?
About 4.2k tokens (SKILL.md is roughly 17k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Storyboard?
Skills that share tags, products or a category with Storyboard: Canghe Comic (freestylefly/canghe-skills, 461 stars), Tutti UI System (tutti-os/tutti, 3.8k stars), SN Motion HTML (OpenSenseNova/SenseNova-Skills, 5.7k stars) and Math Explainer (GordenSun/mathVideoMaker, 290 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Storyboard?
citypaul (a GitHub user) maintains it in citypaul/.dotfiles, which has 740 GitHub stars. The repository holds 44 skills in this directory. The repository was last updated on October 9, 2026.
Source: citypaul/.dotfiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.