design-linter

design-linter is a skill for Claude Code, Codex from CallMeMing/claude-skills-ming. It costs 125 tokens per session (4,525 once invoked), scanned A, original, MIT.

A design-system checker that compares code with the project's documented rules for spacing, colours, and other visual choices.

In plain words
What is it for?
Use it to find design violations, produce reports, and get suggested code fixes based on the project's documentation or CSS variables.
Why use it?
It helps catch styling that does not follow the shared design rules before inconsistent interfaces reach users.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to find design violations, produce reports, and get suggested code fixes based on the project's documentation or CSS variables.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/callmeming/claude-skills-ming/design-linter
Install

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.

Any agent
npx skills add CallMeMing/claude-skills-ming --skill design-linter
Clone the repo
git clone --depth 1 https://github.com/CallMeMing/claude-skills-ming

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for design-linter

README.md
[![agentmods](https://agentmods.dev/badge/skills/callmeming/claude-skills-ming/design-linter/github.svg)](https://agentmods.dev/skills/callmeming/claude-skills-ming/design-linter)
Your own site
<a href="https://agentmods.dev/skills/callmeming/claude-skills-ming/design-linter"><img src="https://agentmods.dev/badge/skills/callmeming/claude-skills-ming/design-linter/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.

agentmods 80×15 button for design-linter

Your own site · 80×15
<a href="https://agentmods.dev/skills/callmeming/claude-skills-ming/design-linter"><img src="https://agentmods.dev/badge/skills/callmeming/claude-skills-ming/design-linter.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 125 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,525 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00125 $0.04525
Opus 5 $0.00063 $0.02263
Sonnet 5 $0.00025 $0.00905
Haiku 4.5 $0.00013 $0.00453

Measured 11d ago against content hash 7c4537d06481, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

design-linter 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 11d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (design-linter.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

design-linter/SKILL.md · 389 lines

How it starts

The opening of the file, as written. The whole thing — 389 lines — stays where its author put it; the contents beside it link to each section on GitHub.

🌐 Language Policy (i18n)

Language Detection: Detect the language of the user's input.

Response Consistency: Always respond in the same language as the user's input (e.g., if the user asks in English, output the report and suggestions in English; if in Chinese, use Chinese).

Core Logic: The internal rules and design specs (like spacing, colors) remain the same regardless of the language.

For English Users: When generating violation reports and fix suggestions, translate the "violation description" and "fix suggestion" into English. Keep the code snippets as-is.

设计规范走查器技能

技能概述

自动检测生成的代码是否违反design-system.md中的规范,确保代码符合设计系统要求。提供详细的违规报告和修复建议。

核心功能

  1. 规范解析 - 解析design-system.md中的设计规范
  2. 代码分析 - 分析生成的代码是否符合规范
  3. 违规检测 - 检测违反规范的代码模式
  4. 修复建议 - 提供具体的修复建议和正确示例
  5. 报告生成 - 生成详细的规范检查报告

设计系统规范摘要

技术栈要求

  • 框架: React + TypeScript
  • 样式: Tailwind CSS v4 (CSS-first 配置)
  • 组件库: Radix UI + shadcn/ui
  • 设计系统: 基于 CSS 变量的自定义设计令牌系统 (tokens.css + globals.css)

强制规范约束

1. 间距约束
  • 纵向文字间距: ≥ 8px (对应 gap-spacing-te-smmt-spacing-te-sm)
  • 横向元素间距: ≥ 4px (对应 gap-spacing-te-xs)
  • 禁止: 生成如 mt-[2px]gap-[3px] 的非标代码
  • 正确: 使用 spacing-te token:spacing-te-xs(4px)、spacing-te-sm(8px)、spacing-te-l(12px)、spacing-te-md(16px)、spacing-te-lg(24px)
2. 字体语义类
  • 禁止: 在组件内使用 text-[xxpx]text-xstext-smtext-lg 等非语义类
  • 必须: 统一调用预设的语义类:text-te-xs(10px)、text-te-sm(11px)、text-te-base(13px)、text-te-md(14px 默认)、text-te-lg(16px)、text-te-xl(20px)、text-te-2xl(24px)
  • 目标: 确保排版节奏一致性和可维护性
3. Icon着色协议
  • 要求: 当 Icon 与文字同行出现时,必须显式为 Icon 指定语义颜色变量
  • 禁止: 使用浏览器默认黑色或硬编码颜色值
  • 正确: 使用 text-current 继承父级颜色,或显式指定 text-primarytext-muted-foreground
  • 注意: 使用 size-4 而非 w-4 h-4 语法
4. 内容区Padding分级
  • 三级规范:
    • spacing-te-l: 12px (紧凑间距)
    • spacing-te-md: 16px (默认,标准间距)
    • spacing-te-lg: 24px (大间距)
  • 禁止: 随意指定数值如 p-[14px]px-[18px]
  • 正确: 使用 p-spacing-te-lp-spacing-te-mdp-spacing-te-lg,或组合如 px-spacing-te-lg

Read the full file on GitHub · 389 lines

Files

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.

Changes

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.

  1. 11d ago First seen · 389 lines · 125 tokens per session scan A 7c4537d06481

Subscribe to this mod's changes

design-linter is a skill published in the GitHub repository CallMeMing/claude-skills-ming (1 stars, last pushed 4mo ago), licensed MIT. It adds 125 tokens to every session and 4,525 once invoked, about $0.0006 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-31.

Related

Other skills, from other repositories

baoyu-diagram

Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system…

JimLiu/baoyu-skills · 146 tokens

accessibility

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

addyosmani/web-quality-skills · 51 tokens

understand-figma

Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.

Egonex-AI/Understand-Anything · 47 tokens

sxo

Search Experience Optimization (SXO) — the bridge between SEO and UX/CRO. Audits the full journey from the SERP click to the on-page goal: SERP click-through factors (title/meta/rich results that win the click), then post-click experience signals that keep users and drive conversions — above-the-fold relevance and…

nowork-studio/notfair-plugin · 235 tokens

create-workflow-diagram

Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions. Renders beautiful HTML diagrams with connected nodes, arrows, and labels, then screenshots them for sharing.

gooseworks-ai/goose-skills · 45 tokens

create-chatgpt-mockup

Render pixel-accurate ChatGPT mobile (iOS) screen mockups in light mode from a thread JSON. Supports user text bubbles, user image attachments, assistant markdown prose, citation chips, the OpenAI spiral logo, the Apps-SDK GPT chip in the composer, and three header styles (model-tag, plain title, "Get Plus"). Fixed…

gooseworks-ai/goose-skills · 90 tokens