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-feel/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-feel)<a href="https://agentmods.dev/skills/kwakseongjae/oh-my-design/omd-feel"><img src="https://agentmods.dev/badge/skills/kwakseongjae/oh-my-design/omd-feel/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-feel"><img src="https://agentmods.dev/badge/skills/kwakseongjae/oh-my-design/omd-feel.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.00228 | $0.03995 |
| Opus 5 | $0.00114 | $0.01997 |
| Sonnet 5 | $0.00046 | $0.00799 |
| Haiku 4.5 | $0.00023 | $0.00400 |
Grade A, and why
omd:feel 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 12d 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.
How it starts
The opening of the file, as written. The whole thing — 155 lines — stays where its author put it; the contents beside it link to each section on GitHub.
omd:feel — Interface Feel, Quantified
업계가 감(感)으로 쓰던 인터페이스 디테일 — "이 정도 속도", "이 정도 그림자", "이 정도 여백" — 을 출처 등급이 매겨진 체크 가능한 숫자로 바꿔 적용하고 감사하는 스킬. Jakub Krehel의 "great interfaces are a collection of small things that compound" 명제를 계승하되, 어떤 숫자를 맞춰야 하는지 / 언제 틀렸는지까지 수치로 답한다.
핵심 통찰: 품질은 수십 개 작은 제약을 각자의 band 안에 가둔 것의 적분이다. 600ms짜리 체크박스 틱, 1px focus ring, 본문 2.85:1 대비, @media (hover:hover) 게이트 없는 hover lift — 하나하나가 "feel"에서 측정 가능한 차감이다. 이 스킬은 그 차감을 막는다.
전체 규칙(17축·113개)은 reference.md에, 각 숫자의 출처·tier·방법론은 provenance.md에 있다. 아래 cheat-sheet는 항상 로드되는 핵심이고, 깊은 감사·엣지 축은 reference를 읽는다.
언제 쓰나
- APPLY — UI를 새로 만들거나 고칠 때 정량 feel 규칙을 주입. ("feel 좋게", "인터랙션 손봐줘", "디테일 적용")
- AUDIT — 기존 HTML/JSX/TSX/CSS를 규칙표 대비 점검해 feel-score + BLOCK/WARN/FYI 리포트. ("feel 점검", "이 화면 감사해줘")
UI 작업이 아니면 트리거하지 않는다. 카피·정보구조만 다루는 작업은 대상 아님.
0. 출처 등급 → 강제 강도 (이 스킬의 심장)
모든 규칙은 tier를 달고 있고, tier가 강제 강도를 정한다. 이게 "감을 정직하게 수치화"하는 방법 — spec 숫자는 게이트, 취향 숫자는 제안.
| Badge | Tier | APPLY | AUDIT severity |
|---|---|---|---|
| 🟢 SPEC | spec-authoritative (W3C/WCAG·HIG·normative) | 강제 | BLOCK |
| 🟢 DS | ds-token (커밋된 디자인시스템 토큰) | 강제 (브랜드가 덮지 않으면) | BLOCK |
| 🟡 CONV | industry-convention (독립 실무자 ≥2 수렴) | 기본값으로 적용 | WARN |
| ⚪ OP | single-opinion (신뢰할 만한 1인) | 제안만 | FYI |
| ⚪ FOLK | folklore-unverified (근거 추적 불가) | 제안 + tier 명시 | FYI |
분포: SPEC 61 · DS 24 · CONV 19 · OP 7 · FOLK 2 → 85/113이 spec·token 근거(강제 가능).
DESIGN.md가 항상 이긴다. 브랜드
DESIGN.md토큰이 규칙과 충돌하면 브랜드 토큰이 권위. 이 규칙들은 브랜드가 침묵할 때의 기본값이지 override가 아니다. 프로젝트 루트에 DESIGN.md가 있으면omd:apply로 먼저 토큰을 읽고, 빈 축만 feel 규칙으로 채운다.
1. Cheat-sheet — 항상 적용하는 핵심 숫자
tier 표기: 🟢=강제, 🟡=기본값, ⚪=제안. 충돌 시 DESIGN.md > 🟢 > 🟡 > ⚪.
Motion & Timing
- 일상 UI 전환 ~200ms (hover ≤150 · popover ~200 · overlay/modal ~300). 범위 150–300ms, >400ms = 굼떠 보임. 🟡
- duration은 50ms 그리드에 양자화 (220/333ms 금지). 🟢
- exit ≈ 0.8 × enter (열 때보다 닫을 때 빠르게). 🟢
- 한 개의 전역 duration 금지 — 이동 면적/거리에 비례. 🟢
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 12d ago First seen · 155 lines · 228 tokens per session scan A 6a2e383b1d79
omd:feel is a skill published in the GitHub repository kwakseongjae/oh-my-design (500 stars, last pushed 4d ago), licensed MIT. It adds 228 tokens to every session and 3,995 once invoked, about $0.0011 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-08-30.
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.
s2-docs
Look up Spectrum 2 (S2) component documentation, design guidelines, and usage patterns when building with React Spectrum or Spectrum Web Components. Use when the user mentions Spectrum, S2, React Spectrum, RSP, Spectrum Web Components, or SWC, or names a Spectrum component (Button, Picker, ComboBox, TextField…
extract-design-system
Extract design primitives from a public website and generate starter token files for your project.