Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add cubha/claude-workflow-plugins --skill design-lintgit clone --depth 1 https://github.com/cubha/claude-workflow-pluginsWrote 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/cubha/claude-workflow-plugins/design-lint)<a href="https://agentmods.dev/skills/cubha/claude-workflow-plugins/design-lint"><img src="https://agentmods.dev/badge/skills/cubha/claude-workflow-plugins/design-lint/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/cubha/claude-workflow-plugins/design-lint"><img src="https://agentmods.dev/badge/skills/cubha/claude-workflow-plugins/design-lint.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00222 | $0.02580 |
| Opus 5.5 | $0.00089 | $0.01032 |
| Sonnet 5.5 | $0.00044 | $0.00516 |
| Haiku 4.5 | $0.00022 | $0.00258 |
Grade A, and why
design-lint 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 1mo 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 — 116 lines — stays where its author put it; the contents beside it link to each section on GitHub.
DESIGN-LINT — 결정론적 디자인 안티패턴 린터
요구사항: detector 스크립트는 Node.js 18+ 로 실행한다(ESM
.mjs,realpathSync/fileURLToPath사용). 외부 npm 의존은 0개. 라이브 URL 검사 경로는 동봉된 playwright MCP(.mcp.json)를 사용한다.
RESOLVE INPUT → RUN DETECTORS(script) → REPORT → [GATE VERDICT]
존재 이유: "내 디자인 리뷰해줘"는 LLM이 매번 다르게 답해 게이트로 쓸 수 없다. 같은 안티패턴 목록을 순수 함수로 강제하면 동일 입력→동일 판정·0토큰·CI 실행 가능한 진짜 게이트가 된다. 이건 impeccable "anti-pattern ban list"의 고레버 절반(목록을 프롬프트가 아니라 탐지기로). LLM 판단 critic의 결정론 버전이라 보면 된다 — 코드/디자인 수정은 하지 않고 판정만 한다.
경계
| LLM 디자인 리뷰 | design-lint | |
|---|---|---|
| 재현성 | 매번 다름 | 동일 입력→동일 출력 |
| 비용 | 토큰 소모 | 0토큰(스크립트) |
| 게이트 적합 | 부적합 | exit code로 CI 게이트 |
| 잡는 것 | 주관적 미감 | 객관적 안티패턴·토큰 위생 |
design-lint는 객관적으로 검증 가능한 것만 잡는다. "이 레이아웃이 우아한가" 같은 주관 판단은 범위 밖 — 그건 사람/디자인 리뷰 몫이다. 둘은 상보적이다. (
frontend-design스킬이 함께 설치돼 있으면 주관적 미감 방향은 그쪽에 맡기고 이 스킬은 객관 게이트만 담당한다.)
Phase 0: PARSE
| 인자 | 기본값 | 설명 |
|---|---|---|
| 입력 (첫 비플래그) | docs/design/prototype/*.html |
검사할 HTML 글롭, 또는 http(s):// URL |
--tokens {경로} |
docs/design/DESIGN-TOKENS.md 자동탐색 |
토큰 위생 검사 기준. 없으면 hygiene 스킵(false positive 방지) |
--gate |
OFF | error 발견 시 비-제로 종료로 호출 파이프라인을 막는다 |
--max-colors N 등 |
references 참조 | 임계값 오버라이드 |
Phase 1: RESOLVE INPUT
- 입력이
http(s)://이면 → Playwright로 렌더 후 정규화한다. (라이브 사이트·배포본 검사 경로)- 뷰포트 고정 필수 — box 측정(w/h/maxWidth)은 뷰포트 의존이라 고정 안 하면 결정론이 깨진다.
browser_resize로 1280×800을 먼저 박는다(반응형 판정이 필요하면 데스크탑+모바일 2개 고정 뷰포트로). browser_navigate→ 임시 HTML:browser_evaluate로document.documentElement.outerHTML덤프를<style>인라인 형태로 저장(정규식 detector 입력).- computed-style 관측(Group A: 대비비·box-model·구조):
node scripts/design-lint.mjs --observe-snippet로 수집 스니펫 문자열을 얻어 그대로browser_evaluate에 주입 → 반환된 관측 배열(JSON)을obs.json으로 저장 → 본 실행에--observed obs.json으로 전달한다. (playwright npm 의존 0 — computed-style COLLECT_SNIPPET 패턴) --observed없이 실행하면 Group A detector는 skip(reportobserved: skipped)되고 정규식 detector만 돈다. 라이브URL 경로에서만 대비비/box-model이 활성된다.
- 뷰포트 고정 필수 — box 측정(w/h/maxWidth)은 뷰포트 의존이라 고정 안 하면 결정론이 깨진다.
- 입력이 글롭이면 → Glob으로 파일 목록 확정. 0개면 사용자에게 경로 확인.
--tokens미지정 시docs/design/DESIGN-TOKENS.md를 Glob으로 자동탐색. 있으면 토큰 위생 ON, 없으면 OFF(경고만).
What ships with it
3 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.
- 1mo ago First seen · 116 lines · 222 tokens per session scan A ffec74a854ff
design-lint is a skill published in the GitHub repository cubha/claude-workflow-plugins (2 stars, last pushed 3mo ago), licensed MIT. It adds 222 tokens to every session and 2,580 once invoked, about $0.0009 per session on Opus 5.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-31.
Other skills, from other repositories
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system…
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
fec-ui-design
A frontend UI design guide for creating or reviewing product-specific interfaces, including layout, visual style, design systems, interaction states, responsive behavior, charts, and visual quality checks. It adapts the design to the product's users and main task.
design-tokens
This skill should be used when a user wants to scaffold or refactor a design token system — e.g. "set up design tokens", "create a design system foundation", "extract these hardcoded colors into tokens", "add a type scale", "theming setup", or "dark mode tokens". It produces a single source of truth for color, type…
fec-tailwind-design-system
A guide to organizing a Tailwind CSS design system: the shared rules for colors, spacing, themes, components, and responsive layouts.