菜单
Check | Design system contract — tokens, components, typography, dark mode
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | arib-check-design |
| argument-hint | [<path-or-glob>] |
| description | Check | Design system contract — tokens, components, typography, dark mode |
Audits a directory or set of files against architecture/DESIGN_SYSTEM.md.
The pre-tool-use hook already blocks raw color literals at write time; this
skill checks everything else: component baseline drift, typography
mixing, dark-mode default, motion patterns, spacing literals.
This skill complements arib-check-a11y — accessibility checks WCAG; this
checks the visual contract that prevents drift toward inconsistency.
/arib-deep-audit./arib-check-design # whole UI tree
/arib-check-design components/ # subdir
/arib-check-design components/billing/checkout.tsx # single file
Read architecture/DESIGN_SYSTEM.md. If absent, abort and tell the user to
run the bootstrap (which generates a default).
Scan target files for forbidden patterns (raw hex, rgb(), hsl(), named CSS colors) outside the exempt paths declared in DESIGN_SYSTEM.md.
grep -rEn '#[0-9a-fA-F]{3,8}\b|\brgb[a]?\([^)]*\)|\bhsl[a]?\([^)]*\)' \
--include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte' \
--exclude-dir=node_modules --exclude-dir=tests \
<target>
Expected: zero hits in non-exempt paths. Each hit is a finding.
Detect components imported from forbidden libraries when the baseline is shadcn. Examples of drift:
import {} from '@mui/material' when baseline is shadcn.import {} from 'antd' when baseline is shadcn.Report the import statement and the file. Suggest the shadcn equivalent.
Look in app/layout.tsx, _app.tsx, index.html, tailwind.config.* for
font declarations. Flag:
dir="rtl" or lang="ar" in
any source file.font-size: <px> literals (warn — too noisy to block).For Tailwind projects: confirm darkMode: 'class' in tailwind config.
For other projects: confirm a dark class or data-theme="dark" is the
default applied to <html> or <body>.
If the project is consumer-facing and explicitly chose light-default, expect
an ADR in architecture/DECISIONS.md. If neither dark-default nor an ADR
exists, raise a WARN.
grep -rEn 'animate-[a-z]+|@keyframes|<motion\.' --include='*.tsx' --include='*.css' <target>
For each match, check whether it respects prefers-reduced-motion. The
common pattern is a motion-safe: Tailwind prefix or a media query around
the animation.
Auto-playing animations on dashboards/tables/forms = BLOCK.
PASS: no findings.
WARN: drift exists but is bounded (e.g. one stray hex literal in a non-
critical component).
BLOCK: token rules violated in ≥3 files, or a forbidden component library
is imported in a primary user surface, or auto-play motion on data
screens.
# Design Contract Audit — <target> — <date>
## Summary
- token violations: N
- component drift: N
- typography mix: N
- dark mode: OK | WARN | BLOCK
- motion: OK | WARN | BLOCK
## Findings
### F1 — <file:line> — <severity>
<one-paragraph description>
**Fix:** <one-sentence actionable suggestion>
(...)
architecture/DESIGN_SYSTEM.md — the contract itself.arib-check-a11y — accessibility (separate concern)..claude/hooks/pre-tool-use.sh — write-time token enforcement.Memory | Code-graph subsystem — a native lightweight IMPORT graph (which file imports which, god-node candidates) built with ripgrep/grep, so a large monorepo can be navigated by structure instead of re-grepping every session. build/refresh/query. Honest scope: structural import graph, NOT semantic (no call-graph/type resolution); no Graphify dependency. Loads ON DEMAND only (zero always-on tokens). ADR-034.
Dev | Over-engineering review — reads a diff/module and returns a delete-list of bloat (single-use abstractions, premature generalization, speculative config, dead options) WITHOUT stripping legitimate structure. Advisory: returns recommendations, never auto-deletes. The on-demand companion to the ponytail-lite tripwire hook. Authored natively (no Ponytail dependency). ADR-033.
Wave | Pre-wave requirement lock — Act 1 derives the requirements from the codebase + memory (an honest grill, not guesswork), Act 2 hands the locked plan to an independent model (Codex) to tear apart until sign-off. Produces waves/<id>/PLAN.md + PLAN-REVIEW-LOG.md. Auto-chained idempotently from /arib-wave-start. If Act 2 can't run (no Codex), the wave proceeds but HOLDS MERGE for a human. Absorbs grill-me-codex (ADR-032).
Wave | Start a multi-session delivery wave — branch, plan, parallel architect+planner
Engine | Command the engineering team to deliver a known goal — dispatches the engineer-manager to decompose → dispatch specialists (parallel where safe) → integrate → reconcile (verification-agent) → merge gate. Scales its own reach: runs inline for a bounded goal, escalates to a parallel Workflow for a broad one, and paces under /loop for a multi-turn campaign — only when it needs to. Use when a goal needs a coordinated TEAM, not one specialist. Sibling of /arib-engine: the engine DISCOVERS its own backlog; /arib-build EXECUTES a goal you hand it.
Stack | NestJS architecture & patterns reference — modules/providers/DI, DTO+validation, guards/interceptors/pipes/filters, config, async lifecycle, testing, and the security + performance pitfalls that bite at scale. Use when building or reviewing a NestJS backend. Composes with security-auditor (OWASP), database-guardian (TypeORM/Prisma migrations), and performance (N+1). Authored natively (the ECC graft was unsourceable; this is CCM's own, MIT).