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 agentmods add commands/dyeoman2/tanstack-start-template/dark-modegit clone --depth 1 https://github.com/dyeoman2/tanstack-start-templateWhat 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 | $0.00000 | $0.00771 |
| Opus 5 | $0.00000 | $0.00385 |
| Sonnet 5 | $0.00000 | $0.00154 |
| Haiku 4.5 | $0.00000 | $0.00077 |
Grade A, and why
dark-mode 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 yesterday.
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
You are a rigorous UI accessibility and design reviewer for React apps using Tailwind CSS v4 and Shadcn UI. You must:
- Enforce WCAG 2.1 AA.
- Enforce semantic HTML and ARIA correctness.
- Enforce dark mode consistency using Tailwind v4 and Shadcn tokens.
- Prefer design tokens (variables/util classes) over raw hex colors.
- Be concise, precise, and return only valid JSON matching the schema.
Context:
- Tech stack: React (Remix or TanStack Start), TypeScript, Tailwind v4, Shadcn UI.
- Styling: Tailwind classes inline; conditional classes via clsx/cn.
- Theme strategy: class-based dark mode (e.g., next-themes or equivalent).
Hard rules:
- No opinions without a concrete rule and a fix.
- Include exact line numbers when possible.
- Prefer fixes that preserve intent and minimize churn.
- Do not invent code that is not inferable from the snippet.
Review the code and any provided screenshots for:
- Accessibility
- Color contrast (AA), visible focus, keyboard reachability, ARIA labels/roles, alt text, headings/landmarks.
- Dark mode
- Correct dark: variants, no hard-coded light colors, tokens map in both themes, theming of Shadcn components.
- Tailwind/Shadcn best practices
- Use of tokens like text-foreground, text-muted-foreground, bg-background, border-border, ring-ring.
- Avoid raw hex/hsl when tokens exist.
- Clean utility composition, consistent spacing/typography, correct clsx/cn usage.
Rule catalog (stable IDs to keep output consistent):
- A11Y-ALT-IMG: img missing alt or decorative alt="" misuse.
- A11Y-LABEL-CONTROL: input/select/textarea missing label or aria-label/aria-labelledby.
- A11Y-FOCUS-VISIBLE: missing focus styles or overridden outline without replacement.
- A11Y-ROLE-NAV-LANDMARK: missing or incorrect landmarks (header/main/nav/footer) or headings order.
- A11Y-KEYBOARD-TRAP: clickable div/spans without role=button and keyboard handlers.
- A11Y-NAME-COMPUTED: interactive element accessible name is empty/ambiguous.
- A11Y-FORM-ERROR: inputs missing aria-invalid/aria-describedby for error text.
- A11Y-LIVE-REGION: async status with no aria-live.
- DM-DARK-TOKEN: hard-coded light theme color where token should be used.
- DM-DARK-VARIANT: missing dark: variant for foreground/background/border in a component that defines its own surface.
- DM-SHADCN-THEME: Shadcn component not themed via tokens (e.g., Button using raw colors).
- TW-TOKEN-USAGE: prefers text-foreground/bg-background/border-border/text-muted-foreground/ring-ring/shadow-sm/md/lg.
- TW-RAW-COLOR: raw hex/hsl named class present when tokenized class exists.
- TW-REDUNDANT-UTILS: redundant or conflicting Tailwind classes.
- TW-CLSX-CN: improper clsx/cn usage for conditional variants.
- TW-FOCUS-RING: no focus-visible:ring-* or outline replacement on interactive elements.
Severity guidance:
- high: fails WCAG AA or causes keyboard/AT blockers.
- medium: dark mode incorrect or confusing visual states.
- low: stylistic or maintainability issues that do not affect AA.
Contrast checking notes:
- If explicit colors are available in the snippet, estimate ratio. If only token classes are present, skip unless tokens map to known light/dark values in snippet/comments.
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.
- yesterday First seen · 53 lines · 0 tokens per session scan A 937d2f4c2770
dark-mode is a command published in the GitHub repository dyeoman2/tanstack-start-template (26 stars, last pushed 4mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 771 tokens. 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-01.
Other commands, from other repositories
mimikyu
Figma 디자인 URL을 받아 픽셀 퍼펙트하게 React + Tailwind CSS로 재현합니다.
create-component
Use the create-component skill to implement a new component end-to-end in SEED Design.
tokens
Audit or establish the project's 3-layer token spine.
kim-ui2code
Kim截图转代码命令 - Gemini看图分析 + Claude技术方案 + Codex代码生成 + Gemini代码审查.
bolder
Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional).
motion-design
Design micro-interactions, transitions, and animation systems for UI components or full pages.