Guide · Agent skill
How to use the Blueprint Architecture Deck agent skill (deck-blueprint)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The deck-blueprint skill is a style recipe that lets an AI agent build a presentation-style HTML deck for explaining system architecture or processing pipelines. This guide is for engineers and designers who want a consistent, flat, print-friendly technical look. After reading it you will know what the skill does, how to install it, how to ask for a deck, and where it falls short.
Blueprint Architecture Decknexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the deck-blueprint ZIP from this page.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill.
- 4Describe your architecture. Ask for a 16:9 HTML deck explaining your system or pipeline, naming the stages in order.
- 5Name the key insight. Tell the agent which point belongs in the rust-red callout panel.
- 6Open and review the HTML. Open the generated single HTML file in a browser and check the layout.
What is an agent skill and what does deck-blueprint make the agent do?
An agent skill is a folder containing instructions that an AI agent loads when a task matches the skill. The deck-blueprint skill is written in Markdown (SKILL.md) and comes with a sample HTML file (example.html). It contains no executable code.
When the skill is active, the agent produces a single 16:9 HTML file with a cream background, a faint 48px blueprint grid, boxed pipeline steps with one raised for emphasis, a rust-red callout panel for key insights, large serif headings, and dashed SVG feedback loops. The style forbids gradients and soft shadows.
- Cream background (#F0EAE0) with a 48px blueprint grid mask
- Pipeline step boxes, one raised for emphasis
- Rust-red (#B5392A) insight callout on the right
- Large Playfair serif headings
- Dashed SVG feedback loops
- Flat design: no gradients, no soft shadows
Install the deck-blueprint skill
Download the ZIP from this page and unzip it. You can install the skill in one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want it available only inside that project.
Alternatively, upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/ so the deck-blueprint folder sits there
- Project only: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How do you trigger the skill with a natural request?
You do not need a special command. Describe a technical deck in plain language and mention that it is an architecture or pipeline explanation, so the agent matches the skill. The skill's intent is a serious, print-friendly architecture or pipeline walkthrough.
Name the system, the stages of the pipeline and the key insight you want highlighted. The callout panel is designed for that insight, so stating it clearly helps the layout.
- "Make a 16:9 HTML deck explaining our data ingestion pipeline for the platform team."
- "Create a printer-friendly architecture walkthrough deck of our auth service, with the key risk in a callout."
- "Build a single-file HTML slide deck showing the five stages of our ETL pipeline, with a feedback loop from monitoring back to ingestion."
What the output looks like and how to use it
The result is one HTML file. Open it in a browser to present or review it. Because the style is flat and light, it is designed to print well.
Check the example.html file in the skill folder to see the reference look before you request your own deck.
- Open the generated HTML file in any browser
- Use the example.html file as a visual reference
- Keep requests focused on one architecture or pipeline per deck
What does the skill need, and what about scripts and network?
The source lists no required dependencies. The skill does not run scripts and does not use the network, so it only shapes the agent's output style. It is a set of written instructions plus one sample file.
Because it runs no code, the main safety consideration is the usual one for any skill: review the SKILL.md and example.html contents before installing skills from any source.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Tips for better decks
Specify the audience, such as the team or stakeholders, so the agent pitches the depth correctly. Name the stages in order, since the pipeline boxes follow your sequence. Mark one stage as the emphasis point, because one box is raised.
Avoid asking for marketing visuals, photography or gradients, since the style explicitly forbids them.
- State the audience and the pipeline stages in order
- Name the one stage to emphasise
- Say which insight belongs in the rust-red callout
What people use it for
- Explaining a system architecture to an engineering team in one HTML file.
- Walking stakeholders through a data or processing pipeline, with one stage highlighted.
- Producing a printable technical walkthrough with a flat, light look.
- Showing a feedback loop, such as monitoring feeding back into an earlier stage, using the dashed SVG loop style.
Frequently asked questions
Is the deck-blueprint skill free?
The source lists the licence as Apache-2.0. Check the licence file in the download for the full terms. The source does not mention pricing.
What do I need to use deck-blueprint?
The source lists no requirements. It runs no scripts and uses no network, and it works by shaping the agent's output into an HTML deck.
How do I install the deck-blueprint skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Can I make a PowerPoint or Google Slides file with it?
No. The output is an HTML file, not an editable PowerPoint or Google Slides document. If you need an editable office file, choose a different tool.
Is deck-blueprint good for marketing decks?
No. The style forbids gradients, photography and soft shadows, so it is built for technical explanations rather than brand or marketing work.
What should I use instead for a brand or marketing presentation?
Pick a tool or skill built for brand work that allows gradients, imagery and soft shadows. The source does not name specific alternatives, so compare options yourself.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use deck-blueprint if you need a consistent, flat, print-friendly HTML deck that explains an architecture or pipeline to a team or stakeholders. Skip it for marketing or brand decks that need gradients or photography, or if you need an editable PowerPoint or Google Slides file.
Download the skill