Skip to content

Guide · Agent skill

How to use the 1920 Canvas Slide Deck agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The deck-open-slide-canvas skill tells an agent to build a presentation as one HTML file in which every slide is a fixed 1920×1080 canvas, scaled to fit the browser window. It is aimed at personal portfolios, art or design talks and presentations that do not fit standard templates. After this guide you will know what the skill does, how to install it, how to ask for a deck in a way that triggers it, and what to check in the result.

1920 Canvas Slide Decknexu-io/html-anything · Apache-2.0

Quick start

  1. 1Get the ZIP. Download the skill ZIP from this page.
  2. 2Unzip into a skills folder. Place the skill in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder.
  3. 3Or upload it in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the skill.
  4. 4Describe your deck. Ask for a portfolio, art talk or poster-style deck, and include your real content and chosen palette.
  5. 5Open the HTML file. View the generated single HTML file in a browser with internet access.
  6. 6Check and adjust. Use the arrow keys to review each slide for overflow and a single focal point, then ask for changes.

What does the skill make the agent do?

When the skill is active, the agent writes each slide as a free-form layout rather than filling a template. It chooses a layout per slide based on the content: cover, question, quote, image-and-text, three-column, five-column, list, data card or full-bleed image. The agent is expected to treat the slides like React components composed freely.

The skill also sets firm design rules. Each slide has one visual focal point (a line, a number or an image). The deck uses one of four preset colour palettes throughout, and only one accent colour. Text uses a restricted type scale, nothing may overflow the canvas, keyboard navigation is included, and placeholder text such as lorem ipsum is not allowed.

  • Output is a single HTML file that loads Tailwind CSS from a CDN.
  • Palettes: Ash and Lime, Sea Indigo, Mate Mocha, Pearl Rose.
  • Type scale in px: 18, 22, 28, 36, 48, 64, 88, 120, 160, 220.
  • Padding is one of 96, 128 or 160 px.
  • Left and right arrow keys move between slides, and the hash in the URL stays in sync.
  • A corner badge shows the slide number as N/M at bottom right, and the deck title sits at bottom left.

Install the skill from the ZIP

Download the ZIP for this skill from this page. Unzip it so that the skill folder sits in your personal skills directory, ~/.claude/skills/, or in a project's .claude/skills/ folder if you want the skill to apply only to that project. The package contains example.html, example.md and SKILL.md. SKILL.md is the file the agent reads, so it must be present.

If you use the Claude apps instead of a local tool, you can upload the skill under Settings, then Capabilities, then Skills. Either way, the skill needs a SKILL.md-compatible agent such as Claude Code to run.

  • Personal install: ~/.claude/skills/
  • Project install: the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload

Ask for a deck in a way that triggers the skill

The skill is meant for requests where the reader wants a non-template, visually controlled deck. Describe the purpose, the audience and the feel you want. Naming a palette or a layout style helps the agent follow the skill's rules. Stating your real content also matters, because the skill forbids placeholder text.

Requests that fit well describe a portfolio, an art or design talk, or a poster-like presentation. Requests for editable PowerPoint or Google Slides files, or for charts built from real data, do not fit this skill, because its focus is layout and typography.

  • Example: Make a 16:9 portfolio deck for my design work in Sea Indigo, one big idea per slide.
  • Example: Build a poster-style talk on typography with a quote slide and a big number slide, using my text below.
  • Example: Create a short design-class deck on type hierarchy, with a three-column comparison and a closing question.

Check the result in a browser

Open the generated HTML file in a web browser. Each slide is a section with the class slide and a data-slide-id attribute. The canvas scales to the window (the default scale is 0.7, centred), so the whole slide should be visible without scrollbars. Use the left and right arrow keys to move through the deck.

Viewing the deck needs internet access, because the Tailwind CSS CDN and web fonts are loaded when it opens. Images are not linked from external sources by the skill, so add your own images to the file or to a folder beside it.

  • Confirm no slide shows a scrollbar or clipped text.
  • Confirm each slide has one clear focal point.
  • Confirm the palette stays the same across all slides.
width: 1920px; height: 1080px; transform: scale(0.7);

Understand the safety and requirements

According to the skill's own description, it runs no scripts. It does use the network, because the output loads Tailwind CSS from a CDN and Google-style web fonts when the deck is viewed. If you need a deck that works offline or without the Tailwind CDN, this skill is not a good fit.

The skill is released under the Apache-2.0 licence. Requirements are a SKILL.md-compatible agent such as Claude Code, a web browser to view the HTML file, and internet access for the CDN and fonts.

  • Runs scripts: no
  • Uses network: yes
  • Licence: Apache-2.0

Tips for better decks

The skill works best when you give it strong content and a clear direction. Short quotes, single numbers and specific images give each slide a clear focus. If a slide holds two equal blocks of text, ask for a three-column grid so the weights stay even.

Review the example file, example.md, to see the intended style: a Sea Indigo palette with one large question per slide and a corner badge. It is a useful reference for what the output should look like.

  • Give your real text and image descriptions, not placeholders.
  • Pick one palette at the start and keep it.
  • Ask for one focal point per slide.

What people use it for

  • A designer's portfolio deck where each project gets a full-bleed image slide and a short caption.
  • A poster-style talk on typography, using large numbers and quotes on each slide.
  • A design-class presentation that shows type hierarchy with a restricted type scale.
  • An art talk with a single question on the opening slide and a closing quote.

Frequently asked questions

Is the deck-open-slide-canvas skill free to use?

The skill is released under the Apache-2.0 licence, as stated on this page. Check the licence file in the source repository before using it in a commercial product.

What do I need to run this agent skill?

You need a SKILL.md-compatible agent such as Claude Code, a web browser to view the HTML output, and internet access. The internet is needed because the deck loads Tailwind CSS from a CDN and web fonts when viewed.

Can I get an editable PowerPoint or Google Slides file from it?

No. The output is a single HTML file, so this skill is not suited to corporate decks that need editable PowerPoint or Google Slides files.

Does it work offline?

Not as delivered. The output loads Tailwind CSS from a CDN, so the deck needs internet access when it is viewed.

Can it build charts from my real data?

The skill focuses on layout and typography rather than data handling, so it is not the right choice for data-heavy slides built from real data.

Where do I put the skill so the agent finds it?

Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings, then Capabilities, then Skills.

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, artist, design student or presenter who wants a portfolio-style or poster-like deck with strong visual control and a non-template layout. Pick something else if you need editable PowerPoint or Google Slides files, charts built from real data, or a deck that works offline.

Download the skill