CtrlK
BlogDocsLog inGet started
Tessl Logo
PluginPublic

tessleng/aidevcon-slides

Build AI DevCon NYC talk decks as Claude Slides in the official aiDevCon style, with an HTML fallback.

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Overview
Quality
Evals
Security
Files

SKILL.mdskills/aidevcon-slides/

name:
aidevcon-slides
description:
Build an AI DevCon NYC talk deck as a Claude Slides artifact in the official aiDevCon style (black, yellow, pixel art, Atkinson Hyperlegible). Use when a speaker asks to create, draft, restyle or fix slides for an AI DevCon talk or workshop, convert an outline or an existing deck into the DevCon template, or add slides to a DevCon deck.

AI DevCon slides

Build talk decks for AI DevCon NYC as a Slides artifact: a deck the speaker can open, edit, present and export to PowerPoint or PDF from Claude. It follows the AI DevCon Design System and the structure of the official speaker template: black ground, white type, one yellow edition colour, pixel-bar artwork.

Only fall back to a standalone HTML file when the session has no Artifact tool that can create from a type (see "No Slides artifact" at the end). Don't hand over an HTML file just because it's quicker.

What ships with this skill:

  • templates/layouts/*.html: 24 slides, each one <section> already in the Slides format (inline styles only). Copy, fill, never redesign.
  • assets/*.svg.txt: SVG files (renamed so registries accept them): the official aiDevCon logos, the Statue of Liberty mascot, dot patterns and pixel icons.
  • references/layouts.md: what each layout is for, and which assets it needs.
  • references/design-rules.md: the rules every slide follows.
  • references/checklist.md: run it on your files before you publish.
  • templates/deck.html, scripts/: the HTML fallback only.

Workflow

  1. Get the content first. Talk title, speakers (name, role, company), sections, and the point each slide makes. Work from the speaker's outline or old deck if there is one. Don't invent claims, numbers, quotes or images (see "Missing content").
  2. Plan the deck as a list. One line per slide: layout name, then the takeaway. Follow the running order below. Aim for about one slide per minute of talk; move detail into speaker notes rather than adding slides. Show the plan to the speaker before building if they're around.
  3. Read references/layouts.md and references/design-rules.md. Pick each layout for its content, not to fill a pattern.
  4. Create the deck. Call the Artifact tool with the Slides type's type_url (find it with action: "list", scope: "types"), title = the talk title, auto_open: "after_first_write", and no files. The reply carries the deck's url and the Slides type's instructions. Follow those for how files are written and sent, with the overrides in "Slides type overrides" below.
  5. Upload the art once. The art is stored as assets/<name>.svg.txt (plain SVG; the .txt lets skill registries carry it). Copy each file your slides use into <root>/upload/<name>.svg, dropping the .txt (<root> is the folder you write the deck in), then upload them in ONE call: action: "publish", the deck's url, asset: true, file_paths = those copies. Each reply url (/_blob/<id>) replaces {{img:<name>.svg}} in every slide that uses it.
  6. Write the files. project/deck.json (template below), then one project/slides/<id>.html per slide: copy the layout, set id="{{id}}" to the slide id (which is also the file name), replace every {{...}}, put speaker notes in the <aside>. Run references/checklist.md on the files.
  7. Publish. First call: project/deck.json plus the cover slide, plus the design system's tokens.json entry (below). Then the remaining slides, in one call or a few. Then give the speaker the link and list every placeholder still on a slide.

Slides type overrides

The Slides type's instructions handle the mechanics. These choices are already made by this skill, so skip the type's own design steps:

  • Design system. Use the AI DevCon Design System, https://claude.ai/artifact/3GixFVtt77EPTSHAcgVkr7, even when another one (such as Tessl's) is marked as the default. Asking for an AI DevCon deck is the speaker naming this system. Install it in the first publish: add "project/ds/aidevcon/tokens.json": {"artifact": "https://claude.ai/artifact/3GixFVtt77EPTSHAcgVkr7", "path": "project/tokens.json"} to files, and the record in deck.json below. If the system can't be read (the speaker has no access to it), leave both out and say so in one line. The slides carry every colour inline, so the deck still looks right; only the editor's theme menus lose the named colours.
  • Typefaces and palette. Fixed by the layouts and design-rules.md. Don't choose others, and don't apply the type's advice about toned whites, two background tones or accent statement slides.
  • Margins and footer. The layouts use 64px side and 72px top and bottom margins, and the aiDevCon wordmark as the footer at bottom:40px, as in the speaker template. Keep them.
  • Images. Everything in assets/ goes in by upload (step 5), as .svg. Never write a data: URI or a path to the skill folder into a slide.

project/deck.json for a new deck (fill title, order, sections, cover and both timestamps with now, in RFC 3339):

{"v":4,"createdOnFiles":{"v":1,"at":"<now>"},"lists":"css","title":"<talk title>","cover":"<cover slide id>","order":["<slide ids in order>"],
 "sections":{"s1":{"description":"<one sentence>","start":"<first slide id>"}},
 "faces":{"atkinson-hyperlegible-next":{"family":"Atkinson Hyperlegible Next","href":"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@200..800&display=swap"},
          "atkinson-hyperlegible-mono":{"family":"Atkinson Hyperlegible Mono","href":"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@200..800&display=swap"}},
 "designSystems":[{"title":"AI DevCon Design System","namespace":"aidevcon","artifact":"https://claude.ai/artifact/3GixFVtt77EPTSHAcgVkr7","version":null,"copiedAt":"<now>"}]}

Use designSystems: [] if the system couldn't be installed. Use the system's version id in version if your tool reported one when you read or listed it.

Running order

Every DevCon talk follows the same order, so the conference feels like one event:

  1. event: optional holding slide while the room fills.
  2. title (with a speaker photo or key visual) or title-mascot: the cover.
  3. agenda: for talks over 15 minutes. 3 to 5 items, numbered 01 onwards.
  4. For each agenda item: a section divider whose number matches the agenda, then its content slides.
  5. next-steps: what the audience should do after the talk.
  6. end: thank you, and where to find the speakers.

When the last agenda item is itself the call to action ("How to start"), its divider can lead straight into next-steps; don't pad it with a slide that repeats it. Each number appears once: a figure that headlines a metric slide doesn't come back in a metrics list.

Missing content

Never invent a quote, a number, a customer name or an image. When the speaker hasn't supplied one:

  • Text. Put a visible placeholder in brackets on the slide, such as [Placeholder: % of findings caught before review], and flag it in the notes.
  • Images. Keep the layout's empty frame: an <img> with alt and style but no src. The speaker fills it in the editor with Add image. When they do supply an image, upload it like the art and set src to its /_blob/ url.
  • Quotes. Use the quote layout only for a real quote. If the speaker wants one but hasn't chosen it, keep the placeholder and the empty portrait frame.

List every placeholder in your handoff so the speaker can fill them before the talk.

Editing an existing deck

Follow the Slides type's "Revising" rules. Also:

  • 'Slide 7' is the seventh slide as the speaker sees it.
  • Change only what was asked. Keep every existing point, and don't restyle neighbouring slides.
  • A new slide starts from its layout file, with art uploaded if the deck doesn't already hold it (reuse a /_blob/ url you can see in another slide).
  • Use supplied images as they are. Don't crop them unless asked.

No Slides artifact

Only when the session can't create a Slides artifact (no Artifact tool, or it lists no Slides type): say so in one line, then build a single HTML file. Copy templates/deck.html to deck.html, paste one filled layout per slide where the SLIDES comment sits (leave {{img:...}} and id="{{id}}" as they are), run python3 scripts/build_deck.py deck.html to write deck.standalone.html with the art inlined, then python3 scripts/check_deck.py deck.standalone.html to screenshot and check it. Tell the speaker: open it in Chrome, arrow keys to move, F for full screen, N for notes, print to PDF with margins off for a PDF.

README.md

tile.json