Skip to content
Get packs

Blueprint Architecture Deck

Builds engineering-style slide decks with a blueprint grid, cream background, and pipeline diagrams

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

When this skill is installed, the agent can create a presentation-style HTML deck that explains architecture or processing pipelines in a printer-friendly look: a cream background with a faint 48px blueprint grid, boxed pipeline steps (one raised for emphasis), a rust-red callout panel for key insights, large serif headings, and dashed SVG feedback loops. The skill is a style recipe written in Markdown with a sample HTML file; it does not contain executable code.

Great for

  • Engineers who need to explain a system architecture or data pipeline to a team or stakeholders
  • Designers who want a consistent, flat, print-friendly technical slide style with no gradients or soft shadows
  • Anyone producing a 16:9 technical walkthrough deck as a single HTML file

Skip it if

  • Marketing decks or brand work needing gradients, photography, or soft shadows, since the style explicitly forbids them
  • Users who need a native PowerPoint or Google Slides file, because the output is HTML rather than an editable office document

Try asking

  • “Make a 16:9 deck explaining our ingestion pipeline with boxed steps and a highlighted insight callout”
  • “Create an architecture overview slide deck in the blueprint style with a dashed feedback loop between services”
  • “Turn these engineering notes into a printable cream-and-rust technical presentation”
Step-by-step guide: how to use Blueprint Architecture DeckInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    deck-blueprint.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip deck-blueprint.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip deck-blueprint.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the pipeline steps and which step should be emphasised so the raised box lands on the right element.
  • Ask for a single self-contained HTML file if you want to open or print it without extra setup.
  • Note that the Playfair serif font is referenced by the style; check it is available on your machine or the layout may fall back to a default serif.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.