Borrowing it
Nothing to install: this file belongs to kwakseongjae/oh-my-design. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/kwakseongjae/oh-my-design/main/.claude/skills/omd-showcase/SKILL.mdgit clone --depth 1 https://github.com/kwakseongjae/oh-my-designWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kwakseongjae/oh-my-design/omd-showcase)<a href="https://agentmods.dev/skills/kwakseongjae/oh-my-design/omd-showcase"><img src="https://agentmods.dev/badge/skills/kwakseongjae/oh-my-design/omd-showcase/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kwakseongjae/oh-my-design/omd-showcase"><img src="https://agentmods.dev/badge/skills/kwakseongjae/oh-my-design/omd-showcase.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00071 | $0.00760 |
| Opus 5 | $0.00036 | $0.00380 |
| Sonnet 5 | $0.00014 | $0.00152 |
| Haiku 4.5 | $0.00007 | $0.00076 |
Grade A, and why
omd:showcase scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
omd:showcase — 페이지에서 시연 영상까지 한 명령
엔진: test-v2/tools/showcase.mjs (설치본에서는 omd showcase). 실시간 녹화가 아니라 프레임 캡처다 —
스크롤 위치를 프레임마다 ease(t)로 놓고 2배율 스크린샷을 찍은 뒤 ffmpeg로 30fps H.264를 만든다.
같은 입력이면 같은 영상이 나오고, 페이지 리빌은 캡처 전에 한 번 끝내 둔다(시연은 구도·에셋·리듬을 보여
주는 것이지 리빌 타이밍을 재는 것이 아니다).
쓰는 법
test-v2/tools/가 있는 레포에서는 위쪽 두 줄을, 없으면(설치된 패키지) 아래 두 줄을 쓴다 — 같은 엔진에 같은 플래그다.
node test-v2/tools/showcase.mjs <run>/render.html --out demo.mp4 --seconds 12 --gif --label "omd"
node test-v2/tools/showcase.mjs --compare a/render.html b/render.html c/render.html --labels "hallmark|ui-ux-pro-max|omd" --out compare.mp4
omd showcase <run>/render.html --out demo.mp4 --seconds 12 --gif --label "omd"
omd showcase --compare a/render.html b/render.html c/render.html --labels "hallmark|ui-ux-pro-max|omd" --out compare.mp4
- 단일: mp4(+gif). 비교: arm마다 개별 캡처 후
hstack— 페이지 높이가 달라도 각자 0→끝으로 정규화돼 동기 스크롤이 된다. - 기본 1440×900 @2x, 30fps, 시작·끝 1.2초 홀드.
--dpr 1이면 가볍다. - ffmpeg가 없으면 프레임 PNG만 남기고 안내한다(
omd:setup이 감지한다).
콘텐츠 룰 (X·Threads 소재일 때)
- 페이지 하단의 비공식 고지가 프레임에 보여야 한다 — 이 도구는 고지를 만들지 않는다.
- 레퍼런스 브랜드를 태그·멘션하지 않는다. 봉인 벤치 수치를 영상·캡션에 넣지 않는다.
- 비교 영상의 조건(같은 브리프·같은 모델·같은 이미지 채널)을 캡션 첫 줄에 적는다.
산출
showcase.mp4(+.gif) — trace.md가 있는 런이면 그 아래에 showcase: 한 줄(프레임 수·초·명령)을 덧붙인다.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 42 lines · 71 tokens per session scan A 99ebf60d9241
omd:showcase is a skill published in the GitHub repository kwakseongjae/oh-my-design (498 stars, last pushed 4d ago), licensed MIT. It adds 71 tokens to every session and 760 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
brandmd
Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.
design-engineering
Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…
awesome-design-md-cn
A collection of Markdown design-system documents for AI design and coding agents. The documents describe a product or website’s colors, fonts, components, spacing, and visual hierarchy.
build-threejs-scroll-worlds
Build rich, scroll-controlled real-time Three.js experiences as one persistent 3D world whose camera, lighting, atmosphere, materials, objects, DOM story, and interactions evolve across authored chapters. Use for 3D scrollytelling, scroll-driven WebGL worlds, camera journeys, interactive portfolios, product stories…
cinematic-gsap-lenis-motion-system
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.