skills.rest
darshan-rambhia
darshan-rambhiaCOMMUNITY
Explore all skills by this author →
𝕏@DrambhiaGitHub

design

Enforce Vamsa's design system across UI development using tokens.md and patterns.md.

Updated Jan 1, 2026
Search Tags:#typography#accessibility#tokens#design-system#color-palette#UI-patterns
One-click install
npx skills add https://github.com/darshan-rambhia/vamsa --skill design-darshan-rambhia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/darshan-rambhia/vamsa/tree/main/.claude/skills/design
Command: npx skills add https://github.com/darshan-rambhia/vamsa --skill design-darshan-rambhia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enforces Vamsa's design system across UI development, ensuring a cohesive and accessible visual language.

Core Features & Use Cases

  • Tokens for colors, typography, spacing, and motion are defined in tokens.md; patterns.md provides reusable component patterns and layout guidelines.
  • Use Case: When designing a new UI screen, apply the design system to ensure typography hierarchy, color contrast, and consistent spacing.
  • Use Case: Review existing UI to identify deviations from the design system and update components to match tokens and patterns.

Quick Start

Start by reading tokens.md and patterns.md in this Skill directory, then apply the design tokens to UI components using the classes and conventions described.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce a design system for consistent UI components?▼

Applying a design system for consistent UI involves referencing centralized token files for colors and typography, while applying reusable component patterns to ensure accessible and cohesive interfaces.

How do I check UI accessibility and color contrast against design tokens?▼

Checking UI accessibility and color contrast involves reviewing existing interfaces against established design tokens to identify deviations and updating components to match defined color palette and typography standards.

What are design tokens and how do they standardize UI typography and spacing?▼

Design tokens are predefined values for UI attributes like typography, spacing, and color palettes that standardize visual language by providing a single source of truth for component layouts and patterns.

Can I use this design system skill to review existing UI layouts for deviations?▼

You can use this skill to review existing UI layouts by checking components against established tokens and patterns to identify and correct visual inconsistencies and accessibility issues.

Do I need specific dependencies to apply design system tokens to UI development?▼

No specific dependencies are required to apply design system tokens to UI development; you simply read the token and pattern definitions and apply those values directly to your component creation process.

Related Skills

Explore More Design & Creative Skills→
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
ProfPowellProfPowell
1

open-props

Import modular CSS custom properties for design systems.

Community
Basic