Design System Patterns
v1.0.0Foundational design system architecture — token hierarchies, theming infrastructure, token pipelines, and governance. Use when creating design tokens, implementing theme switching, setting up Style Dictionary, or establishing multi-brand theming. Triggers on design tokens, theme provider, Style Dictionary, token pipeline, multi-brand theming, CSS custom properties architecture.
⭐ 2· 1.1k·6 current·6 all-time
by@wpank
MIT-0
Download zip
LicenseMIT-0 · Free to use, modify, and redistribute. No attribution required.
Security Scan
OpenClaw
Benign
high confidencePurpose & Capability
The name/description (design tokens, theming, Style Dictionary, multi-brand theming) align with the included SKILL.md and reference files; the content is purely documentation and code examples relevant to design systems. The skill requests no unrelated binaries, env vars, or config paths. Note: the skill's Source/Homepage fields are missing which reduces provenance but does not create functional incoherence.
Instruction Scope
SKILL.md instructs only on design-token architecture, React theme provider patterns, SSR FOUC prevention, and Style Dictionary pipelines. It uses browser APIs (localStorage, matchMedia, document) and standard SSR inline script patterns; these are appropriate for theme management. The instructions do not ask the agent to read unrelated files, environment variables, or exfiltrate data. Minor caution: the SSR pattern uses dangerouslySetInnerHTML / inline script which is standard for FOUC prevention but should be reviewed in context to avoid introducing XSS if you inject untrusted data.
Install Mechanism
This is an instruction-only skill with no install spec and no code files that would be executed by the platform. The README includes manual copy commands and an 'npx add' example that references a GitHub path; these are user-side installation suggestions (not automated installs) and should be treated as manual steps if followed.
Credentials
The skill declares no required environment variables, no credentials, and no config paths. Runtime code examples rely on client-side browser storage (localStorage) and the DOM, which are appropriate for the described features and proportionate to the purpose.
Persistence & Privilege
Flags indicate no forced always-on presence (always:false). The skill does not request the platform to persist credentials or modify other skills. Autonomous invocation is enabled by default on the platform but that is normal; combined with the skill's limited scope and no credentials, this is not an elevated privilege.
Assessment
This skill appears to be a coherent, documentation-first design-system guide and does not request credentials or install code on its own. Before installing or copying files into your project, verify provenance (source/homepage is missing), check the license, and review the files locally. If you follow the README's manual install commands, prefer copying files into a sandboxed project directory rather than system/global skill folders. Also review the SSR inline script (dangerouslySetInnerHTML) and any code you incorporate to ensure you are not accidentally injecting untrusted content (risk of XSS). If you need stronger assurance, ask for the original repository URL, a maintainer contact, or inspect the repo history before use.Like a lobster shell, security has layers — review code before you run it.
latestvk977a9ny0v19917szbpdh5qjhx80wk80
License
MIT-0
Free to use, modify, and redistribute. No attribution required.