메뉴
フロントエンドプレゼンテーション、デモンストレーション、およびスライド構成のためのパターンとベストプラクティス。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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 deckUse 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.