baoyu-comic
π―Skillfrom questnova502/claude-skills-sync
Generates educational comics with multiple visual styles and layouts, transforming text content into sequential narrative illustrations.
Part of
questnova502/claude-skills-sync(61 items)
Installation
npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <comic-dir>Skill Details
Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "η₯θ―ζΌ«η»", "ζθ²ζΌ«η»", "biography comic", "tutorial comic", or "Logicomix-style comic".
Overview
# Knowledge Comic Creator
Create original knowledge comics with multiple visual styles.
Usage
```bash
/baoyu-comic posts/turing-story/source.md
/baoyu-comic # then paste content
```
Options
| Option | Values |
|--------|--------|
| --style | classic (default), dramatic, warm, sepia, vibrant, ohmsha, realistic, wuxia, shoujo, or custom description |
| --layout | standard (default), cinematic, dense, splash, mixed, webtoon |
| --aspect | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) |
| --lang | auto (default), zh, en, ja, etc. |
Style Γ Layout Γ Aspect can be freely combined. Custom styles can be described in natural language.
Aspect ratio is consistent across all pages in a comic.
Auto Selection
| Content Signals | Style | Layout |
|-----------------|-------|--------|
| Tutorial, how-to, beginner | ohmsha | webtoon |
| Computing, AI, programming | ohmsha | dense |
| Pre-1950, classical, ancient | sepia | cinematic |
| Personal story, mentor | warm | standard |
| Conflict, breakthrough | dramatic | splash |
| Wine, food, business, lifestyle, professional | realistic | cinematic |
| Martial arts, wuxia, xianxia, Chinese historical | wuxia | splash |
| Romance, love, school life, friendship, emotional | shoujo | standard |
| Biography, balanced | classic | mixed |
Script Directory
Important: All scripts are located in the scripts/ subdirectory of this skill.
Agent Execution Instructions:
- Determine this SKILL.md file's directory path as
SKILL_DIR - Script path =
${SKILL_DIR}/scripts/.ts - Replace all
${SKILL_DIR}in this document with the actual path
Script Reference:
| Script | Purpose |
|--------|---------|
| scripts/merge-to-pdf.ts | Merge comic pages into PDF |
File Structure
Each session creates an independent directory named by content slug:
```
comic/{topic-slug}/
βββ source-{slug}.{ext} # Source files (text, images, etc.)
βββ analysis.md # Deep analysis results (YAML+MD)
βββ storyboard-chronological.md # Variant A (preserved)
βββ storyboard-thematic.md # Variant B (preserved)
βββ storyboard-character.md # Variant C (preserved)
βββ characters-chronological/ # Variant A chars (preserved)
β βββ characters.md
β βββ characters.png
βββ characters-thematic/ # Variant B chars (preserved)
β βββ characters.md
β βββ characters.png
βββ characters-character/ # Variant C chars (preserved)
β βββ characters.md
β βββ characters.png
βββ storyboard.md # Final selected
βββ characters/ # Final selected
β βββ characters.md
β βββ characters.png
βββ prompts/
β βββ 00-cover-[slug].md
β βββ NN-page-[slug].md
βββ 00-cover-[slug].png
βββ NN-page-[slug].png
βββ {topic-slug}.pdf
```
Slug Generation:
- Extract main topic from content (2-4 words, kebab-case)
- Example: "Alan Turing Biography" β
alan-turing-bio
Conflict Resolution:
If comic/{topic-slug}/ already exists:
- Append timestamp:
{topic-slug}-YYYYMMDD-HHMMSS - Example:
turing-storyexists βturing-story-20260118-143052
Source Files:
Copy all sources with naming source-{slug}.{ext}:
source-biography.md,source-portrait.jpg,source-timeline.png, etc.- Multiple sources supported: text, images, files from conversation
Workflow
Step 1: Analyze Content β `analysis.md`
Read source content, save it if needed, and perform deep analysis.
Actions:
- Save source content (if not already a file):
- If user provides a file path: use as-is
- If user pastes content: save to source.md in target directory
- Read source content
- Deep analysis following
references/analysis-framework.md:
- Target audience identification
- Value proposition for readers
- Core themes and narrative potential
- Key figures and their story arcs
- Detect source language
- Determine recommended page count:
- Short story: 5-8 pages
- Medium complexity: 9-15 pages
- Full biography: 16-25 pages
- Analyze content signals for style/layout recommendations
- Save to
analysis.md
analysis.md Format:
```yaml
---
title: "Alan Turing: Father of Computing"
topic: Biography
time_span: 1912-1954
source_language: en
user_language: zh
aspect_ratio: "3:4"
recommended_page_count: 12
---
Target Audience
- Primary: Tech enthusiasts curious about computing history
- Secondary: Students learning about scientific breakthroughs
- Tertiary: General readers interested in biographical stories
Value Proposition
What readers will gain:
- Understanding of how modern computing was born
- Emotional connection to a brilliant but tragic figure
- Appreciation for the human cost of innovation
Core Themes
| Theme | Narrative Potential | Visual Opportunity |
|-------|--------------------|--------------------|
| Genius vs. Society | High conflict, dramatic arcs | Contrast scenes |
| Code-breaking | Mystery, tension | Technical diagrams as art |
| Personal tragedy | Emotional depth | Intimate, somber panels |
Key Figures & Story Arcs
Alan Turing (Protagonist)
- Arc: Misunderstood genius β War hero β Tragic end
- Visual identity: Disheveled academic, intense eyes
- Key moments: Enigma breakthrough, arrest, final days
Christopher Morcom (Catalyst)
- Role: Early friend whose death shaped Turing
- Visual identity: Youthful, bright
- Key moments: School friendship, sudden death
Content Signals
- "biography" β classic + mixed
- "computing history" β ohmsha + dense
- "personal tragedy" β dramatic + splash
Recommended Approaches
- Chronological - follow life timeline (recommended for biography)
- Thematic - organize by contributions (good for educational focus)
- Character-focused - relationships drive narrative (good for emotional impact)
```
Step 2: Generate 3 Storyboard Variants
Create three distinct variants, each combining a narrative approach with a recommended style.
| Variant | Narrative Approach | Recommended Style | Layout |
|---------|-------------------|-------------------|--------|
| A | Chronological | sepia | cinematic |
| B | Thematic | ohmsha | dense |
| C | Character-focused | warm | standard |
For each variant:
- Generate storyboard (
storyboard-{approach}.md):
- YAML front matter with narrative_approach, recommended_style, recommended_layout, aspect_ratio
- Cover design
- Each page: layout, panel breakdown, visual prompts
- Written in user's preferred language
- Reference: references/storyboard-template.md
- Generate matching characters (
characters-{approach}/):
- characters.md - visual specs matching the recommended style (in user's preferred language)
- characters.png - character reference sheet
- Reference: references/character-template.md
All variants are preserved after selection for reference.
Step 3: User Confirms All Options
IMPORTANT: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
Determine which questions to ask:
| Question | When to Ask |
|----------|-------------|
| Storyboard variant | Always (required) |
| Visual style | Always (required) |
| Language | Only if source_language β user_language |
| Aspect ratio | Only if user might prefer non-default (e.g., landscape content) |
Language handling:
- If source language = user language: Just inform user (e.g., "Comic will be in Chinese")
- If different: Ask which language to use
All storyboards and prompts are generated in the user's selected/preferred language.
Aspect ratio handling:
- Default: 3:4 (portrait) - standard comic format
- Offer 4:3 (landscape) if content suits it (e.g., panoramic scenes, technical diagrams)
- Offer 16:9 (widescreen) for cinematic content
AskUserQuestion format (example with all questions):
```
Question 1 (Storyboard): Which storyboard variant?
- A: Chronological + sepia (Recommended)
- B: Thematic + ohmsha
- C: Character-focused + warm
- Custom
Question 2 (Style): Which visual style?
- sepia (Recommended from variant)
- classic / dramatic / warm / sepia / vibrant / ohmsha / realistic / wuxia
- Custom description
Question 3 (Language) - only if mismatch:
- Chinese (source material language)
- English (your preference)
Question 4 (Aspect) - only if relevant:
- 3:4 Portrait (Recommended)
- 4:3 Landscape
- 16:9 Widescreen
```
After confirmation:
- Copy selected storyboard β
storyboard.md - Copy selected characters β
characters/ - Update YAML front matter with confirmed style, language, aspect_ratio
- If style differs from variant's recommended: regenerate
characters/characters.png - User may edit files directly for fine-tuning
Step 4: Generate Images
With confirmed storyboard + style + aspect ratio:
For each page (cover + pages):
- Save prompt to
prompts/NN-{cover|page}-[slug].md(in user's preferred language) - Generate image using confirmed style and aspect ratio
- Report progress after each generation
Image Generation Skill Selection:
- Check available image generation skills
- If multiple skills available, ask user preference
Character Reference Handling:
- If skill supports reference image: pass
characters/characters.png - If skill does NOT support reference image: include
characters/characters.mdcontent in prompt
Session Management:
If image generation skill supports --sessionId:
- Generate unique session ID:
comic-{topic-slug}-{timestamp} - Use same session ID for all pages
- Ensures visual consistency across generated images
Step 5: Merge to PDF
After all images generated:
```bash
npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts
```
Creates {topic-slug}.pdf with all pages as full-page images.
Step 6: Completion Report
```
Comic Complete!
Title: [title] | Style: [style] | Pages: [count] | Aspect: [ratio] | Language: [lang]
Location: [path]
β analysis.md
β characters.png
β 00-cover-[slug].png ... NN-page-[slug].png
β {topic-slug}.pdf
```
Page Modification
Support for modifying individual pages after initial generation.
Edit Single Page
Regenerate a specific page with modified prompt:
- Identify page to edit (e.g.,
03-page-enigma-machine.png) - Update prompt in
prompts/03-page-enigma-machine.mdif needed - If content changes significantly, update slug in filename
- Regenerate image using same session ID and aspect ratio
- Regenerate PDF
Add New Page
Insert a new page at specified position:
- Specify insertion position (e.g., after page 3)
- Create new prompt with appropriate slug (e.g.,
04-page-bletchley-park.md) - Generate new page image (same aspect ratio)
- Renumber files: All subsequent pages increment NN by 1
- 04-page-tragedy.png β 05-page-tragedy.png
- Slugs remain unchanged
- Update
storyboard.mdwith new page entry - Regenerate PDF
Delete Page
Remove a page and renumber:
- Identify page to delete (e.g.,
03-page-enigma-machine.png) - Remove image file and prompt file
- Renumber files: All subsequent pages decrement NN by 1
- 04-page-tragedy.png β 03-page-tragedy.png
- Slugs remain unchanged
- Update
storyboard.mdto remove page entry - Regenerate PDF
File Naming Convention
Files use meaningful slugs for better readability:
```
NN-cover-[slug].png / NN-page-[slug].png
NN-cover-[slug].md / NN-page-[slug].md (in prompts/)
```
Examples:
00-cover-turing-story.png01-page-early-life.png02-page-cambridge-years.png03-page-enigma-machine.png
Slug rules:
- Derived from page title/content (kebab-case)
- Must be unique within the comic
- When page content changes significantly, update slug accordingly
Renumbering:
- After add/delete, update NN prefix for affected pages
- Slug remains unchanged unless content changes
- Maintain sequential numbering with no gaps
Style-Specific Guidelines
Ohmsha Style (`--style ohmsha`)
Additional requirements for educational manga:
- Default: Use Doraemon characters directly - No need to create new characters
- ε€§ι (Nobita): Student role, curious learner
- εε¦Aζ’¦ (Doraemon): Mentor role, explains concepts with gadgets
- θθ (Gian): Antagonist/challenge role, represents obstacles or misconceptions
- ιι¦ (Shizuka): Supporting role, asks clarifying questions
- Custom characters only if explicitly requested:
--characters "Student:ε°ζ,Mentor:ζζ" - Must use visual metaphors (gadgets, action scenes) - NO talking heads
- Page titles: narrative style, not "Page X: Topic"
Reference: references/ohmsha-guide.md for detailed guidelines.
References
Detailed templates and guidelines in references/ directory:
analysis-framework.md- Deep content analysis for comic adaptationcharacter-template.md- Character definition format and examplesstoryboard-template.md- Storyboard structure and panel breakdownohmsha-guide.md- Ohmsha manga style specificsstyles/- Detailed style definitionslayouts/- Detailed layout definitions
Extension Support
Custom styles and configurations via EXTEND.md.
Check paths (priority order):
.baoyu-skills/baoyu-comic/EXTEND.md(project)~/.baoyu-skills/baoyu-comic/EXTEND.md(user)
If found, load before Step 1. Extension content overrides defaults.
More from this repository10
jira-integration skill from questnova502/claude-skills-sync
Skill
liubin-post-to-weibo skill from questnova502/claude-skills-sync
Skill
liubin-weibo-autopilot skill from questnova502/claude-skills-sync
Generates multi-channel demand generation strategies for Series A+ startups, optimizing paid media, SEO, and partnerships to drive cost-effective customer acquisition.
Skill
Generates personalized, ATS-optimized resumes by analyzing job descriptions and strategically highlighting candidate's most relevant skills and achievements.
Generates images and text using Google Gemini Web API with user consent and risk acknowledgment.
Manages Microsoft 365 tenant administration by automating setup, user management, security policies, and organizational optimization for Global Administrators.