Visual Deck Studio: HTML Design Skills for Your Agent

Where this fits

A product manager asks their agent to "make a prototype of the onboarding flow" 30 minutes before a stakeholder demo. The agent generates a plain HTML page with buttons that don't do anything. This skill closes that gap: it routes visual tasks to the correct artifact format — slide deck, animation, app prototype, or infographic — and tells the agent to behave like the right kind of designer, not a generic web developer.

Why agents benefit

• Task routing before execution: a decision table maps signals ("PPT", "MP4", "App prototype") to specific delivery chains, so the agent doesn't default to a webpage layout.
• Domain persona embodiment: the skill instructs the agent to think as an animator, UX designer, or slide designer depending on the job — changing output structure, pacing, and visual language.
• Ambiguity handling: when the user gives no style reference (the common case), a Fallback consultant mode runs a structured Phase 1-5 interview to extract design direction before a line of HTML is written.
• Full delivery pipeline: 1920×1080 deck specs, MP4/GIF export steps, and a voiceover pipeline for long-form narrated videos are built in — not bolted on after the fact.
• Fact-checking discipline: when a specific brand or product is named, the agent verifies assets and visual references before designing, avoiding off-brand output.

Practical scenarios

Stakeholder-ready app prototype

A PM needs a clickable onboarding mockup for a usability test. The skill routes to the app-prototype line, and the agent produces a high-fidelity flow with real state transitions — not a static page.

Pitch deck without a designer

A founder wants a 10-slide investor deck. The agent builds a 1920×1080 HTML deck with animated transitions, exports it, and the founder presents it directly in the browser.

Launch film motion concept

A marketing lead asks for a "super bowl quality" launch film. The skill directs the agent to first write a director's notes document, then produce a timed animation demo — matching the professional storyboard-first workflow.

Add it to your agent workflow

Install the skill with:

npx skills add ConnorRX56/presentation-delivery-skills --skill visual-deck-studio

Then prompt your agent naturally:

"Make a 5-slide HTML deck pitching our analytics dashboard. No style reference — ask me a few questions first."

The agent will run the consultant mode, then produce a 1920×1080 deck you can present immediately. For a deeper look at how this skill fits into the broader agent-skill ecosystem, see its listing on OpenAgentSkill.

Compare before adopting

• Quality signals: check whether the skill's output actually matches the claimed artifact type — a "slide" should not look like a dashboard.
• Maintenance freshness: the skill references internal docs (animation-pitfalls.md, launch-film-director-notes.md); verify these are updated and complete.
• Alternatives: compare against general frontend-design skills, which handle production web apps but lack the artifact routing and persona logic here.
• Workflow fit: if your agents rarely receive visual-production requests, this may be overkill; if they do, the routing table alone justifies adoption.

Why it is worth tracking

The skill is young (10 stars, single author) but well-structured with a clear decision table and specialized reference docs — a sign of deliberate design rather than a wrapper around a prompt. Watch for star growth, new reference documents, and whether the author responds to issues. Re-evaluate in 2-3 months: if the skill gains traction and keeps its docs current, it becomes a strong default for any agent that produces visual artifacts. If it stalls, the routing logic is still worth borrowing.