mira-vertical

Converts 16:9 Mira HTML decks into vertical 9:16 slides for Reels, Shorts, and TikTok.

Updated Sep 2, 2026
One-click install
npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-vertical-mayconspirlandelli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mira-vertical
Source: https://github.com/mayconspirlandelli/slides-podcast-ia-home-office/tree/main/.agents/skills/mira-vertical
Command: npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-vertical-mayconspirlandelli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Horizontal 16:9 presentation decks do not work for vertical video platforms like Reels, Shorts, TikTok, and Stories. This Skill reformulates a Mira deck into a vertical version without touching the original file, reflowing each animation's axis from horizontal to portrait so the content fills a tall canvas instead of shrinking into a thin strip. ## Core Features & Use Cases - Non-destructive conversion: Copies index.html to a new index-9x16.html and applies all changes there, leaving the original deck byte-for-byte intact. - Lean composition: Each content slide shows only the title at the top plus the animation on a tall 128/203 canvas; subtitles, card headers, and pill footers are hidden via scoped CSS. - Axis reflow playbook: Converts horizontal flows, wide orbitals, side-by-side comparisons, and force-directed networks into vertical layouts while preserving texts, colors, easing, durations, and loop logic. - Native creation mode: Builds new slides directly in portrait geometry when no 16:9 source deck exists. - Use Case: You finished a 16:9 Mira deck and need a vertical version to record as an Instagram Reel; the Skill generates index-9x16.html with every animation reformulated for portrait. ## Quick Start Ask the assistant to create a vertical 9:16 version of the current Mira deck for Reels, and it will generate index-9x16.html next to the original.

Frequently Asked Questions about mira-vertical

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

FAQPage Schema
How do I convert a 16:9 HTML slide deck to vertical 9:16?▼

Copy index.html to index-9x16.html, inject the canonical mira-formato-9x16 style block before the closing head tag, add the title auto-fit script, then reflow each animation's geometry in the JS so its dominant axis runs vertically. The original file stays untouched.

How do I make presentation slides for Instagram Reels or TikTok?▼

Generate a vertical version of the deck where each content slide shows only the title at the top and the animation on a tall 128/203 canvas. Open it fullscreen in a modern Chromium browser and crop the central column in your capture tool to record the vertical video.

Does the vertical conversion modify the original 16:9 deck?▼

No, the original index.html remains byte-for-byte intact. All changes happen in a new index-9x16.html file created in the same folder, so relative paths for logos, videos, and images keep working.

Why does my vertical slide show a thin horizontal animation strip?▼

A 16:9 viewBox inside a narrow tall frame fits by width and occupies only a thin band. The fix is to stretch the viewBox height to H = W * 203 / 128 and reflow the animation geometry so movement runs top to bottom instead of left to right.

What is the minimum font size for text in vertical slides?▼

No visible text may render below 13px on screen. For SVG text with the default viewBox width around 960, use font-size of at least 24 units, and for HTML text the smallest allowed Tailwind class is text-sm; text-xs is prohibited.

Which browsers support recording the vertical deck?▼

The composition relies on the CSS :has() selector, so recording requires a modern Chromium browser such as current Chrome or Edge. Older browsers without :has() support will not hide the subtitle, card header, and pill footer correctly.