frontend-slides

Overview of frontend-slides skill

What frontend-slides does

The frontend-slides skill helps you create animation-rich HTML presentations that run in the browser, either from scratch or by converting .ppt/.pptx content into a web-native deck. It is best for users who want a polished presentation without building a full app or relying on a generic slide template. The main value of the frontend-slides skill is fast visual exploration: it pushes the design toward distinctive, presentation-ready layouts instead of forcing you to pick a style up front.

Who it fits best

Use frontend-slides for talks, pitch decks, workshop decks, internal demos, and any slide set where motion, typography, and layout matter. It is especially useful for non-designers who can describe the goal but do not yet know the exact aesthetic. It is less useful if you need a standard corporate deck with heavy brand compliance, editable PowerPoint output, or slides that must be authored inside a conventional office suite.

What matters before install

The strongest differentiators are browser-only delivery, zero dependencies by default, and strict viewport fitting. That means the skill is optimized for self-contained HTML output where each slide fills one screen and never scrolls internally. If you want a frontend-slides skill that produces compact, high-impact slides with clean motion and predictable rendering, this is the right fit. If your workflow depends on large text blocks, speaker notes as primary content, or multi-file web apps, you will need to adapt the result.

How to Use frontend-slides skill

frontend-slides install and setup

Install the skill with npx skills add affaan-m/everything-claude-code --skill frontend-slides. After install, start with skills/frontend-slides/SKILL.md, then read STYLE_PRESETS.md before generating anything. That second file is not optional: it contains the viewport-safe base CSS, slide density limits, preset guidance, and the CSS rules that keep the deck usable instead of merely attractive.

How to write a good prompt

A strong frontend-slides prompt gives the skill a clear presentation job, audience, slide count range, and source material. Good inputs look like this: “Create a 7-slide investor pitch for a B2B scheduling app; keep it dark, editorial, and motion-forward; include a title, problem, solution, product flow, proof, pricing, and closing CTA.” For PPTX conversion, specify the source deck’s purpose, which slides to preserve, and which sections can be condensed. For design exploration, describe the message and audience rather than naming a generic theme.

Practical workflow

Start by deciding whether you need a new deck or a conversion. Then provide the content in rough outline form, not as a finished script, so the skill can shape the hierarchy and pacing. Ask for a first pass that focuses on structure and visual direction, then refine motion, density, and brand tone after you review the preview. Keep each slide’s content compact; the skill works best when you treat each screen as a single visual statement, not a document page.

Files to read first

If you want the fastest path to reliable output, read SKILL.md for activation rules and constraints, then STYLE_PRESETS.md for layout limits and style options. In this repo, those are the only supporting files, so the install decision is straightforward: the skill is intentionally self-contained, and the quality of output depends more on following its rules than on hunting through extra resources.

frontend-slides skill FAQ

Is frontend-slides good for ordinary slide prompts?

Yes, but it is better than a generic prompt when you want HTML-first presentation output with deliberate motion and visual polish. A normal prompt can describe slides; the frontend-slides skill also encodes viewport fit, density control, and style exploration. That makes it more reliable when presentation quality depends on layout discipline, not just copy.

Can beginners use frontend-slides?

Yes. The skill is actually friendly to beginners because it reduces design ambiguity: you can describe the talk goal, audience, and mood, then let the skill propose a direction. The main beginner mistake is overloading slides with too much text. If you keep the brief concise, the skill can do more of the composition work for you.

When should I not use it?

Do not use frontend-slides if you need editable .pptx output as the final artifact, if the content must scroll, or if every slide must follow a strict brand template with minimal visual deviation. It is also a poor fit for dense reports, reference docs, or decks that depend on long speaker notes rather than on-slide communication.

How to Improve frontend-slides skill

Give the skill better source material

The biggest quality jump comes from clearer inputs: audience, objective, slide count, and any must-keep content. Instead of “make a presentation about onboarding,” try “make an 8-slide onboarding demo for product managers, aimed at explaining activation metrics, with one slide per concept and a strong closing recommendation.” For frontend-slides for UI Design, include the product context, the emotional tone you want, and whether the deck should feel experimental, premium, technical, or minimal.

Protect the viewport constraint

Most failures come from asking for too much content per slide. If a slide needs more than one main idea, split it. If you want code, keep it short. If you want a comparison, limit the number of columns or cards. The frontend-slides guide is simple: preserve clarity first, then add motion and styling second.

Iterate on motion and style, not just text

After the first draft, improve the deck by refining transitions, spacing, typography, and preset choice. Ask for narrower changes such as “make the opening slide more cinematic,” “reduce visual noise on the feature slide,” or “swap to a warmer editorial palette while keeping the same structure.” That kind of revision is usually more effective than asking for a full redesign.

Watch for common failure modes

The most common problems are overpacked slides, generic visual language, and weak hierarchy. If the output looks template-like, explicitly ask for a more distinctive composition and less default SaaS styling. If the deck feels thin, add one concrete proof point, one product flow detail, or one audience-specific example. The frontend-slides skill improves fastest when you treat it like a visual editor: concise brief in, precise refinements out.