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
- Inventory local sources first:
- existing theme/tokens;
- component library;
- icon wrapper;
- font setup;
- image and animation assets;
- Figma or design-system docs.
- 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.
- 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.
- 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.
- 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
1---2name: mobile-component-system3description: 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.4---56# Mobile Component System78Use this skill when a mobile app needs a visual system, component strategy,9tokens, icons, illustrations, animation assets, or UI library selection.1011Read `references/mobile-skill-and-asset-library.md` when public libraries,12asset sources, or license/provenance decisions matter.1314## Workflow15161. Inventory local sources first:17 - existing theme/tokens;18 - component library;19 - icon wrapper;20 - font setup;21 - image and animation assets;22 - Figma or design-system docs.232. Choose the smallest useful library surface:24 - native platform components when platform feel matters;25 - React Native Paper, Tamagui, NativeWind, or local primitives only when26 they match the repo;27 - Flutter Material/Cupertino widgets or local design-system widgets;28 - SwiftUI/Compose native components for native apps.293. Treat assets as product dependencies:30 - verify license and source;31 - prefer vector icons or platform icon systems where appropriate;32 - avoid importing entire icon packs;33 - control animation size and runtime cost;34 - document attribution and modification rules.354. Define reusable primitives:36 - color, typography, spacing, radius, elevation, motion, haptics;37 - buttons, inputs, lists, cards, sheets, tabs, empty/error states;38 - accessibility labels and dynamic type behavior.395. Check bundle and performance impact before adding heavy assets or runtimes.4041## Output4243Return:4445- local component and token inventory46- selected library/assets with rationale47- license/provenance notes48- component plan49- bundle/performance risks50- follow-up validation
seemseam