Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

presentation — Claude Code skill: web decks from specs

Turns a technical-spec directory into an interactive web presentation. Use it when a specification needs a shareable deck with a clear narrative.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add iii-hq/iii --skill presentation -a claude-code
Open on GitHub

What presentation does

The skill takes a tech-specs/<slug>/ directory of Markdown documents and creates a deck content layer in a roadmap base. The deck is built as a static page at /roadmap/<slug>/.

It reads the specification, the project component registry, and guidance for design, narrative, hosting, and quality checks before building. The agent must propose a slide outline for approval, then scaffolds the deck with interactive diagrams, system maps, and detail pages.

The input must be a specification directory with a README.md and Markdown domain documents. That requirement matters because this skill does not write the specification itself or produce PDF exports.

What it helps with

  • turn a technical specification into a web deck
  • map an architecture as a navigable diagram
  • add step-by-step diagrams and toggles
  • register a specification for a roadmap page
  • reuse components from the project registry

Example prompts for the agent

  • Create an interactive web deck from `tech-specs/<slug>/`.
  • Refresh the existing presentation for `tech-specs/<slug>/`.
  • Propose the slide outline for `tech-specs/<slug>/` before scaffolding it.

How to install presentation

1Skills CLI (Vercel)

npx skills add iii-hq/iii --skill presentation -a claude-code

2Manually: put the files in place

~/.claude/skills/presentation/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/presentation/

From the same set5

The whole set →
iii-engine-config iii-hq Configures the iii engine via worker-compose.yaml or config.yaml. Sets up engine ports, observers, RBAC proxy, and configuration storage. Claude Code CX Codex Cursor +1 4,200installs iii-sdk-reference iii-hq Reference for iii SDK APIs across Node.js, Python, Rust, Go, and browser. Quick lookup of correct syntax for worker registration, functions, triggers, observers, and channels on each platform. Claude Code CX Codex Cursor +1 4,000installs iii-core-primitives iii-hq Guides agents on iii engine primitives: functions, triggers, workers, and invocation modes across TypeScript, Python, and Rust. Claude Code CX Codex Cursor +1 4,000installs iii-error-handling iii-hq Skill teaches agents to read iii engine and SDK error codes, tell network failures from access denials, know when it is safe to retry. Use it when calling remote functions from Node, Python, Rust, or browser code. Claude Code CX Codex Cursor +1 4,000installs

Similar

expo-brownfield expo Embeds React Native and Expo into existing native iOS and Android apps. Useful when adding cross-platform screens to SwiftUI, UIKit, or Kotlin hosts. Claude Code CX Codex Cursor +1 27,700installs 3d-web-experience sickn33 Helps build and debug web 3D scenes, product configurators, and portfolios. Covers stack choice, model loading, scroll interaction, and performance checks. Claude Code CX Codex Cursor +1 5,200installs argent-screenshot-diff software-mansion Compares before and after screenshots to catch layout shifts, spacing, color and text rendering changes. Claude Code CX Codex Cursor +1 24,900installs popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands. Claude Code CX Codex Cursor +1 914installs shadcn-ui nexu-io This skill helps an agent build structured, accessible UI components with shadcn/ui. Use it while planning an interface with the Stitch design loop. Claude Code CX Codex Cursor +1 2,900installs swiftui-design nexu-io A skill that guides SwiftUI interface design by clear rules, avoiding typical AI-code mistakes. Directs design decisions, validates brand assets, and reviews layouts across five dimensions. Claude Code CX Codex Cursor +1 2,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about presentation

How do I install presentation in Claude Code?

Run npx skills add iii-hq/iii --skill presentation -a claude-code, then run npx skills add iii-hq/iii --skill presentation -a claude-code again. The skill file is located at ~/.claude/skills/presentation/SKILL.md.

What does presentation do?

It turns a Markdown technical specification into an interactive roadmap web deck. It plans the narrative, consults the project component registry, and generates the deck content layer.

What does presentation need to run?

It needs a tech-specs/<slug>/ directory containing README.md and Markdown domain documents. The directory basename becomes the deck name and route segment.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor