agentsclimarketplace

Mobile design system

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

Tool-neutral AI Engineering System: 174 reusable skills (installable as Claude Code plugins) for planning and building software with AI agents. Classify → plan → approve → build under quality gates. Works with Claude Code, Codex, Cursor, Windsurf, Copilot & Antigravity. Canonical in .ai/.

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.

2 things to look at

  • 21 days oldThe repository was created 21 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 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.

What its author says it does

Copied from the file, not written here

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.

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

  1. Derive tokens from the design source (or define a sane default set).
  2. Set typography + spacing scales.
  3. Build primitive components from tokens.
  4. Wire theme + fonts + accessibility.
  5. 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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.