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 skills/shahtuyakov/claude-setup/design-patternsnpx skills add shahtuyakov/claude-setup --skill design-patternsgit clone --depth 1 https://github.com/shahtuyakov/claude-setupWrote 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/shahtuyakov/claude-setup/design-patterns)<a href="https://agentmods.dev/skills/shahtuyakov/claude-setup/design-patterns"><img src="https://agentmods.dev/badge/skills/shahtuyakov/claude-setup/design-patterns.svg" alt="Measured on agentmods" 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.00058 | $0.02059 |
| Opus 5 | $0.00029 | $0.01030 |
| Sonnet 5 | $0.00012 | $0.00412 |
| Haiku 4.5 | $0.00006 | $0.00206 |
Grade A, and why
design-patterns 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 6d 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 — 271 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Patterns
Modern design system patterns optimized for 2025 web development.
Technology Selection
CSS Framework
| Option | Best For | Notes |
|---|---|---|
| Tailwind CSS 4 | Most projects | CSS-first config, P3 colors |
| Vanilla CSS | Simple sites | CSS variables, modern features |
| CSS Modules | Component isolation | Scoped styles |
Component Library
| Option | Best For | Notes |
|---|---|---|
| shadcn/ui | Full control | Copy-paste, Radix + Tailwind |
| Radix UI | Custom design | Headless, accessible primitives |
| Base UI | Future-proof | By Radix team, actively maintained |
Animation
| Option | Best For | Notes |
|---|---|---|
| Framer Motion | React apps | Declarative, layout animations |
| GSAP | Complex timelines | SVG, scroll-driven |
| CSS transitions | Simple states | No JS, performant |
Reference Files
| Topic | Load | Use When |
|---|---|---|
| Design tokens | references/design-tokens.md |
Token architecture, CSS variables |
| Color systems | references/color-systems.md |
OKLCH, palettes, contrast |
| Typography | references/typography.md |
Fluid type, scales |
| Animation | references/animation.md |
Framer Motion, micro-interactions |
| Dark mode | references/dark-mode.md |
Theme switching |
| Components | references/component-patterns.md |
shadcn/ui, Radix |
| Handoff | references/design-handoff.md |
Figma Dev Mode |
Quick Start
Tailwind CSS 4 Setup
/* app.css */
@import "tailwindcss";
@theme {
/* Colors - OKLCH for P3 gamut */
--color-primary: oklch(55% 0.25 250);
--color-secondary: oklch(65% 0.15 300);
--color-destructive: oklch(55% 0.25 25);
/* Typography */
--font-sans: "Inter Variable", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* Spacing (4px base) */
--spacing-px: 1px;
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-8: 2rem;
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-full: 9999px;
}
What ships with it
7 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.
- 6d ago First seen · 271 lines · 58 tokens per session scan A 1b2efb86f924
design-patterns is a skill published in the GitHub repository shahtuyakov/claude-setup (13 stars, last pushed 8mo ago), licensed MIT. It adds 58 tokens to every session and 2,059 once invoked, about $0.0003 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-30.
Other skills, from other repositories
motion-animations
Use when building website animations, scroll effects, entrance reveals, layout transitions, gesture interactions, parallax, hero choreography, or any animated UI component. Auto-trigger on any website build or frontend feature that involves motion, transitions, or animated elements.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
ui-refactor
Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.
frontend-aesthetics
How to make frontends that look genuinely designed instead of generic "AI slop", and how to verify UI work the pipeline can't catch with a test suite. Load whenever a task builds or restyles a user-facing surface — a page, a component, a full redesign, a dashboard, a marketing site. Covers distinctive typography…
eval-ui-ux
Specialized UI/UX evaluator for the Evaluate-Loop. Use this for evaluating UI shell tracks, design system tracks, screen implementation tracks, or any track where the primary deliverable is visual/interactive UI. Checks design system adherence, visual consistency, layout structure, responsive behavior, component…
frontend-audit
ProductionOS frontend quality scanner. Auto-activates when editing React/Vue/Svelte components, CSS, or layout files. Checks accessibility, responsive design, performance, and design system consistency.