skills.rest
vinodkrishna221
vinodkrishna221COMMUNITY
Explore all skills by this author →
GitHub

bolt-slides

Build responsive, interactive presentation decks as Vite + React apps with click-builds and presenter mode.

Updated Aug 23, 2026
Search Tags:#react#responsive design#presentation#slides#vite#pitch deck#deck
One-click install
npx skills add https://github.com/vinodkrishna221/Q-Trace --skill bolt-slides-vinodkrishna221
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bolt-slides
Source: https://github.com/vinodkrishna221/Q-Trace/tree/main/.agents/skills/bolt-slides
Command: npx skills add https://github.com/vinodkrishna221/Q-Trace --skill bolt-slides-vinodkrishna221

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Fixed-canvas slide tools clip content on different screens and lack real interactivity; this Skill builds paged, presenter-ready decks as responsive React web apps that reflow to any screen. ## Core Features & Use Cases - Responsive paged deck engine: Pre-built Vite + React engine with floating dock, thumbnail rail, click-builds, presenter view, and annotation tools that must not be modified. - Themeable token system: All color, type, radius, and motion live in a :root token file, so a brand theme is applied by editing values only. - Rich slide components: Cover, Split, Bento, StatGrid, Charts, Globe, Chat, Timeline, CodeWindow, BrowserFrame, and more, composed per-slide in App.tsx. - Use Case: Given a startup's brand and pitch content, author an original 10-slide investor deck with a cover, a BigNumber traction beat, a comparison slide, and a closing CTA, then run it locally with npm run dev. ## Quick Start Ask the AI to use the bolt-slides skill to build a responsive React presentation deck about your topic, then run npm install and npm run dev in the skill directory to present it.

Frequently Asked Questions about bolt-slides

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

FAQPage Schema
How do I build a presentation deck with React?▼

Use this Vite + React deck engine: run npm install and npm run dev in the skill directory, then author slides as children of the Deck component in src/App.tsx using layouts like Cover, Split, Bento, and StatGrid.

How do I theme a slide deck to match a brand?▼

Edit only the :root block in src/styles/tokens.css, changing values like --primary, --bg, --font-head, and --font-body without renaming variables. Derive colors and fonts from the brand's real palette, and update the index.html title and favicon.

Can I modify the deck engine or add dependencies?▼

No. The engine in src/deck/ (Deck, Slide, Build, Reveal, presenter, annotator) is locked and must not be rewritten. New slide components are encouraged but must use token variables and plain React, CSS, and SVG with no new dependencies.

Why does my slide look off-center or clipped?▼

Text-only slides without a side visual must be centered using Slide center or marginInline auto on headings and blocks. Avoid fixed pixel widths and column counts; use fluid clamp() sizing and auto-fit grids since paged slides cannot scroll.

When should I use specialty layouts like Chat, Globe, or Pricing?▼

Only when the content genuinely calls for them: Chat for real conversational products, Globe for real geographic data with actual coordinates, Pricing when pricing is part of the ask. Each specialty layout should appear at most once per deck.

Related Skills

Explore More Design & Creative Skills→
nebinfranebinfra

neb-presentation

Convert narratives into HTML slides with PDF export.

Official
Advanced
aiunlocked1412aiunlocked1412
14

presentation-designer

Generate structured slide outlines, speaker notes, and markdown export files for presentations.

Community
Intermediate
synthaicodesynthaicode
4

presentation_flow_review

Review and restructure presentation slide order into an explicit causal argument flow.

Community
Intermediate
rojim666rojim666
68

Presentations

Create, edit, and render PowerPoint and Google Slides decks with template fidelity checks.

Community
Advanced