How do I install the Slide Board Design skill?

Run npx skillmds@latest add jassonbla/slide-board-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Slide Board Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Slide Board Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Slide Board Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Slide Board Design?

jassonbla (@jassonbla) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Slide Board Design by jassonbla — Agent Skill

Name: Slide Board Design
Author: jassonbla

Slide Board Design

Core design system for building horizontal infographic "explainer boards" used to explain concepts to a team. Use when the user asks to create an explainer slide/board/infographic/presentation slide, or a single-canvas picture that explains a concept, strategy, or flow across left-to-right panels, and when producing that style in Figma or as code (React/HTML). Defines color, font, spacing, and component tokens plus the production workflow.

jassonbla Updated Sep 17, 2026

File contents

Slide Board Design (Explainer Board Core Design)

A core design system for producing horizontal infographic slides ("explainer boards") in a consistent style. A single-canvas board where 3–5 left-to-right panels form one narrative (problem → goal → concept → how-it-works → result).

When to use

"Make an explainer slide/board", "a single-canvas picture that explains this concept", "a strategy/flow infographic"
When producing the above style in Figma or as code
When adapting/extending an existing board to fit this system

Do this first

Read references/DESIGN.md to load the color/typography/spacing/component tokens. Treat that document as the single source of truth for every value (no arbitrary colors, fonts, or spacing).

Select the output profile before layout: the existing compact board remains the default; for a 16:9 Figma Slides deck, use the presentation profile in DESIGN.md instead of scaling the compact board into the slide. For Slides, also read references/figma-slides.md for production and verification. The selected profile overrides the compact dimensions summarized below.

Choosing an output method (accuracy trade-off)

Goal	Method
Pixel fidelity first	Build in Figma first, then extract with `get_design_context` → exact coordinates/sizes. Note: code becomes verbose (absolute Tailwind).
Clean, maintainable code	Write flex/grid code directly from the `references/DESIGN.md` tokens. Regular layout makes this accurate enough.
Mini diagrams (in-panel schematics)	Figma is always better (absolute-coordinate art). Even in a code-first flow, reference Figma for this part.

Default recommendation: keep Figma as the visual source of truth, build the overall cards/grid as token-based code, and extract diagrams faithfully from Figma.

Workflow

Load references/DESIGN.md.
Content design: 3–5 panels, narrative order (problem → goal → core concept → how-it-works → result). Each panel heading is one sentence ending in a verb; body is 2–3 sentences (~60 chars). Use ★ Key on only 1–2 panels.
Assemble the skeleton: header (Eyebrow/H1/Subtitle) → panel row (equal N columns, h408, gap24) → bottom flow-summary band (dark band linking headings with →).
When generating in Figma: load the figma-use skill, then author with use_figma. Use token values exactly as in DESIGN.md.
When producing code: build components from the DESIGN.md cheat-sheet tokens. Use the Inter font and the specified radius/spacing.

Core rules (summary)

Color: neutral base + one primary #2663eb accent. Use orange #f58021 only when contrasting two subjects. Green #29a666 for completion signals only.
Font: Inter. H1 38/Bold, subtitle 17/Reg, panel heading 18/Bold, body 13/Reg.
Layout: board pad 64/56/64, gap 40, radius board28/card18/band14/diagram12/chip8. Panel pad22/24 gap14, diagram box h176.
Flat design (no shadows), cards = white background + thin gray border.

See references/DESIGN.md for the full tokens, recipes, and template.

---name: slide-board-designdescription: Core design system for building horizontal infographic "explainer boards" used to explain concepts to a team. Use when the user asks to create an explainer slide/board/infographic/presentation slide, or a single-canvas picture that explains a concept, strategy, or flow across left-to-right panels, and when producing that style in Figma or as code (React/HTML). Defines color, font, spacing, and component tokens plus the production workflow.---# Slide Board Design (Explainer Board Core Design)A core design system for producing **horizontal infographic slides** ("explainer boards") in a consistent style.A single-canvas board where 3–5 left-to-right panels form one narrative (problem → goal → concept → how-it-works → result).## When to use- "Make an explainer slide/board", "a single-canvas picture that explains this concept", "a strategy/flow infographic"- When producing the above style **in Figma** or **as code**- When adapting/extending an existing board to fit this system## Do this firstRead `references/DESIGN.md` to load the color/typography/spacing/component tokens. **Treat that document as the single source of truth for every value** (no arbitrary colors, fonts, or spacing).Select the output profile before layout: the existing compact board remains the default; for a 16:9 Figma Slides deck, use the presentation profile in DESIGN.md instead of scaling the compact board into the slide. For Slides, also read `references/figma-slides.md` for production and verification. The selected profile overrides the compact dimensions summarized below.## Choosing an output method (accuracy trade-off)| Goal | Method ||---|---|| **Pixel fidelity first** | Build in Figma first, then extract with `get_design_context` → exact coordinates/sizes. Note: code becomes verbose (absolute Tailwind). || **Clean, maintainable code** | Write flex/grid code directly from the `references/DESIGN.md` tokens. Regular layout makes this accurate enough. || **Mini diagrams (in-panel schematics)** | Figma is always better (absolute-coordinate art). Even in a code-first flow, reference Figma for this part. |Default recommendation: **keep Figma as the visual source of truth**, build the overall cards/grid as token-based code, and extract diagrams faithfully from Figma.## Workflow1. Load `references/DESIGN.md`.2. Content design: 3–5 panels, narrative order (problem → goal → core concept → how-it-works → result). Each panel heading is one sentence ending in a verb; body is 2–3 sentences (~60 chars). Use `★ Key` on only 1–2 panels.3. Assemble the skeleton: header (Eyebrow/H1/Subtitle) → panel row (equal N columns, h408, gap24) → bottom flow-summary band (dark band linking headings with →).4. When generating in Figma: load the `figma-use` skill, then author with `use_figma`. Use token values exactly as in DESIGN.md.5. When producing code: build components from the DESIGN.md cheat-sheet tokens. Use the Inter font and the specified radius/spacing.## Core rules (summary)- Color: neutral base + one `primary #2663eb` accent. Use `orange #f58021` only when contrasting two subjects. Green `#29a666` for completion signals only.- Font: Inter. H1 38/Bold, subtitle 17/Reg, panel heading 18/Bold, body 13/Reg.- Layout: board pad 64/56/64, gap 40, radius board28/card18/band14/diagram12/chip8. Panel pad22/24 gap14, diagram box h176.- Flat design (no shadows), cards = white background + thin gray border.See `references/DESIGN.md` for the full tokens, recipes, and template.

Frequently asked questions