# Mobile Component System

> Select and apply mobile component systems, design tokens, icons, illustrations, fonts, animation assets, and UI kits. Use for app visual systems, reusable mobile components, theming, asset-library choices, and license or bundle-size tradeoffs.

- Skill: `seemseam/mobile-component-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add seemseam/mobile-component-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/seemseam/mobile-component-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: seemseam (https://skillmd.com/u/seemseam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/seemseam/mobile-component-system

---


# Mobile Component System

Use this skill when a mobile app needs a visual system, component strategy,
tokens, icons, illustrations, animation assets, or UI library selection.

Read `references/mobile-skill-and-asset-library.md` when public libraries,
asset sources, or license/provenance decisions matter.

## Workflow

1. Inventory local sources first:
   - existing theme/tokens;
   - component library;
   - icon wrapper;
   - font setup;
   - image and animation assets;
   - Figma or design-system docs.
2. Choose the smallest useful library surface:
   - native platform components when platform feel matters;
   - React Native Paper, Tamagui, NativeWind, or local primitives only when
     they match the repo;
   - Flutter Material/Cupertino widgets or local design-system widgets;
   - SwiftUI/Compose native components for native apps.
3. Treat assets as product dependencies:
   - verify license and source;
   - prefer vector icons or platform icon systems where appropriate;
   - avoid importing entire icon packs;
   - control animation size and runtime cost;
   - document attribution and modification rules.
4. Define reusable primitives:
   - color, typography, spacing, radius, elevation, motion, haptics;
   - buttons, inputs, lists, cards, sheets, tabs, empty/error states;
   - accessibility labels and dynamic type behavior.
5. Check bundle and performance impact before adding heavy assets or runtimes.

## Output

Return:

- local component and token inventory
- selected library/assets with rationale
- license/provenance notes
- component plan
- bundle/performance risks
- follow-up validation