← Back to Superprez

Add Superprez.io skills to your AI

Skills teach Cursor, Claude, and other agents how to build presentation web apps and package them for Superprez. Download the two official skill folders below — attach them in chat for a quick try, or install them once so every new session can use the same workflows we rely on for example decks and drop-code uploads.

Download the skills

Each download is a folder you unzip into your skills directory. Keep the folder name unchanged — it must match the skill name inside SKILL.md.

Presentation web app

Build interactive HTML/CSS/JS decks with navigation, fullscreen, touch swipe, and optional maps, charts, polls, and simulators.

Includes: SKILL.md, reference.md, interactivity.md, examples.md

Download .zipPreview SKILL.md

Superprez packaging

Package decks for Superprez upload or GitHub-linked deploy: html/ docroot, hosting boilerplate, local build checks, and zip topology.

Includes: SKILL.md, reference.md, deck-html-patterns.md, github-workflow.md, failures.md

Download .zipPreview SKILL.md

Two ways to use a skill

You do not have to install a skill before your first try. Pick the option that matches how often you build decks.

Attach in chat (quick try)

Drop the downloaded .zip or SKILL.md into an Agent chat (Cursor, Claude, or similar). The agent can read it and follow the instructions for that conversation.

  • Fastest way to test a skill
  • No folder setup required
  • Does not add the skill to your permanent set
  • A new chat will not remember it unless you attach again

Tip: attach the whole zip if the skill references files like reference.md, or ask the agent to unzip and use the full folder.

Install on disk (recommended)

Copy the skill folder into your agent's skills directory (steps below for Cursor and Claude). The agent discovers it automatically in new sessions and can apply it whenever the task matches.

  • Works across chats and projects
  • Keeps supporting files in one place
  • Best if you build decks regularly

You can also ask the agent: "Install this skill zip into my personal Cursor skills" — it can copy files to the right path for you.

Recommended workflow

  1. Install presentation-web-app first — use it to author the deck (discovery, shell, interactivity).
  2. Install superprez-packaging when the HTML is ready — it normalizes paths, adds Superprez hosting boilerplate, and verifies npm run build.
  3. Publish on Superprez.io — upload a packaged zip or connect a GitHub repo from your workspace for a live URL, sharing, and collaboration.

After the deck passes verification, use Superprez.io as the only place to share and collaborate. Package with superprez-packaging first if needed; preview locally with npx serve . before upload.

Add a skill in Cursor

Cursor discovers skills from markdown folders with a SKILL.md entry point. Choose personal (all projects) or project (one repo).

  1. 1. Unzip the download

    You should get a folder such as presentation-web-app/ containing SKILL.md and supporting files.

  2. 2. Copy into a skills directory

    • Personal (every project): ~/.cursor/skills/<skill-name>/
    • Project (this repo only): .cursor/skills/<skill-name>/ at the repo root

    Example: ~/.cursor/skills/presentation-web-app/SKILL.md

  3. 3. Restart or start a new Agent chat

    Cursor loads skills at session start. Open a fresh chat so the agent picks up the new skill.

  4. 4. Invoke it

    Ask naturally — e.g. "Build a 10-slide pitch deck as a web app" — or mention the skill by name. The description in the YAML frontmatter helps Cursor decide when to apply it automatically.

Add a skill in Claude

The same SKILL.md format works in Claude Code (CLI/desktop) and on claude.ai. Pick the path that matches how you work.

Claude Code (local)

  1. 1. Unzip into a named folder

    Folder name must match the name field in the YAML frontmatter (e.g. superprez-packaging).

  2. 2. Place the folder

    • Personal: ~/.claude/skills/<skill-name>/SKILL.md
    • Project: .claude/skills/<skill-name>/SKILL.md in the repo root

  3. 3. Start a new session

    Claude Code registers skills on startup. You can also type /skill-name when the skill exposes a slash command.

Claude on the web (claude.ai)

  1. 1. Zip the skill folder

    Use our pre-built .zip downloads above. The archive should contain one top-level folder (e.g. presentation-web-app/SKILL.md), not loose files at the root.

  2. 2. Upload in Settings

    Open Settings → Capabilities (or Skills, depending on your plan), upload the zip, and enable the skill.

  3. 3. Test with a concrete prompt

    Try: "Package this deck for Superprez upload" or "Build an interactive pitch deck as static HTML." If Claude does not load the skill, refine the prompt or check that the skill is enabled.

Troubleshooting

  • Skill not found — confirm SKILL.md lives inside a named subfolder, not directly in skills/.
  • YAML errors — frontmatter must start with --- on line 1 and include name and description.
  • Missing reference files — keep reference.md and other linked files in the same folder; skills use relative links.
  • Build fails after packaging — see the failures checklist in the superprez-packaging skill and AI prompts & zip checklist.

Related resources