---
name: vince-whiteboard
version: 1.1.0
metadata:
  icon: ':lucide:layout-template:'
  title: Vince Whiteboard
  packageName: '@zjxuyunshi/vince-whiteboard'
  version: 0.0.2
description: |
  Generate polished whiteboard-style visual explainers, diagrams, posters, and infographics as local SVG plus correctly rendered PNG files. Use this when the user wants a beautiful board image in a specific visual style, asks for a whiteboard PNG, or wants content turned into a designed visual artifact with no remote whiteboard dependency. The skill provides curated palette styles, Vince's preferred style defaults, SVG composition rules, a render-and-inspect workflow, and local PNG output.
---

# Vince Whiteboard

A local whiteboard image skill: curated colour palette styles plus Vince's preferred defaults and a strict
**SVG to PNG verification workflow** for making polished whiteboard-style visuals.

This skill does **not** create online docs, does **not** upload anything, and does **not** depend on
a remote whiteboard service. The normal deliverable is:

- source SVG
- rendered PNG
- optional short note naming the style and output paths

## When To Use

- The user wants a whiteboard, infographic, diagram, poster, visual explainer, teaching graphic, or
  concept map as a local image.
- The user asks for a PNG board or says they only need a local rendered image.
- The user names one of the bundled styles, or asks for a specific visual vibe.

## Step 0: Prerequisites

Run [`scripts/preflight.sh`](scripts/preflight.sh), or check manually:

- Node 20 or newer.
- Network access for first-time `npx` use.
- `sharp-cli`, used through `npx -y sharp-cli`, for SVG to PNG rendering.

No external account, browser login, or document token is required.

## Workflow

1. **Understand the board.** Identify the content, purpose, audience, target platform, and preferred
   aspect ratio. If the content or output size is unclear, ask one short question.
2. **Ask or infer the vibe.** Ask for a visual style if needed. If the user has no preference, pick a
   fitting style from [`CATALOG.md`](CATALOG.md), prioritizing Vince's preferred styles below.
3. **Pick a style.** Use [`CATALOG.md`](CATALOG.md) to match vibe and formality to one of the 24
   styles. Tell the user which style you chose and why, in one line.
4. **Build the SVG.** Read [`RULES.md`](RULES.md) and the chosen
   [`templates/<slug>/design.md`](templates/). Compose the board in SVG using simple shapes and text.
   Layout is your job; the template only provides palette and mood.
5. **Render and inspect.** Use [`scripts/render_png.sh`](scripts/render_png.sh), open the PNG, and fix
   visible issues: text overflow, cramped padding, accidental overlap, clipping, low contrast, or
   unreadable scale. Iterate until the PNG is correct.
6. **Deliver.** Return the PNG path and SVG path. If helpful, embed the PNG in the response with a
   Markdown image tag using its absolute path. Offer style switching only when it would be useful.

## Vince Style Preferences

When the user does not name a style, prefer these styles before the general catalogue:

1. **Checker Bloom** — friendly, hand-painted, clear, good for口播插图 and concept explainers.
2. **Lime Slab** — electric, modern SaaS, good for AI tool and workflow diagrams.
3. **Grove Block** — confident green, brand-forward, good for practical operational diagrams.
4. **Specimen Bold** — graphic and loud, good for single strong claims or title-card inserts.
5. **Violet Marker** — highlighter-like and friendly, good for casual teaching boards.
6. **Cut Bloom** — softer and calmer, good when the board should not overpower the speaker.
7. **Avocado Press** — clean duotone, good for concise comparison and process diagrams.

Avoid defaulting to Raw Grid or Mint Brut for Vince unless explicitly requested; they have already
felt too hard or too candy-like for his current口播 inserts.

## Files

- [`RULES.md`](RULES.md): local SVG composition and PNG verification rules. Always read this.
- [`CATALOG.md`](CATALOG.md): styles with vibe and formality. Use it to choose.
- [`templates/<slug>/design.md`](templates/): one style file per palette.
- [`assets/styles/`](assets/styles/): reference previews for each style.
- [`scripts/preflight.sh`](scripts/preflight.sh): dependency check.
- [`scripts/render_png.sh`](scripts/render_png.sh): render an SVG file to PNG locally.