Skills design-system-patterns
📦
design-system-patterns
Content revision r1 Safe ⚙️ External commands🌐 Network access
Build Design System Patterns
Teams need consistent UI foundations across products and platforms. This skill guides token architecture, theme infrastructure, and component patterns that scale.
Supports: Claude Codex Code(CC)
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Agent request
Review the Skillstore skill "design-system-patterns" from https://skillstore.io/skills/wshobson-design-system-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-design-system-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "design-system-patterns". I need a token structure for a new product dashboard.
Expected outcome:
- A three-layer token hierarchy with primitive values, semantic roles, and component aliases.
- Naming guidance for text, surfaces, borders, actions, spacing, and elevation.
- A rollout plan for documentation, review, and versioned changes.
Using "design-system-patterns". Our app needs dark mode without visual flicker.
Expected outcome:
- A theme provider approach that resolves system preference and stores user choice.
- Hydration guidance for applying the correct theme before first paint.
- Testing notes for contrast, forced colors, reduced motion, and native controls.
Using "design-system-patterns". We are rebuilding our shared button, menu, and accordion components.
Expected outcome:
- A component API recommendation using variants, slots, and composition rules.
- Accessibility expectations for keyboard behavior, labels, focus, and state.
- A maintenance checklist for documentation, examples, and migration support.
Security Audit
Safev4 • 7/7/2026 Open versioned report
All static findings are false positives. The content is documentation examples and public links. No prompt injection, command execution, exfiltration, or malicious intent was found.
4
Files scanned
1,899
Lines analyzed
0
Review items
0
False positives ignored
Risk Factors
⚙️ External commands (18)
references/component-architecture.md:102-145 references/design-tokens.md:320-330 references/design-tokens.md:330-333 references/design-tokens.md:333-336 references/theming-architecture.md:191-278 references/theming-architecture.md:296-303 references/theming-architecture.md:305-312 references/theming-architecture.md:314-322 references/theming-architecture.md:449-468 SKILL.md:57-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-141 SKILL.md:141-201 SKILL.md:201-205 SKILL.md:205-254 SKILL.md:254-258 SKILL.md:258-310
🌐 Network access (5)
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/wshobson-design-system-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-design-system-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/wshobson-design-system-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
wshobson. (2026). design-system-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-design-system-patterns/audits/4BibTeX citation
@techreport{wshobson-wshobson-design-system-patterns-2026,
author = {wshobson},
title = {design-system-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-design-system-patterns/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-system-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/wshobson-design-system-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-design-system-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: High 45
Architecture
85
Maintainability
87
Content
71
Community
83
Spec Compliance
What You Can Build
Plan a Token Foundation
Create a clear token hierarchy for colors, type, spacing, radius, and component-specific values.
Implement Theme Switching
Add light, dark, and system themes with persistent user preferences and accessible color modes.
Standardize Component APIs
Choose component patterns that support variants, composition, accessibility, and long-term maintenance.
Try These Prompts
Create a Basic Token Plan
Create a design token hierarchy for a small web app. Include colors, spacing, typography, radius, and semantic usage names.
Design Theme Switching
Design a React theme switching approach for light, dark, and system modes. Include persistence, hydration concerns, and accessibility checks.
Review Component Architecture
Review our component library plan. Recommend compound, polymorphic, slot-based, or headless patterns for each component group.
Plan a Multi-Platform Pipeline
Propose a token pipeline from design source to web, iOS, and Android outputs. Include versioning, review gates, and migration guidance.
Best Practices
- Name tokens by purpose, then map them to platform-specific implementation details.
- Treat token and component API changes as versioned contracts with migration notes.
- Test every theme against contrast, focus, motion, and high contrast requirements.
Avoid
- Using raw color and spacing values directly in product components.
- Creating many tokens without ownership, naming rules, or deprecation paths.
- Shipping theme changes without testing real components in each supported mode.
Frequently Asked Questions
What does this skill help build?
It helps plan design tokens, theming infrastructure, and component architecture for scalable UI systems.
Does it generate a complete component library?
No. It provides patterns and examples that engineers adapt to their existing codebase.
Can it support multiple brands?
Yes. It describes semantic tokens and theme layers that can map to different brand values.
Does it include accessibility guidance?
Yes. It covers contrast, reduced motion, high contrast, forced colors, and theme testing concerns.
Can Claude, Codex, or Claude Code use it?
Yes. The marketplace metadata lists Claude, Codex, and Claude Code as supported tools.
Does it call external services?
No. The skill is documentation only. External URLs are public resource links in the README content.
Developer Details
Author
wshobsonLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Repository
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/design-system-patterns/Ref
36e07d5e13068e5be64447e8f20b427cf2cbd21a
Maintenance freshness
7/18/2026
Usage
9 downloads · 290 views
File structure