tiktok-slides

Generates 1080x1920 vertical HTML slides for TikTok phone ranking videos using BIGDROPS brand guidelines.

Updated Jun 7, 2026
One-click install
npx skills add https://github.com/Bigdrops/Bigdrops-carousel --skill tiktok-slides-bigdrops
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tiktok-slides
Source: https://github.com/Bigdrops/Bigdrops-carousel/tree/main/.agents/skills/tiktok-slides
Command: npx skills add https://github.com/Bigdrops/Bigdrops-carousel --skill tiktok-slides-bigdrops

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating TikTok-ready vertical slides for phone review and ranking videos requires precise pixel-level layout control to avoid TikTok UI overlays, plus consistent brand styling. This Skill generates self-contained 1080x1920 HTML slides that respect TikTok safe zones and follow the BIGDROPS visual system. ## Core Features & Use Cases - Safe-zone compliant layouts: Enforces top/bottom/left/right safe areas so no content is hidden behind TikTok UI elements. - Dynamic theming by device category: Automatically assigns flagship, gaming, or elite theme colors based on the phone being featured, with warning colors for bottleneck specs. - Brand-consistent typography and structure: Uses Bebas Neue, DM Sans, and DM Mono with a fixed slide structure including ranking number, device image, spec cards, and honest review blocks. - Use Case: A content creator making a "Top 5 Gaming Phones" TikTok video for the Nigerian market can generate five themed, safe-zone-compliant HTML slides ready to render and export as PNG via html2canvas. ## Quick Start Ask the AI to create a TikTok ranking slide for a specific phone, for example: make a TikTok slide ranking the Poco X6 Pro as a gaming phone with its specs and honest pros and cons.

Frequently Asked Questions about tiktok-slides

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

FAQPage Schema
How do I create TikTok vertical slides with HTML?

Build a 1080x1920 pixel HTML page with a 9:16 aspect ratio, then render it in a browser and export it as PNG using html2canvas or screenshots. Keep all content inside defined safe zones so TikTok UI elements do not cover it.

What are the TikTok safe zones for vertical video content?

This Skill defines safe zones of 180px top, 480px bottom, 80px left, and 180px right margins. The UI dead zones where content is forbidden are the top 150px, right 160px, and bottom 450px of the canvas.

How do I export HTML slides as PNG images for TikTok?

Render the self-contained HTML file in a browser and capture it with html2canvas or a screenshot at 1080x1920 resolution. The generated slides are self-contained so no external assets are needed at export time.

Can I use custom fonts like Bebas Neue in HTML slides?

Yes, the slides use Bebas Neue for titles and rankings, DM Sans for body text, and DM Mono for technical specs. Load these fonts in the HTML file so they render correctly before exporting to PNG.

Why does my TikTok slide content get covered by buttons and captions?

Content placed in the top 150px, right 160px, or bottom 450px of a 1080x1920 canvas overlaps TikTok UI elements. Move all text and graphics inside the safe content zone defined by the slide guidelines.