Guide · Agent skill
How to use the Poster-Series Case Study HTML Deck agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
This guide explains how to install and use the Poster-Series Case Study HTML Deck agent skill (skill name html-ppt-zhangzara-raw-grid), which gives an AI agent a ready-made, bold neo-brutalist HTML slide template for presenting a design case study. You do not need prior experience with agent skills. By the end you will know what the skill does, how to add it to your agent, how to ask for a deck in a way that triggers it, and what to check before you share the result.
Poster-Series Case Study HTML Decknexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from this page. Keep the file name so you can find it later.
- 2Install the skill. Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. Alternatively, upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 3Describe your deck. Ask for a design case-study HTML deck in plain language, and include the audience, the decision you want to drive and your key numbers.
- 4Review the draft. Open the generated HTML file in a browser and check each slide, headline and number against your source material.
- 5Refine the slides. Ask the agent to add, remove or duplicate slides, or to design a missing layout in the same style.
What the skill makes the agent do
This skill gives an AI agent a single-file HTML slide template with a neo-brutalist look: thick borders, offset shadows, and a pink, sage and ink colour palette. When you ask for a design case-study presentation, the agent copies the template, replaces the placeholder content with your own headlines, numbers and images, and keeps the original fonts and decorative style intact.
The agent can also design extra slide layouts in the same style and change the deck length by duplicating or removing slides.
- Starts from the template's example.html file as the working copy.
- Swaps in your headlines, body copy, numbers, names, dates and section labels.
- Keeps the fonts, palette, corner brackets, paper grain and geometric shapes as they are.
- Adds new layouts in the same visual vocabulary when the template lacks one.
How to install the skill
Download the skill ZIP from this page. Then add it to your agent in one of two ways.
Option one is to unzip it into a skills folder. Use ~/.claude/skills/ for all your projects, or a .claude/skills/ folder inside a single project. Option two is to upload the ZIP in the Claude apps under Settings, then Capabilities, then Skills.
- Personal install: unzip into ~/.claude/skills/.
- Project install: unzip into the .claude/skills/ folder of that project.
- App install: upload the ZIP under Settings → Capabilities → Skills.
How to trigger the skill with natural requests
You do not need to type the skill name. Describe a design case-study deck in plain language and mention a slide or HTML deck. The skill is tagged with terms such as html deck, html slides, design, brand and visual-system, so requests that use these words are the most likely to match.
The more detail you give up front, the better the first draft. The skill's own example asks for the audience, the decision you want the deck to support, your source material, the deadline and any numbers that must stay exact.
- Make an HTML slide deck for my poster-series case study for a music festival, for design peers.
- Build html slides showing the concept, the visual system and how the posters scaled across formats.
- Use the raw grid brand deck style for a client presentation about our brand identity work.
- Before you draft, ask me for the audience, decision target and must-keep numbers.
Work through the template with the agent
The skill sets a clear workflow. The agent clones example.html into your workspace, replaces the placeholder content, and keeps the design system unchanged. If your content is longer than the 10-slide demo, the agent duplicates a slide with a suitable layout. If it is shorter, the agent removes slides from the end and updates the page-number labels.
The skill also instructs the agent to keep any navigation runtime as shipped. If the deck includes an assets/deck-stage.js file or an inline keyboard handler, that code should stay in place.
- Open the finished file in a browser to review it; it is a single self-contained HTML deck.
- Check that every number and name matches your source material.
- Ask the agent to add a new layout if a slide needs one; it should reuse the same fonts, palette and decorative elements.
- Do not ask for different fonts or colours if you need to match another brand identity, because the skill tells the agent not to change them.
What the skill needs and safety notes
The listing shows no required dependencies. The skill does not run scripts and does not use the network, according to its listing. Its output is a single HTML file.
The licence is listed as Apache-2.0. The SKILL.md notes that the underlying template comes from an MIT-licensed upstream project, and that the full MIT licence text, with the original copyright notice, should ship alongside any copy of example.html, template.json or vendored assets. The listing's file list names example.html, SKILL.md and template.json, so check the ZIP you downloaded for a LICENSE file before you redistribute the deck.
- Requires: nothing listed.
- Runs scripts: no.
- Uses network: no.
- Redistribution: keep the upstream MIT licence notice with copies of the template files.
Tips for a stronger deck
The skill is strongest for stat slides, comparison tables and process flows, and it works best with a short brief that states the decision your audience needs to make. Because the layout is dense and loud, keep each slide focused on one point.
Use this skill only when the loud look fits your audience. For quieter or more formal decks, choose a different template.
- Give the agent exact figures and say which ones must not change.
- Ask for a critic pass to check whether the deck reads as senior work rather than generated.
- Keep text short on each slide, since the template is designed for high-density, direct messages.
- Review the deck in the browser on the device your audience will use.
What people use it for
- A designer presenting a poster series case study to design peers, showing the concept, system and format scaling.
- A founder or creator building a graphic, confident pitch or portfolio deck.
- A brand team making a single self-contained HTML slide file to open in any browser.
- An agency drafting a client-facing design deck with stat slides and comparison tables.
Frequently asked questions
How do I install the Poster-Series Case Study HTML Deck agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings, then Capabilities, then Skills.
Does this skill require any other software or dependencies?
The listing shows nothing required. The skill does not run scripts and does not use the network, so it works by producing a single HTML file that you open in a browser.
Is the skill free to use, and what is the licence?
The listing gives the licence as Apache-2.0. The SKILL.md says the underlying template is from an MIT-licensed upstream project and that the MIT licence text should accompany copies of the template files.
What is the difference between this skill and a normal HTML slide template?
A normal template is a file you edit yourself. This skill lets an AI agent fill the template with your content, keep its fonts and style, and add layouts in the same look, so you do not have to edit the HTML by hand.
What should I do if the agent changes the fonts or colours?
The skill tells the agent never to change fonts, palette or decorative elements. Ask it to restore the original styling from example.html, and check that the corner brackets, paper grain and shapes are still present.
Is this skill a good alternative for a formal corporate presentation?
Usually not. The thick borders and offset shadows give a loud graphic voice, and the skill's own guidance says to avoid it for soft, warm or quiet contexts. Choose a more restrained template for formal corporate decks.
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 this skill if you are a designer, founder or creator who needs a bold, graphic HTML deck that is easy to share as one file and that the agent can fill with your own content. Pick a different template if you need a formal or quiet look, or if your project requires its own brand fonts and colours.
Download the skill