Ian Xiaohei Handdrawn Skill

Ian Xiaohei Handdrawn PPT Skill

Scope

This built-in skill package owns the ian-xiaohei-handdrawn template variant inspired by the upstream illustration project helloianneo/ian-xiaohei-illustrations.

• skill_id: ian-xiaohei-handdrawn-skill
• variant_id: ian-xiaohei-handdrawn
• upstream project: helloianneo/ian-xiaohei-illustrations
• upstream URL: https://github.com/helloianneo/ian-xiaohei-illustrations
• upstream source type: content-driven illustration image set
• package renderer: assets/template.html
• package workspace CSS: assets/workspace.css
• package validator: scripts/validate-deck.mjs
• layout skeletons: references/layouts.md
• component guide: references/components.md
• transparent image gallery: references/image-gallery.md
• QA checklist: references/checklist.md

This package turns the visual language of helloianneo/ian-xiaohei-illustrations into a reusable web-PPT template contract.

Core style:

• 16:9 near-white explanation board with generous blank space.
• Black handdrawn lines, imperfect borders, doodle arrows, and loose spacing.
• Xiaohei appears through the local transparent PNG gallery as explainer, guide, or narrator.
• Default illustrations come from the local transparent PNG gallery. Treat them as content metaphors and make them visually important, not tiny stickers.
• Only sparse red-orange and blue accents for notes, arrows, labels, and emphasis.
• HTML panels, paper cards, notes, arrows, narrator bubbles, stickers, tape, stamps, photo frames, stack layers, scribble underlines, and chips should echo the gallery style: black handdrawn lines, imperfect double borders, loose circled notes, transparent paper washes, and only light hard-offset paper shadows.
• Workspace-generated decks must use assets/workspace.css for the same handdrawn linework; do not fall back to standard rectangular panels, dashed placeholder boxes, pill chips, or font glyph check/cross icons.
• Slides should feel like horizontal handdrawn explanation boards, not conventional corporate presentation cards.

Generation rules:

• Use .visual-slide > .pm-canvas.pm-xiaohei-handdrawn.
• Choose one registered layout from references/layouts.md. First classify the page intent, then pick the matching Xiaohei layout.
• Include at least one handdrawn component on every slide, preferably .pm-xiaohei-illustration from the local gallery; supporting components can be .pm-xiaohei-bubble, .pm-xiaohei-sticker, .pm-xiaohei-tape, .pm-xiaohei-stamp, .pm-xiaohei-photo-frame, .pm-xiaohei-stack-layer, .pm-xiaohei-paper-card, .pm-xiaohei-callout-note, .pm-xiaohei-scribble, .pm-xiaohei-bracket, .pm-xiaohei-doodle, .pm-xiaohei-arrow, or .pm-xiaohei-note.
• Prefer one local transparent gallery image on each slide for default generation. Use generated replacement images only when the user explicitly asks to change a specific image/page visual.
• Avoid pure card-list pages; combine short text blocks with a Xiaohei action, narrator bubble, arrow, scribble underline, sticker reminder, tape/stamp, paper object, evidence frame, stack layer, process, or object metaphor.
• Use image role and size classes deliberately. Every illustration must include one role class (.is-anchor for the page's main visual, or .is-cue for a small supporting cue) and one size class (.is-xs, .is-sm, .is-md, .is-lg, .is-xl, .is-strip, plus legacy .is-small, .is-wide, .is-hero).
• Avoid filled business cards, perfect rectangles, heavy shadows, and dense grid layouts.
• Use CSS linework for check/cross marks via .pm-xiaohei-mark.is-check and .pm-xiaohei-mark.is-cross; do not use raw ✓, ×, or standard icon glyphs as visible marks.
• Gallery images must contain no embedded text. Put all labels, notes, and captions in HTML so the deck remains editable and reusable.
• Keep text short and conversational. Prefer labels, arrows, and callout notes over long paragraphs.
• Never truncate visible content with ellipses, line clamps, or hidden overflow as a design solution. If copy does not fit, shorten it, split it into another slide, or choose a roomier layout.
• Do not fetch or embed remote GitHub assets. Use the local transparent image gallery for Xiaohei figures; do not CSS-draw Xiaohei characters.