Patterns for building design system components using Surface primitives, CVA variants, and consistent styling. Use when building reusable UI components that follow design token architecture. Triggers on Surface component, CVA, class-variance-authority, component variants, design tokens.
Security Analysis
high confidenceThis is an instruction-only skill that provides TypeScript/React design-system patterns and does not request credentials, install software, or perform operations outside its stated purpose.
The name and description (design-system components using Surface primitives and CVA) match the SKILL.md content: example components, CVA variants, and usage snippets. There are no requested env vars, binaries, or unrelated capabilities that would contradict the stated purpose.
SKILL.md contains code patterns and usage guidance only. It does not instruct the agent to read system files, access environment variables, call external endpoints, or transmit data. No steps expand scope beyond authoring UI components.
There is no install spec in the registry metadata and no code files that will be executed by the platform. README contains manual copy instructions and an npx add line pointing at a GitHub tree URL (informational only). Because the skill is instruction-only, no runtime install or remote download is required by the skill itself.
The skill requests no environment variables, credentials, or config paths. The content does not reference secrets or external service tokens. The requested privileges are proportional to a code-pattern documentation skill.
Flags show always:false and user-invocable:true (normal). The skill does not request persistent agent-wide presence or modify other skills, and it does not perform installation steps that would grant it elevated persistence.
Guidance
This skill is an instruction-only collection of UI component patterns and appears coherent with its description. Before installing or copying files into your project: (1) verify the origin and license (source/homepage are marked unknown), (2) review the snippets for compatibility with your stack and to ensure no unintended code is introduced, and (3) avoid running unfamiliar install commands; the README's 'npx add' line points to a GitHub tree URL (not a standard package install) — treat it as informational and prefer fetching files from a trusted repository or inspecting them locally first.
Latest Release
v1.0.0
Initial release of design-system-components skill. - Provides patterns for building reusable UI components using Surface primitives, CVA variants, and design tokens. - Includes examples for Surface, Button, Metric, Card, Badge/Chip, and StatusIndicator components. - Demonstrates how to structure components for style consistency, type-safety, and variant-based design. - Outlines best practices and "never do" guidance to enforce design system standards. - Features quick reference snippets for implementing variant-based styles. - Lists related skills for extended design system workflows.
More by @wpank
Published by @wpank on ClawHub
