Skills UI Design System
📦

UI Design System

Content revision r2 Safe ⚙️ External commands

Build Consistent Dark Interface Designs

Teams can lose consistency when dark themes and component rules are undocumented. This skill provides practical visual rules for a modern Physical AI Hub interface.

Supports: Claude Codex Code(CC)
📊 76 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/abdulsamad94-ui-design-system.md and its manifest at https://skillstore.io/api/skills/abdulsamad94-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/abdulsamad94-ui-design-system.md Signed manifest GET /api/skills/abdulsamad94-ui-design-system/manifest Signed lockfile GET /api/skills/abdulsamad94-ui-design-system/lockfile

Test it

Using "UI Design System". Design a dark login card using the system.

Expected outcome:

  • Dark gradient background with off-white text.
  • Teal primary action and subtle rgba borders.
  • Rounded card and inputs with a restrained transition.

Using "UI Design System". Where should styles for a complex chatbot component live?

Expected outcome:

Use a CSS module for the chatbot. Keep shared variables in the global stylesheet.

Security Audit

Safe
v10 • 7/18/2026 Open versioned report

All 11 static findings are false positives caused by Markdown backticks around CSS values, animation names, and stylesheet paths. The single skill file contains design guidance only, with no commands, scripts, network activity, or prompt-injection text.

1
Files scanned
37
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (11)
SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:25 SKILL.md:26 SKILL.md:30 SKILL.md:31 SKILL.md:34 SKILL.md:35 SKILL.md:36
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: claude 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/abdulsamad94-ui-design-system/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

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

HTML badge

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

Embed card

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

AbdulSamad94. (2026). UI Design System security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/abdulsamad94-ui-design-system/audits/10

BibTeX citation

@techreport{abdulsamad94-abdulsamad94-ui-design-system-2026, author = {AbdulSamad94}, title = {UI Design System security audit report (audit version 10)}, institution = {Skillstore}, year = {2026}, number = {10}, url = {https://skillstore.io/skills/abdulsamad94-ui-design-system/audits/10}, 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 10)" version: "unspecified" type: report authors: - name: "AbdulSamad94" date-released: "2026-07-18" url: "https://skillstore.io/skills/abdulsamad94-ui-design-system/audits/10" identifiers: - type: other value: "skillstore:abdulsamad94-ui-design-system:audit:10" 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 Current

abdulsamad94-ui-design-system

Skillstore Score 76
Evidence Confidence High
Skillstore usage 16
Updated

2026-08-21

davila7

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
55
Architecture
85
Maintainability
87
Content
71
Community
65
Spec Compliance

What You Can Build

Create a dashboard theme

Apply the palette and component guidance when designing a dark operational dashboard.

Review visual consistency

Compare a product screen against the documented typography, color, and interaction rules.

Organize stylesheet ownership

Place global styles, documentation overrides, and component styles in the recommended CSS locations.

Try These Prompts

Apply the core theme 
Apply this UI Design System to my page. Use the dark palette, Poppins typography, and rounded components.
Design a form 
Design a settings form using this skill. Specify input styling, focus states, spacing, and button treatment.
Review a component 
Review my dropdown against this UI Design System. List visual changes for colors, borders, motion, and shadows.
Plan stylesheet structure 
Plan CSS ownership for a React and Docusaurus project using this skill. Separate global tokens, documentation overrides, and complex component modules.

Best Practices

  • Use the defined accent and text colors consistently across interactive components.
  • Keep motion brief and use it to clarify state changes.
  • Store shared visual variables in global CSS and isolate complex component styles.

Avoid

  • Do not introduce unrelated bright colors that compete with the teal accent.
  • Do not apply long or excessive animations to routine interactions.
  • Do not place all component-specific styles in a global stylesheet.

Frequently Asked Questions

What visual style does this skill define?
It defines a dark, sleek, modern style for a Physical AI Hub.
Which font does it recommend?
It recommends Poppins with weights from 400 through 700.
Does it include component code?
No. It provides design guidance, not production component code.
Which components does it cover?
It covers buttons, cards, inputs, and dropdowns.
Does it support Docusaurus styles?
Yes. It identifies a custom CSS location for Docusaurus overrides.
Does it provide accessibility requirements?
No. Teams should add accessibility and contrast requirements separately.

Developer Details

License

MIT

Skillstore revision

r2

Version notice

The author did not declare a version.

Repository

https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/ui-design

Ref

80999bf530a7874d7bedf8ce202001ecb4c4f5e0

Maintenance freshness

7/19/2026

Usage

12 downloads · 252 views

File structure

📄 SKILL.md

More from AbdulSamad94

View all

Related Skills

View all