How to use the Brand-Story Slide Deck Builder agent skill

What does the Brand-Story Slide Deck Builder skill make the agent do?

An agent skill is a folder of instructions and supporting files that an AI agent can load when a task matches it. This skill, named open-design-landing-deck, teaches the agent to fill in a brief written as JSON and then run a bundled TypeScript script that produces one HTML file.

The output is a deck in the Atelier Zero visual style: warm paper colours, serif italic emphasis and coral dots. Navigation works with keyboard, mouse wheel and touch, and an overview grid shows every slide. The skill is aimed at brand-story and partner decks for marketing and go-to-market teams.

• Seven slide types: cover, section, content, stats, quote, cta and end.
• Keyboard keys: arrow keys, PageUp/PageDown, Space, Home and End.
• Wheel and touch swipe, with a guard against overshooting on a single trackpad flick.
• ESC opens an overview grid of thumbnails; click one to jump to it.
• A progress bar and dot indicator show your position in the deck.

How do you install the skill?

Download the skill ZIP from the page where you found this guide, then unzip it. Put the unzipped folder in one of two places: your personal skills folder at ~/.claude/skills/, or a project-level .claude/skills/ folder inside the project you are working in. Use the personal folder if you want the skill available everywhere, and the project folder if you want it limited to one project.

If you use the Claude apps instead of a local folder, you can upload the skill there under Settings → Capabilities → Skills.

The skill also depends on a sister skill, open-design-landing, which provides the shared styles.css and the image library. Make sure that skill is installed alongside this one, because the composer reads its stylesheet and images.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• App install: Settings → Capabilities → Skills

What do you need before you run it?

The skill needs a Node.js runtime with npx, and the tsx tool to run scripts/compose.ts. The source does not give version numbers, so check that your Node.js installation includes npx before you start.

Image generation is optional. If you want the agent to create new images with gpt-image-2, you need a FAL_KEY API key for fal.ai. You can skip this entirely and use the existing image library or placeholder images instead.

• Node.js with npx
• tsx, used to run scripts/compose.ts
• The open-design-landing sister skill (shared styles.css and image library)
• Optional: a FAL_KEY for fal.ai if generating images with gpt-image-2

How do you ask the agent for a deck?

You do not need special syntax. Describe the deck you want in plain language and name the audience and purpose. The skill's own triggers include phrases such as 'html deck', 'html slides', 'launch', 'campaign' and 'pipeline', so use wording that matches your goal.

The agent will fill in a brief, choose a slide type for each slide and run the composer. A good request says who the deck is for, how many slides you want, and which facts or numbers must appear. The skill's recommended count is 11 slides, with 8 to 15 described as the sweet spot.

• Example: 'Build me a partner deck in the Open Design style, about 11 slides, for press contacts.'
• Example: 'Make an HTML deck for our launch with a cover, two sections, a stats slide and a closing call to action.'
• Include the must-keep numbers and any quote you want to use.

What does the agent actually run?

The agent writes an inputs.json file describing the brand, slides and image settings, then runs the composer. The composer writes one self-contained HTML file, with the Atelier Zero CSS and runtime script inline and images referenced by relative path.

If you want to generate images or make placeholders, the skill includes two optional commands. The first uses gpt-image-2 through fal.ai, and the second creates paper-textured SVG placeholders. Both write to the sister skill's assets folder by default.

• Output: <out>/index.html, one viewport per slide, horizontal swipe.
• Images must be in the 16-slot library from open-design-landing, or set your own assets path.

What safety points should you know?

This skill runs scripts and uses the network. The composer script runs on your machine. The optional image step sends prompts to an external service, fal.ai, using your API key. Do not use confidential material with image generation turned on, because those prompts leave your machine.

The skill's license is Apache-2.0. The source does not state any fees for fal.ai usage, so check that service's own terms before generating images at scale. Review the inputs.json file and the generated HTML before you share the deck outside your organisation.

• Script execution: the composer runs locally with npx tsx.
• Network use: only the optional image step contacts fal.ai.
• Confidentiality: avoid sending sensitive brand or partner material to image generation.

What tips help the deck look right?

Start from inputs.example.json, which is the Open Design pitch deck. If you already have a brief for the open-design-landing skill, copy its brand and imagery blocks across unchanged so both skills share one identity.

Open the finished HTML in a fresh browser tab and check that the first slide shows the chrome strip with the slide counter. Then press the right arrow key and confirm the slide moves one viewport and the progress bar advances.

• Keep the deck between 8 and 15 slides for the best flow.
• Use the ESC overview to check the order of slides at a glance.
• The visual system is fixed, so pick content rather than trying to change the look.