Mobile design system

Skill ahtishamshahzad/agent_dev_flow/.ai/skills/mobile/mobile-design-system

Use to plan a mobile design system — tokens, spacing, typography scale, color palette, and reusable component primitives — before building screens. Establishes consistency; coordinates with theme, fonts, and accessibility.From its SKILL.md

Install

npx -y skills add ahtishamshahzad/agent_dev_flow --skill mobile-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.4 KB, 666 tokens by cl100k_base, as published. Nobody here has run it

Mobile Design System

Purpose

Establish a consistent visual foundation: design tokens, spacing/typography scales, color palette, and reusable primitives (buttons, inputs, cards) that screens compose from.

When to Use

Before building multiple screens, to avoid ad-hoc styling.
When UI is inconsistent across screens.
Not for a single throwaway screen.

Inputs

Brand/design guidance or Figma (if any).
Accessibility and platform constraints.

Discovery Questions

Is there a design source (Figma/brand) to derive tokens from?
What are the spacing, typography, and color scales?
Which primitive components recur across screens?
What accessibility contrast/sizing constraints apply?

Responsibilities

Define design tokens (spacing, radius, color, typography).
Define typography and spacing scales.
Design reusable primitives (buttons, inputs, cards, layout).
Coordinate theming (mobile-theme), fonts (mobile-fonts), icons (mobile-vector-icons), and accessibility (mobile-accessibility).

Required Workflow

Derive tokens from the design source (or define a sane default set).
Set typography + spacing scales.
Build primitive components from tokens.
Wire theme + fonts + accessibility.
Record the design system.

Decision Rules

Tokens are the single source of visual truth; components consume tokens, not hard-coded values.
Prefer a small set of composable primitives over many one-off styled components.
Meet accessibility contrast/target-size minimums from the start.
Match platform conventions where users expect them.

Rules

No hard-coded style values in screens — use tokens.
Coordinate with theme/fonts/accessibility rather than duplicating them.
Keep the primitive set small and composable.

Anti-Patterns

Ad-hoc inline styles diverging per screen.
A sprawling component library before screens need it.
Ignoring contrast/target-size accessibility.
Hard-coded colors/spacing bypassing tokens.

Validation Checklist

Tokens defined.
Typography + spacing scales set.
Reusable primitives designed from tokens.
Theme/fonts/icons/accessibility coordinated.
No hard-coded style values in screens.

Definition of Done

A recorded design system: tokens, scales, and a small set of reusable primitives consumed via tokens — coordinated with theme, fonts, icons, and accessibility.

Related Skills

mobile-theme, mobile-fonts, mobile-vector-icons, mobile-accessibility, mobile-navigation

Related Knowledge

../../../knowledge/ (brand, design decisions).

Related References

../../../references/mobile/screens/ when populated.

Context Loading Guidance

Requires: design source (if any), accessibility constraints, recurring UI.
Does not require: the whole app source, unrelated references, every mobile skill.
May load: mobile-theme, mobile-fonts, mobile-accessibility.
Stop when: the design system is recorded.

Token Efficiency Guidance

Derive tokens once; reference them. Keep the primitive list concise; link screen references instead of pasting UI.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.