๐ŸŽฏ

design-system-patterns

๐ŸŽฏSkill

from wshobson/agents

VibeIndex|
What it does
|

A design system patterns skill from the wshobson/agents ecosystem, providing Claude Code with specialized knowledge of component libraries, design tokens, theming, and scalable UI architecture.

Overview

Design System Patterns is a skill from the wshobson/agents plugin ecosystem, a comprehensive production-ready system of 73 focused plugins for Claude Code featuring 112 specialized agents, 146 skills, and 79 development tools. This skill provides specialized knowledge for creating and maintaining design systems, including component libraries, design tokens, theming patterns, and consistent UI architecture.

Key Features

  • Design System Expertise: Provides deep knowledge of design system architecture including component libraries, design tokens, theming, accessibility patterns, and cross-platform consistency
  • Progressive Disclosure Loading: Loads design system knowledge on demand when design-related tasks are detected, minimizing token usage while maintaining comprehensive coverage
  • Multi-Agent Workflow Integration: Composable with frontend development, code review, and comprehensive review plugins for building robust, well-reviewed design systems
  • Part of the Development Category: Works within the broader wshobson/agents ecosystem alongside frontend, multi-platform, and documentation plugins for consistent UI development

Who is this for?

  • Frontend developers and UI engineers building or maintaining design systems who want AI-assisted guidance on tokens, theming, and component architecture through Claude Code
  • Design system teams who need AI support for creating consistent, accessible, and scalable component libraries across web and mobile platforms
  • Organizations establishing design system governance who want expert patterns for documentation, versioning, and cross-team adoption
๐Ÿ“ฆ

Same repository

wshobson/agents(268 items)

design-system-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/
npx vibeindex add wshobson/agents --skill design-system-patterns
skills.sh Installโš  Installs to .agents/skills/
npx skills add wshobson/agents --skill design-system-patterns
Manual InstallCopy SKILL.md content and save to the path below
~/.claude/skills/design-system-patterns/SKILL.md

SKILL.md

12,112Installs
27,673
-
AddedJan 31, 2026

More from this repository10

๐ŸŽฏ
tailwind-design-system๐ŸŽฏSkill

Comprehensive Claude Code plugin collection with 112 AI agents, 146 skills, and 73 focused plugins covering full-stack development, security, infrastructure, and multi-agent orchestration.

๐ŸŽฏ
typescript-advanced-types๐ŸŽฏSkill

A specialized agent skill for advanced TypeScript type system patterns, part of the wshobson/agents plugin marketplace with 146 skills across 73 plugins for Claude Code.

๐ŸŽฏ
nodejs-backend-patterns๐ŸŽฏSkill

Agent skill for Node.js backend development patterns including API design, architecture, and microservices, part of the wshobson/agents collection with 73 focused plugins and 146 skills for Claude Code.

๐Ÿ”Œ
framework-migration๐Ÿ”ŒPlugin

Claude Code plugin for AI-powered framework migration workflows, coordinating specialized agents to plan and execute transitions between technology stacks as part of the wshobson/agents marketplace.

๐Ÿ”Œ
payment-processing๐Ÿ”ŒPlugin

A Claude Code plugin for payment system integration covering Stripe, PayPal, and billing platforms with checkout flows, subscription management, and webhook handling in the wshobson/agents ecosystem.

๐Ÿ”Œ
developer-essentials๐Ÿ”ŒPlugin

A Claude Code plugin bundling core development tools and agents for everyday tasks like debugging and code generation, part of the wshobson/agents marketplace with 73 focused plugins.

๐Ÿ”Œ
observability-monitoring๐Ÿ”ŒPlugin

Claude Code plugin for observability and monitoring including logging, metrics, distributed tracing, and alerting, part of the wshobson/agents marketplace with 73 focused plugins.

๐Ÿ”Œ
deployment-strategies๐Ÿ”ŒPlugin

A Claude Code plugin providing specialized AI agents for deployment strategy planning and execution, covering blue-green deployments, canary releases, rolling updates, and zero-downtime patterns.

๐Ÿ”Œ
api-scaffolding๐Ÿ”ŒPlugin

A Claude Code plugin for rapid API project scaffolding, part of the wshobson/agents marketplace with 73 focused plugins, 112 specialized agents, and 146 agent skills.

๐Ÿ”Œ
jvm-languages๐Ÿ”ŒPlugin

Claude Code plugin for JVM language development including Java, Kotlin, and Scala with specialized agents for idiomatic patterns, build tools, and runtime optimization in the wshobson/agents marketplace.