원클릭으로
Use when creating animation-rich HTML presentations or convert PPT to web.
npx skills add https://github.com/exiao/skills --skill frontend-slides이 명령을 Claude Code에 복사하여 붙여넣어 스킬을 설치하세요
Use when creating animation-rich HTML presentations or convert PPT to web.
npx skills add https://github.com/exiao/skills --skill frontend-slides이 명령을 Claude Code에 복사하여 붙여넣어 스킬을 설치하세요
Reference for the two-tier skill loading system — preloaded vs category-gated skills, how to add/remove preloaded skills, and the external-services category layout.
Orchestrator for the 3-article content pipeline — runs research phase, spawns parallel article sub-agents, creates Typefully drafts. Use when running the full content pipeline (usually via cron at 3am).
Use when generating outlines, article structures, content outlines, blog outlines, planning article sections, structuring posts, breaking down topics into sections, or organizing ideas for long-form content. Also use for 'outline this', 'structure this article', or 'plan the sections'.
Reconcile App Store Connect subscriptions and in-app purchases with RevenueCat products, entitlements, offerings, and packages using the asc CLI and the revenuecat mcporter server. Use when setting up or syncing subscription catalogs across ASC and RevenueCat.
Use the asc CLI for all App Store Connect tasks — releases, TestFlight, builds, metadata, screenshots, signing, subscriptions, IAPs, pricing, analytics, users, notarization, and more. Primary catch-all for any App Store Connect work. For deep workflows, also see specialized asc-* skills.
How to clean up duplicate/untracked skills in the skills repo
| name | frontend-slides |
| description | Use when creating animation-rich HTML presentations or convert PPT to web. |
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks.
Before anything else, identify which mode applies:
| Mode | Trigger | Go to |
|---|---|---|
| A: New Presentation | Creating from scratch | Phase 1 (Content Discovery) |
| B: PPT Conversion | User has a .ppt/.pptx file | Phase 4 (PPT Extraction) |
| C: Enhancement | Existing HTML presentation to improve | Read file → enhance |
.html file. Include keyboard nav, swipe support, progress bar..html file; all CSS/JS inline<section class="slide"> per slide:root { --accent: ...; --title-size: clamp(...); }) for easy themingSlidePresentation JS class: keyboard nav (arrows, space), touch/swipe, mouse wheel, progress bar, nav dotsIntersectionObserver for scroll-triggered .reveal animationsEvery presentation needs:
IntersectionObserverOptional enhancements (based on chosen style): custom cursor, particle backgrounds, parallax, 3D tilt, magnetic buttons, counter animations.
<section>, <nav>, <main>)prefers-reduced-motion supportThe Golden Rule: Each slide = exactly one viewport height (100vh/100dvh). Content overflows? Split into multiple slides. Never allow scrolling within a slide.
html { scroll-snap-type: y mandatory; height: 100%; }
body { height: 100%; overflow-x: hidden; }
.slide {
width: 100vw;
height: 100vh;
height: 100dvh; /* mobile browsers */
overflow: hidden; /* CRITICAL */
scroll-snap-align: start;
display: flex;
flex-direction: column;
position: relative;
}
/* ALL typography and spacing must use clamp() */
:root {
--title-size: clamp(1.5rem, 5vw, 4rem);
--body-size: clamp(0.75rem, 1.5vw, 1.125rem);
--slide-padding: clamp(1rem, 4vw, 4rem);
}
| Slide Type | Max Content |
|---|---|
| Title | 1 heading + 1 subtitle + optional tagline |
| Content | 1 heading + 4–6 bullets OR 2 paragraphs |
| Feature grid | 1 heading + 6 cards max |
| Code | 1 heading + 8–10 lines |
| Quote | 1 quote (3 lines max) + attribution |
| Image | 1 heading + 1 image (max 60vh) |
If content exceeds limits → split into multiple slides, never scroll.
@media (max-height: 700px) { /* reduce padding + font sizes */ }
@media (max-height: 600px) { /* hide decorative elements */ }
@media (max-height: 500px) { /* extra compact for landscape phones */ }
@media (max-width: 600px) { /* stack grids, larger font scale */ }
.slide has height: 100vh; height: 100dvh; overflow: hidden;clamp()clamp() or viewport unitsmax-height constraintsmax-height: min(50vh, 400px)auto-fit with minmax()A single self-contained presentation.html file (or [name].html) with all CSS/JS inline. No external dependencies except optional web fonts (Fontshare/Google Fonts).
This skill content is modularized into reference docs for readability.