frontend-slides — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited frontend-slides (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
Focus on:
Avoid generic AI-generated aesthetics:
Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
These invariants apply to EVERY slide in EVERY presentation:
.slide must have height: 100vh; height: 100dvh; overflow: hidden;clamp(min, preferred, max) — never fixed px/remmax-height constraintsmax-height: min(50vh, 400px)prefers-reduced-motion support-clamp(), -min(), -max() are silently ignored) — use calc(-1 * clamp(...)) insteadWhen generating, read `viewport-base.css` and include its full contents in every presentation.
| Slide Type | Maximum Content |
|---|---|
| Title slide | 1 heading + 1 subtitle + optional tagline |
| Content slide | 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs |
| Feature grid | 1 heading + 6 cards maximum (2x3 or 3x2) |
| Code slide | 1 heading + 8-10 lines of code |
| Quote slide | 1 quote (max 3 lines) + attribution |
| Image slide | 1 heading + 1 image (max 60vh height) |
Content exceeds limits? Split into multiple slides. Never cram, never scroll.
Determine what the user wants:
When enhancing existing presentations, viewport fitting is the biggest risk:
max-height: min(50vh, 400px). If slide already has max content, split into two slides.slide has overflow: hidden, new elements use clamp(), images have viewport-relative max-h~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.