Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Frontend Slides · loulanyue | DecimalAI

design mediaby loulanyue

Frontend Slides

loulanyue/frontend-slides

Source loulanyue/awesome-claude-notes ↗License MIT

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.

SkillScore59Maintained

Automatic

Frontend / UI pack

Last verified 8/22/2026

What it changes

Passed 13 of 22 test cases with the skill, and 9 of 22 without it.

Without skill41%

With skill59%

Checks it passed that the model alone missed

Limits feature grid cards to a maximum of 6 per slide.
Validates slide viewports against 375x667 screen size.
Recommends expressive web fonts from Google Fonts or Fontshare.

and 4 more in the full report

5 fixed8 passed either way8 still failing1 broke

Pass-rate lift: +18 pp
Tokens: +46%
Agent turns: 0%
Response time: -17%

Model gemini-3.6-flashMeasured 8/22/2026v613 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/loulanyue-frontend-slides/SKILL.md https://app.decimal.ai/s/loulanyue-frontend-slides/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add loulanyue-frontend-slides, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/loulanyue-frontend-slides/ and pins it in .decimal/skills.lock

decimalai skills add loulanyue-frontend-slides

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/loulanyue-frontend-slides/SKILL.md https://app.decimal.ai/s/loulanyue-frontend-slides/SKILL.md

Raw file: /s/loulanyue-frontend-slides/SKILL.md ↗ · machine-readable summary at /s/loulanyue-frontend-slides.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 5

Prompt

I need to perform responsive verification on my HTML slide deck across multiple target display sizes before presenting. Which specific screen resolutions should I test to ensure no layout overflow occurs?

What was checked, without and with the skill
Checked	Without skill	With skill
Validates slide viewports against 1920x1080 screen size.	Passed	Passed
Validates slide viewports against 375x667 screen size.	Missed	Passed

case-10 · gemini-3.6-flash · 8/22/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md185 linessingle file

Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).

When to Activate

Creating a talk deck, pitch deck, workshop deck, or internal presentation
Converting .ppt or .pptx slides into an HTML presentation
Improving an existing HTML presentation's layout, motion, or typography
Exploring presentation styles with a user who does not know their design preference yet

Non-Negotiables

Zero dependencies: default to one self-contained HTML file with inline CSS and JS.
Viewport fit is mandatory: every slide must fit inside one viewport with no internal scrolling.
Show, don't tell: use visual previews instead of abstract style questionnaires.
Distinctive design: avoid generic purple-gradient, Inter-on-white, template-looking decks.
Production quality: keep code commented, accessible, responsive, and performant.

Before generating, read STYLE_PRESETS.md for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.

Workflow

1. Detect Mode

Choose one path:

New presentation: user has a topic, notes, or full draft
PPT conversion: user has .ppt or .pptx
Enhancement: user already has HTML slides and wants improvements

2. Discover Content

Ask only the minimum needed:

purpose: pitch, teaching, conference talk, internal update
length: short (5-10), medium (10-20), long (20+)
content state: finished copy, rough notes, topic only

If the user has content, ask them to paste it before styling.

Track record

Benchmark

13 / 22

test cases passed, vs 9 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

loulanyue / awesome-claude-notes

docs/ja-JP/skills/frontend-slides/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v6

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Frontend Slides

When to Activate

Non-Negotiables

Workflow

1. Detect Mode

2. Discover Content

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills