skills.rest
alvarovillalbaa
alvarovillalbaaCOMMUNITY
Explore all skills by this author →
Website𝕏@alvarovillalbapGitHub

code-slides

Generate responsive code-based slide decks from structured briefs, markdown, or JSON content specifications.

Updated Feb 13, 2026
Search Tags:#slide decks#remote presentation#responsive html#visual style presets#ai-image generation#pptx to web#deck validation
One-click install
npx skills add https://github.com/alvarovillalbaa/plugins --skill code-slides
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-slides
Source: https://github.com/alvarovillalbaa/plugins/tree/main/marketing/skills/code-slides
Command: npx skills add https://github.com/alvarovillalbaa/plugins --skill code-slides

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

It eliminates the time-consuming, repetitive work of manually designing slide decks by generating responsive, production-ready presentations directly from structured specs or existing slide content.

Core Features & Use Cases

  • Code-first slide decks: Build and evolve HTML/CSS/JS or React/TypeScript presentations with responsive behavior.
  • AI-image slide packs: Generate consistent, style-aligned slide images from markdown or JSON content specs for Google-Slides-ready outputs.
  • Deck workflows with guardrails: Includes image sourcing strategy, viewport-fit constraints, remote controller support, and validation to avoid common slide-quality failures.

Quick Start

Ask for a responsive HTML deck and explicitly request a right-side navigation layout for a 10-slide product walkthrough based on this topic brief.

Frequently Asked Questions about code-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is a code-first slide deck and how does it work?▼

A code-first slide deck is a responsive HTML/CSS/JS or React/TypeScript presentation generated directly from structured markdown or JSON specs. This approach replaces manual design by applying deterministic visual style presets, viewport-fit constraints, and artifact validation scripts.

How do I convert pptx to web-based responsive slides?▼

To convert pptx to web-based responsive slides, you can use PPT/PPTX-to-web conversion reconstruction workflows. The process takes existing slide content and reconstructs it into code-first HTML decks with remote controller support and navigation placement rules.

Can I generate AI-image slide packs from markdown?▼

Yes, you can generate AI-image slide packs from markdown or JSON content specifications. This workflow applies a multi-source image strategy and distinct visual direction to produce consistent, style-aligned slide images ready for Google Slides.

What's the best way to validate slide quality for remote presentations?▼

The best way to validate slide quality for remote presentations is using bundled validation scripts. These scripts check artifact quality against viewport-fit requirements, remote controller support, and navigation placement rules to prevent common slide failures.

Do I need specific software to create code-based presentations?▼

No specific presentation software is required to create code-based presentations. You define content through structured slide briefs, markdown, or JSON specifications, and the workflow outputs responsive HTML/CSS/JS or React/TypeScript files.

How do I add a right-side navigation layout to a responsive HTML deck?▼

To add a right-side navigation layout to a responsive HTML deck, explicitly request this layout configuration when generating the presentation. The workflow includes remote controller and navigation placement rules to ensure proper viewport fitting.

Related Skills

Explore More Design & Creative Skills→
tangzheng202202tangzheng202202
1

powerpoint

Create, edit, and extract text from PPTX presentation files.

Community
Advanced
solibluesoliblue
2

slides

Generate presentation slides with AI imagery and assemble decks into PowerPoint files.

Community
Intermediate
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate
MuhammadUAMuhammadUA

presentations

Create, validate, and export 1920x1080 HTML slide decks to PDF and PPTX.

Community
Intermediate