skills.rest
vmobifystudio
vmobifystudioCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Enforce design tokens and reusable UI components for iOS and Android.

4|Updated Jun 1, 2026
Search Tags:#accessibility#design system#component library#design tokens#dark mode#ui consistency#cross-platform design
One-click install
npx skills add https://github.com/vmobifystudio/app-dev-team --skill design-system-vmobifystudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/vmobifystudio/app-dev-team/tree/main/skills/design-system
Command: npx skills add https://github.com/vmobifystudio/app-dev-team --skill design-system-vmobifystudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents design-system drift, inaccessible UI, and inconsistent product experiences by enforcing named tokens, reusable components, and build-time design constraints.

Core Features & Use Cases

  • Token Architecture: Define primitive, semantic, and component tokens so screens use meaningful values instead of hardcoded colors, spacing, typography, radii, or durations.
  • Component Governance: Decide when to reuse, extend, compose, or create components, while documenting states, touch targets, and accessibility requirements.
  • Dark Mode and Accessibility: Require dark-mode values and contrast validation when semantic tokens are introduced.
  • Use Case: Apply this Skill when creating a new button, extending a shared component, or documenting design tokens for a cross-platform iOS and Android app.

Quick Start

Use the design-system skill to define the required tokens and component changes for the new interface element, including dark-mode values, states, touch targets, and contrast checks.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I prevent design system drift and inconsistent UI across iOS and Android?▼

Design tokens prevent inconsistent UI by replacing hardcoded colors, spacing, and typography with meaningful values. This skill enforces primitive, semantic, and component token layers to maintain cross-platform consistency between iOS and Android applications.

What is the best way to structure design tokens for a cross-platform component library?▼

Structure design tokens using three layers: primitive, semantic, and component tokens. This architecture replaces hardcoded colors, spacing, typography, radii, and durations with meaningful values that screens reference for consistent cross-platform interfaces.

How do I ensure dark mode parity and accessibility when adding new UI components?▼

Ensure dark mode parity and accessibility by requiring dark-mode values and contrast validation when introducing semantic tokens. New interface elements must also define component states and minimum touch targets to meet accessibility requirements.

When should I create a new component versus extending an existing one in my design system?▼

Decide whether to reuse, extend, compose, or create components through component governance. This process requires documented justification for new components and ensures states, touch targets, and accessibility requirements are fully defined before implementation.

Can I use design tokens to replace hardcoded styles in existing mobile applications?▼

Yes, design tokens replace hardcoded styles in existing mobile applications. This skill applies to defining or extending product design systems across iOS and Android, enforcing named tokens and reusable UI components instead of one-off style implementations.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

Design System Architecture

Define primitive, semantic, and component tokens with theming for web, iOS, and Android.

Community
Advanced
xaderlagguixaderlaggui
3

app-ui-design

Design accessible mobile UI systems for iOS and Android.

Community
Advanced
WPdoactionWPdoaction
9

wp-playground

Create disposable WordPress playgrounds for testing plugins and themes.

Official
Intermediate
alexzhang1030alexzhang1030

i-normalize

Normalize frontend interfaces to match established design-system tokens and patterns.

Community
Intermediate