Skip to the rows

agentsclimarketplace

Slide board design

Skill jassonbla/skills/skills/slide-board-design

Install

npx -y skills add jassonbla/skills --skill slide-board-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

3.1 KB, as published. Nobody here has run it

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).

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.