Borrowing it
Nothing to install: this file belongs to charles-adedotun/notifications-mcp-server. 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/charles-adedotun/notifications-mcp-server/main/.claude/commands/design.mdgit clone --depth 1 https://github.com/charles-adedotun/notifications-mcp-serverWrote 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/commands/charles-adedotun/notifications-mcp-server/design)<a href="https://agentmods.dev/commands/charles-adedotun/notifications-mcp-server/design"><img src="https://agentmods.dev/badge/commands/charles-adedotun/notifications-mcp-server/design/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/commands/charles-adedotun/notifications-mcp-server/design"><img src="https://agentmods.dev/badge/commands/charles-adedotun/notifications-mcp-server/design.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.00000 | $0.02663 |
| Opus 5 | $0.00000 | $0.01332 |
| Sonnet 5 | $0.00000 | $0.00533 |
| Haiku 4.5 | $0.00000 | $0.00266 |
Grade A, and why
design 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 10d 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 — 281 lines — stays where its author put it; the contents beside it link to each section on GitHub.
shadcn/ui with Tailwind v4 Design System Guidelines
This document outlines design principles and implementation guidelines for applications using shadcn/ui with Tailwind v4. These guidelines ensure consistency, accessibility, and best practices throughout the UI development process.
Core Design Principles
1. Typography System: 4 Sizes, 2 Weights
- 4 Font Sizes Only:
- Size 1: Large headings
- Size 2: Subheadings/Important content
- Size 3: Body text
- Size 4: Small text/labels
- 2 Font Weights Only:
- Semibold: For headings and emphasis
- Regular: For body text and general content
- Consistent Hierarchy: Maintain clear visual hierarchy with limited options
2. 8pt Grid System
- All spacing values must be divisible by 8 or 4
- Examples:
- Instead of 25px padding → Use 24px (divisible by 8)
- Instead of 11px margin → Use 12px (divisible by 4)
- Consistent Rhythm: Creates visual harmony throughout the interface
3. 60/30/10 Color Rule
- 60%: Neutral color (white/light gray)
- 30%: Complementary color (dark gray/black)
- 10%: Main brand/accent color (e.g., red, blue)
- Color Balance: Prevents visual stress while maintaining hierarchy
4. Clean Visual Structure
- Logical Grouping: Related elements should be visually connected
- Deliberate Spacing: Spacing between elements should follow the grid system
- Alignment: Elements should be properly aligned within their containers
- Simplicity Over Flashiness: Focus on clarity and function first
Foundation
Tailwind v4 Integration
- Use Tailwind CSS v4 for styling: Leverage the latest Tailwind features including the new @theme directive, dynamic utility values, and OKLCH colors. Tailwind CSS v4 Documentation
- Modern browsing features: Tailwind v4 uses bleeding-edge browser features and is designed for modern browsers.
- Simplified installation: Fewer dependencies, zero configuration required in many cases.
- shadcn/ui v4 demo: Reference the demo site for component examples. shadcn/ui v4 Demo
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.
- 10d ago First seen · 281 lines · 0 tokens per session scan A 4b663e54b566
design is a command published in the GitHub repository charles-adedotun/notifications-mcp-server (16 stars, last pushed 3mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,663 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-08-30.
Other commands, from other repositories
ux-recommend
The v2 flagship. Runs the 5-parallel-search Python engine across 11 data manifests (75+ styles, 170+ palettes, 65+ type pairs, 120+ components, 170+ industries, 110+ UX laws, 50+ motion presets, 120+ anti-patterns, 92 brand specs) and returns a complete recommended design system for your project — with always-on…
color-specialist
Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inverted light mode, or semantic colours that carry no meaning.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.
revisar-ui
Auditoria visual retroativa de 6 pilares do código frontend implementado.
colorize
Introduce or rework color strategy.
extract
Pull repeated patterns into reusable components and design tokens.