Slide Deck — Testing skill for Claude Code
Agent skill: build animated React (Vite + Framer Motion) slide decks from source material, with Codex-generated per-slide images and agent-browser QA.
How to install Slide Deck
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open knowsuchagency/slide-deck and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Slide Deck does
Agent skill: build animated React (Vite + Framer Motion) slide decks from source material, with Codex-generated per-slide images and agent-browser QA.
Alternatives in Testing
- Playwright — claude-plugins-official Browser automation, E2E testing, screenshots 29.4k ★
- Playwright — Automate real browser interactions for navigation, forms, and scraping 14.6k ★
- Playwright Automation — git clone Browser automation skill for end-to-end testing and web interaction 2.3k ★
README
slide-deck
A [Claude Code](https://claude.com/claude-code) / agent **skill** for building presentable, animated slide decks as a React web app — **Vite + React + TypeScript + Framer Motion**, one cinematic background image per slide (generated with the Codex CLI), QA'd slide-by-slide with agent-browser.
Scope is **authoring + local QA** — it builds and verifies the deck; deployment is left to you.
Install
With the [`skills`](https://github.com/vercel-labs/skills) CLI:
# install into this project (.claude/skills or .agents/skills)
npx skills add knowsuchagency/slide-deck
# or globally for Claude Code
npx skills add knowsuchagency/slide-deck -g -a claude-code
This skill is also published as part of the [`knowsuchagency/skills`](https://github.com/knowsuchagency/skills) collection.
What's inside
SKILL.md— the procedure the agent follows (scaffold → plan slides → generate images → QA → present).template/— a complete, proven Vite + React +motionscaffold. Copy it, editsrc/slides.ts, and run. Includes helper scripts for Codex image generation and agent-browser QA.
Quick start (template, standalone)
cp -r template ~/my-deck && cd ~/my-deck
bun install && bun run dev
# edit src/slides.ts and src/deck.config.ts; generate images; present with F
See [`SKILL.md`](./SKILL.md) for the full workflow.
License
MIT
Related Skills
Frontend Test Pattern Skill
Claude Code skill for React + Vite projects — auto-generates Vitest & Testing Library tests for utils, compone
MVP Builder Skill
Claude Code skill for building production-quality web apps and MVPs from scratch. Full workflow: spec → brandi
Desktop Controller Skill
AI Computer Use for Claude Code — The open-source alternative to OpenAI Codex's playwright-interactive. Dual-e
Aios
Local-first AI agent bootstrap: Playwright Browser MCP + ContextDB for Codex CLI, Claude Code, Gemini CLI, and
Generate Cover
Generate book cover images using HTML+CSS and Playwright screenshots. No external design tools needed. Usage:
Design QA
Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token co
Related Agents
Animation Implementer
Specialized coding agent that implements motion design specs using Framer Motion, GSAP, and Three.js. Use this
Courseware Developer
Use this agent to build training and teaching materials — interactive HTML courseware slide decks, animated fl
Fe Deck Reader
Decomposes PPT/planning decks (multi-slide, converted to PDF/PNG) into policy & rules / screen mockups / scre