lurx/smb-ai-skills-hub/ui-design-system

Claude Code and agent skill by lurx/smb-ai-skills-hub

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Design token scales, component CSS patterns, responsive breakpoints, and the design system handoff template. Use whenever building or auditing UI components, defining spacing/typography/color systems, setting up dark mode or theming, or writing developer handoff specs — including "מערכת עיצוב", "טוקנים של עיצוב", "ערכת נושא", "מצב כהה".

Install

npx vskill@latest install lurx/smb-ai-skills-hub/ui-design-system

SKILL.md

UI Design System

Reference material for building and documenting design systems.

Which file to read

TaskRead
Defining or extending color, type, spacing, shadow scalesreferences/design-tokens.md
Writing component CSS, states, or interaction patternsreferences/component-patterns.md
Breakpoints, containers, grid behaviorreferences/responsive.md
Producing a handoff docassets/system-doc-template.md

Read only what the task needs. Don't load all four.

Before you start

Check whether the project already has a token file, Tailwind config, or component library. If it does, that file is the source of truth — the references here are a starting scale for greenfield work, not a spec to impose on an existing codebase.

Non-negotiables

  • Contrast: 4.5:1 for body text, 3:1 for large text (18px+ or 14px bold) and UI borders.
  • Touch targets: 44×44px minimum.
  • Every interactive element needs a visible :focus-visible style.
  • Respect prefers-reduced-motion on anything that animates.
  • Layouts must survive 200% browser text scaling.

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
5

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/lurx/smb-ai-skills-hub/ui-design-system/badge)](https://verified-skill.com/skills/lurx/smb-ai-skills-hub/ui-design-system)

Something wrong with this skill or its page? Tell us.