๐ŸŽฏ

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(234 items)

design-system-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code
npx vibeindex add wshobson/agents --skill design-system-patterns
skills.sh Installโš  Installs to .agents/skills/ - may not be auto-recognized by Claude Code
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

4,575Installs
27,673
-
AddedJan 31, 2026

More from this repository10

๐Ÿ”Œ
deployment-validation๐Ÿ”ŒPlugin

A Claude Code plugin from the wshobson/agents marketplace for deployment validation, providing specialized AI agents and tools to ensure reliable production deployments within a 73-plugin ecosystem.

๐Ÿ”Œ
ui-design๐Ÿ”ŒPlugin

The ui-design plugin is part of the wshobson/agents marketplace for Claude Code, providing specialized AI agents for UI/UX design assistance within development workflows.

๐Ÿ”Œ
data-validation-suite๐Ÿ”ŒPlugin

The data-validation-suite plugin is part of the wshobson/agents marketplace for Claude Code. It falls under the Data category, which includes two data-focused plugins: data engineering and data validation.

๐Ÿ”Œ
machine-learning-ops๐Ÿ”ŒPlugin

An MLOps plugin from the wshobson/agents ecosystem providing Claude Code with specialized agents and skills for ML pipeline management, model deployment, experiment tracking, and production monitoring.

๐Ÿ”Œ
shell-scripting๐Ÿ”ŒPlugin

Shell Scripting is a Claude Code plugin from the wshobson/agents marketplace that provides AI-powered assistance for writing and maintaining shell scripts.

๐Ÿ”Œ
accessibility-compliance๐Ÿ”ŒPlugin

A Claude Code plugin with specialized AI agents for accessibility compliance auditing, WCAG standards verification, and remediation guidance in web and mobile applications.

๐Ÿ”Œ
cicd-automation๐Ÿ”ŒPlugin

A Claude Code plugin for CI/CD automation with 4 specialized skills covering pipeline design, GitHub Actions, GitLab CI, and secrets management, part of the wshobson/agents marketplace.

๐Ÿ”Œ
reverse-engineering๐Ÿ”ŒPlugin

The reverse-engineering plugin is part of the wshobson/agents marketplace for Claude Code, providing specialized AI agents for code analysis, binary examination, and system reverse engineering tasks.

๐Ÿ”Œ
functional-programming๐Ÿ”ŒPlugin

The functional-programming plugin is part of the wshobson/agents marketplace for Claude Code. It falls under the Languages category, which includes seven language-focused plugins covering Python, JavaScript/TypeScript, systems programming, JVM, sc...

๐Ÿ”Œ
comprehensive-review๐Ÿ”ŒPlugin

Comprehensive Review is a Claude Code plugin from the wshobson/agents marketplace that provides multi-perspective code analysis covering architecture, security, and best practices.