Menu
フロントエンドプレゼンテーション、デモンストレーション、およびスライド構成のためのパターンとベストプラクティス。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use after a complex task, failure, or when reviewing what was learned. Teaches how to write growth logs that extract reusable patterns — not diary entries.
Design a goal-oriented agent loop, and review it for the ways loops go wrong — spinning and burning tokens, Goodhart-gaming the verifier, or running a wrong answer to completion. Two actions: (1) WRITE a loop — gate whether to build it, define a machine-decidable goal, pick the loop type, pick a skeleton; (2) REVIEW a loop — run it past five failure modes plus decidability, boundaries, fallback, judge independence, and keep-judgment-with-the-human red lines. Use when designing an autonomous agent loop, or when you already have one and worry it will spin, cheat, or run a wrong answer to the end. Complements the mechanism-layer loop skills (autonomous-loops, continuous-agent-loop) by covering the judgment layer they don't. 中文触发：写 loop、设计 loop、做一个 loop、检查 loop 对不对、loop 体检、loop 会不会跑飞、可判定目标、五个崩法、plan build judge。English triggers: design an agent loop, write a loop, check a loop, loop review, prevent a runaway loop, goal-oriented loop, decidable goal, plan/build/judge.
Stop hook that blocks Claude from finishing until quality checks pass. Detects rationalization patterns (surface text heuristics), stale learning logs (filesystem mtime), and low disk space. Complements self-audit by mechanically enforcing learning capture habits.
React Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.
Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
| name | frontend-slides |
| description | フロントエンドプレゼンテーション、デモンストレーション、およびスライド構成のためのパターンとベストプラクティス。 |
| origin | ECC |
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).
.ppt or .pptx slides into an HTML presentationBefore generating, read STYLE_PRESETS.md for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.
Choose one path:
.ppt or .pptxAsk only the minimum needed:
If the user has content, ask them to paste it before styling.
Default to visual exploration.
If the user already knows the desired preset, skip previews and use it directly.
Otherwise:
.ecc-design/slide-previews/.Use the preset guide in STYLE_PRESETS.md when mapping mood to style.
Output either:
presentation.html[presentation-name].htmlUse an assets/ folder only when the deck contains extracted or user-supplied images.
Required structure:
STYLE_PRESETS.mdTreat this as a hard gate.
Rules:
.slide must use height: 100vh; height: 100dvh; overflow: hidden;clamp()Use the density limits and mandatory CSS block in STYLE_PRESETS.md.
Check the finished deck at these sizes:
If browser automation is available, use it to verify no slide overflows and that keyboard navigation works.
At handoff:
Use the correct opener for the current OS:
open file.htmlxdg-open file.htmlstart "" file.htmlFor PowerPoint conversion:
python3 with python-pptx to extract text, images, and notes.python-pptx is unavailable, ask whether to install it or fall back to a manual/export-based workflow.Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.
Include:
main, section, nav)prefers-reduced-motionUse these maxima unless the user explicitly asks for denser slides and readability still holds:
| Slide type | Limit |
|---|---|
| Title | 1 heading + 1 subtitle + optional tagline |
| Content | 1 heading + 4-6 bullets or 2 short paragraphs |
| Feature grid | 6 cards max |
| Code | 8-10 lines max |
| Quote | 1 quote + attribution |
| Image | 1 image constrained by viewport |
-clamp(...)frontend-patterns for component and interaction patterns around the deckliquid-glass-design when a presentation intentionally borrows Apple glass aestheticse2e-testing if you need automated browser verification for the final deck