Skills ui-design-system
📦

ui-design-system

Content revision r2 Safe ⚙️ External commands

Build Consistent UI Design Tokens

Teams often struggle to keep visual tokens consistent across design and implementation. This skill generates a structured token foundation from a brand color in several export formats.

Supports: Claude Codex Code(CC)
📊 75 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "ui-design-system" from https://skillstore.io/skills/davila7-ui-design-system.md and its manifest at https://skillstore.io/api/skills/davila7-ui-design-system/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.

Markdown detail GET /skills/davila7-ui-design-system.md Signed manifest GET /api/skills/davila7-ui-design-system/manifest Signed lockfile GET /api/skills/davila7-ui-design-system/lockfile

Test it

Using "ui-design-system". Generate a modern token system for #0066CC and summarize it.

Expected outcome:

  • Primary and complementary color scales with neutral, semantic, and surface groups.
  • A modular typography scale with font families, weights, line heights, and text styles.
  • An 8-point spacing system, component sizes, borders, shadows, motion, breakpoints, and layering values.

Using "ui-design-system". Prepare CSS tokens for our approved brand blue.

Expected outcome:

A CSS variable collection covering nested token groups, followed by a concise review of integration considerations.

Using "ui-design-system". Compare classic and playful styles for the same brand color.

Expected outcome:

  • A comparison of typography, corner radius, and shadow differences between both presets.
  • A list of unchanged structural groups, including spacing, sizing, breakpoints, animation, and layering.

Security Audit

Safe
v9 • 7/23/2026 Open versioned report

All three static findings are false positives in context: the cited text documents an 8-point grid or a Python usage command. No shell execution, system reconnaissance, prompt injection, or malicious intent was found in the two reviewed files.

2
Files scanned
563
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (1)
SKILL.md:22
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.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/davila7-ui-design-system/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/davila7-ui-design-system/security.svg)](https://skillstore.io/skills/davila7-ui-design-system?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/davila7-ui-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/davila7-ui-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/davila7-ui-design-system.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

davila7. (2026). ui-design-system security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/davila7-ui-design-system/audits/9

BibTeX citation

@techreport{davila7-davila7-ui-design-system-2026, author = {davila7}, title = {ui-design-system security audit report (audit version 9)}, institution = {Skillstore}, year = {2026}, number = {9}, url = {https://skillstore.io/skills/davila7-ui-design-system/audits/9}, 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: "ui-design-system security audit report (audit version 9)" version: "unspecified" type: report authors: - name: "davila7" date-released: "2026-07-23" url: "https://skillstore.io/skills/davila7-ui-design-system/audits/9" identifiers: - type: other value: "skillstore:davila7-ui-design-system:audit:9" description: "Skillstore immutable audit report identifier"

Compare variants

3 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
AbdulSamad94 Recommended

abdulsamad94-ui-design-system

Skillstore Score 76
Evidence Confidence High
Skillstore usage 16
Updated

2026-08-21

davila7 Current

davila7-ui-design-system

Skillstore Score 75
Evidence Confidence High
Skillstore usage 17
Updated

2026-08-21

alirezarezvani

alirezarezvani-ui-design-system

Skillstore Score 75
Evidence Confidence High
Skillstore usage 12
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
45
Architecture
85
Maintainability
87
Content
70
Community
83
Spec Compliance

What You Can Build

Start a product token foundation

Create a broad first-pass token set from an approved brand color before detailed interface design begins.

Prepare implementation variables

Export design decisions as CSS or SCSS variables for integration into a frontend codebase.

Compare visual presets

Review modern, classic, and playful token choices before selecting a shared product direction.

Try These Prompts

Generate starter tokens 
Generate a modern design token set for {brand_color} in JSON format. Summarize the color, type, spacing, and breakpoint groups.
Prepare CSS variables 
Generate CSS variables for {brand_color} using the {style} preset. Highlight semantic colors and component sizing values for developer review.
Compare export formats 
Create JSON, CSS, and SCSS token outputs for {brand_color}. Compare how each format supports our {workflow}.
Review integration risks 
Generate {format} tokens for {brand_color} using {style}. Review naming, contrast assumptions, responsive breakpoints, and integration risks against {product_requirements}.

Best Practices

  • Correct the malformed warning color literal and run a syntax check before using generated output.
  • Use a reviewed six-digit brand color and select an explicit supported style and output format.
  • Test generated color contrast, font availability, motion preferences, and breakpoint behavior in the target product.

Avoid

  • Do not treat generated semantic colors as evidence of accessibility compliance.
  • Do not expect the generator to create component code, documentation, or design files.
  • Do not pass arbitrary style names and assume they produce a custom visual system.

Frequently Asked Questions

What inputs does the generator accept?
It accepts a six-digit brand color, a style preset, and an output format.
Which output formats are available?
It can print JSON, CSS custom properties, SCSS variables, or a console summary.
Does it verify accessibility?
No. Review contrast, focus states, motion, typography, and interaction behavior with appropriate accessibility tools.
Can I define a custom style preset?
No. The implemented presets are modern, classic, and playful.
Does the script write files?
No. It prints generated output to standard output for review or redirection.
Is the included script ready to run?
No. Correct the malformed warning color literal before executing the Python script.

Developer Details

Author

davila7

License

MIT

Skillstore revision

r2

Version notice

The author did not declare a version.

Repository

https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/ui-design-system

Ref

c43861a65bb95efcae259cd161c9d6f4dc7eec6f

Maintenance freshness

7/25/2026

Usage

15 downloads · 227 views

File structure

📁 scripts/

📄 design_token_generator.py

📄 SKILL.md