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 skills add roedyrustam/vibes-plug --skill design-system-architectgit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote 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/roedyrustam/vibes-plug/design-system-architect)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/design-system-architect"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/design-system-architect/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/skills/roedyrustam/vibes-plug/design-system-architect"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/design-system-architect.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 4 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 163 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 196 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 197 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 264 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
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.00054 | $0.09530 |
| Opus 5.5 | $0.00022 | $0.03812 |
| Sonnet 5.5 | $0.00011 | $0.01906 |
| Haiku 4.5 | $0.00005 | $0.00953 |
Grade A, and why
design-system-architect 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 2d 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 — 545 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Architect (2026 Edition — shadcn/ui Registry)
English
Orchestration & Integration
Connects and orchestrates with relevant domain skills:
modern-web-guidance: Search and enforce 2026 web platform best practices before building UI primitives.modern-css-native-expert: Pure CSS anchor positioning,@starting-style, and top-layer transitions.tailwind-expert: Translates design tokens into CSS-first@themevariables.ui-ux-pro-max: Design intelligence, F/Z scan patterns, 60-30-10 color layering, and typography scales.visual-ui-auditor: Automated multimodal vision auditing and 20-point rubric verification.anti-slop: Eliminates AI visual clichés (Pillar 7), pill-button addiction, and fake states.brainstorming,zero-to-prod-orchestrator,session-memory-manager: Continuous lifecycle orchestration.
Description
Expert guide for building and maintaining scalable UI design systems. Covers design tokens with OKLCH and Tailwind v4 @theme, Material Design 3 (M3) integration, headless component primitives (Radix UI, Base UI 1.x), shadcn/ui registry for distributable component libraries, CVA for type-safe variants, and WCAG 2.2 accessibility compliance.
Trigger Conditions
- Building a shared UI component library from scratch.
- Setting up design tokens (colors, typography, spacing) with Tailwind v4.
- Applying Material Design 3 (M3) principles (https://m3.material.io/).
- Using headless primitives (Radix UI, Base UI 1.x) with custom styling.
- Distributing components via the shadcn/ui registry format.
- Auditing a component library for WCAG 2.2 accessibility compliance.
- Enforcing
anti-slopquality standards on component primitives and tokens.
Anti-Slop Component Design Contract
- Zero Div-Soup Primitives: Build exclusively on accessible headless primitives (Radix UI, Base UI 1.x) using semantic HTML (
<button>,<dialog>,<nav>,<input>). - Visual Hierarchy & Surface Layering Contract: Enforce explicit surface container tiers (Canvas L0, Card L1, Raised L2, Overlay L3) with crisp 1px solid borders (
border-border) and directional micro-shadows (shadow-xs). Ban muddy 30px black shadows and ungrounded neon glow orbs. - Single Focal Primary Action: Component presets must enforce a single primary CTA variant per view; secondary and tertiary actions must map to outline, tonal, or ghost variants.
- Mandatory 5 States: Every component primitive must explicitly define: default, hover/active, visible keyboard
focus-visible:ring-2, loading/skeleton state, and disabled/error styling. - Optical Typography & Tabular Figures: Headings must default to tight letter-spacing (
tracking-tight), uppercase eyebrows to wide letter-spacing (tracking-wider), and all numeric/counter/price components must enforcetabular-nums. - Contracted Contrast Tokens: All semantic tokens must pass WCAG 2.2 AA contrast ratios (>= 4.5:1 text, >= 3:1 graphical elements) in both light and dark themes.
- Strict Scale Compliance: Ban arbitrary pixel values (
p-[13px]); enforce unified@themetokens.
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.
- 2d ago Changed · +15 lines · +4 tokens per session f6b4fec6e392
- 3d ago Changed · +1 lines cbe730794281
- 6d ago Changed 4f1e457ea3fd
- 15d ago Changed ed0a58f023b7
- 17d ago Changed · +18 lines 66d5c039179d
- 20d ago Changed 211bd2c5ebfc
- 21d ago Changed · +187 lines 051fefb2cadb
- 23d ago Changed · +8 lines · +39 tokens per session 05c76904218e
- 25d ago Changed · +6 lines · -39 tokens per session aa18812a1ec1
- 1mo ago First seen · 310 lines · 50 tokens per session scan A 4b203a67e665
design-system-architect is a skill published in the GitHub repository roedyrustam/vibes-plug (113 stars, last pushed today), licensed MIT. It adds 54 tokens to every session and 9,530 once invoked, about $0.0002 per session on Opus 5.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
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
ui-design
Unify product UI design, frontend implementation, and verification. Use when asked to design, redesign, build, or fix a web, desktop, or mobile interface; a page, dashboard, form, component, design system, responsive layout, accessibility, interface animation, or editable hero/banner/infographic within a product…
frontend-design
A design guide for building polished web interfaces such as pages, dashboards, forms, navigation, and reusable UI components. It covers HTML, CSS, JavaScript, and common frontend frameworks.
muse
Defining and managing design tokens, applying token systems to existing codebases, building design system foundations. Use for spacing, color, typography, dark mode, cross-platform output.
pixel
Generating pixel-accurate HTML/CSS code from image mockups (PNG/JPG/screenshots) and performing visual verification for faithful reproduction. Use when mockup-to-code generation is needed.
web-design-expert
Web design and UX guidance for visual systems, accessibility, interaction patterns, and performance-aware interfaces. Use when designing a website's look and feel, improving UX/accessibility, or reviewing a UI for polish and performance.