Mobile UI Component System Builder
Generate production-ready mobile UI component systems with tokens and accessibility specs
What You Can Do
You can generate complete mobile UI component systems that include visual specifications, state variations, interaction patterns, accessibility requirements, and platform-specific implementation guidelines. This skill creates detailed design token systems (colors, typography, spacing, elevation) and produces documented component libraries that developers can immediately implement in SwiftUI, Jetpack Compose, or native frameworks. You'll bridge the gap between design and engineering by producing specifications that reduce back-and-forth communication and ensure consistent behavior across iOS and Android platforms.
Features
Define and export color palettes, typography scales, spacing systems, and elevation tokens as structured data
Document all component states (default, hover, active, disabled, error, loading) with visual and interaction details
Generate WCAG 2.1 AA requirements including contrast ratios, semantic labels, and screen reader support for each component
Provide iOS Human Interface Guidelines and Material Design 3 alignment with platform-native patterns
Specify touch targets, gesture responses, animations, and micro-interactions with timing details
Suggest composition patterns, prop structures, and variant organization for scalable implementation
Define component behavior across different screen sizes and device orientations
Include code structure suggestions for SwiftUI, Jetpack Compose, and native mobile frameworks
Example Output
Button Component Specification:
- Design Tokens: Primary (blue #0066CC), Secondary (gray #6C757D), states with opacity variations
- Dimensions: 48px min touch target, 16px padding, 4px border radius
- States: Default, Hover (+8% brightness), Active (pressed), Disabled (50% opacity), Loading (spinner + text fade)
- Accessibility: Color contrast 4.5:1, aria-label support, focus ring visible at 2px
- iOS: Follows HIG with SF Symbols integration, haptic feedback on tap
- Android: Material Design 3 with ripple effect, minimum 48dp touch target
- Animation: 200ms ease-out on state change
Color Token System:
- Semantic tokens:
primary-action,destructive-action,success-state - Neutral palette: 0-100 scale from pure black to pure white
- Export format: JSON for both platforms with hex, RGB, and opacity variants
What's Included
- SKILL.md instruction file with component system methodology:
- Design Token Template: Spreadsheet for defining color, typography, spacing, and elevation tokens
- Component Specification Framework: Markdown template covering visual specs, states, accessibility, and platform guidelines
- Accessibility Checklist: WCAG 2.1 AA compliance verification for mobile UI components
- Platform Guidelines Reference: iOS HIG and Material Design 3 best practices checklist
Who It's For
- Mobile UI/UX designers building or scaling design systems
- Product designers preparing component handoff specifications for mobile engineering teams
- Design system managers documenting component libraries across iOS and Android
- Mobile app developers implementing design systems and ensuring cross-platform consistency
- Design leads auditing existing components for accessibility and consistency standards
Best For
- Creating comprehensive component libraries for new mobile products or major features
- Generating design token systems (colors, typography, spacing) for multi-platform apps
- Documenting state variations and interaction patterns for complex UI components
- Establishing accessibility compliance specifications for WCAG 2.1 AA standards
- Producing iOS and Android platform-specific implementation guidelines
- Scaling design systems across growing product teams with consistent patterns
You might also like
Rapidly verify shipments, parties, and destinations against multiple global sanctions lists including OFAC SDN, EU consolidated list, and UN designations. Generate compliance decisions with complete audit trails, risk assessments, and regulatory documentation that satisfies internal review and external audits without manual spreadsheet work.
Analyze inbound shipping documentation to verify receipt accuracy against purchase orders, bills of lading, and carrier documentation. Identify and categorize discrepancies like missing items, quantity variances, and damage claims. Generate exception reports and provide resolution guidance to streamline your receiving operations.
This skill helps you navigate Foreign Trade Zone regulations by automating compliance audits, generating required documentation, and verifying import-export procedures. You'll receive detailed compliance checklists, tariff classification guidance, and ready-to-use documentation templates that meet CBP requirements, reducing errors and audit risk.
Transform your carrier relationships with structured performance analysis and strategic negotiations. You'll evaluate carrier metrics across cost, service quality, and reliability to build scorecards that drive informed decisions on contract renewals, price optimization, and expansion opportunities. This skill prepares rate negotiation strategies, identifies dispute root causes, and recommends retention or exit decisions backed by quantitative data.
Transform unstructured diary entries into coded themes, behavioral patterns, and evidence-based design recommendations. You can process 10+ participant diaries at scale while maintaining contextual richness, identify recurring behaviors across cohorts rather than isolated incidents, and surface emotional and situational triggers that inform product direction. This approach bridges the gap between raw qualitative data and actionable design strategy.
This skill transforms raw carrier data into actionable intelligence for your supply chain. You provide metrics like delivery times, costs, service levels, and volume data, and the skill delivers comprehensive performance analysis, cost-benefit comparisons, and strategic optimization recommendations. Use it to identify underperforming carriers, negotiate better contracts, and restructure your logistics network for maximum efficiency.
This skill helps you navigate complex Free Trade Zone regulations and tariff rules with confidence. You can verify product classifications, calculate accurate duties and landed costs, assess regulatory compliance, and prepare audit-ready documentation. Get instant guidance on trade agreements, import/export scenarios, and compliance risks without manual research.
Upload multiple partial LTL shipments and receive data-driven consolidation recommendations with precise margin calculations. This skill analyzes your shipment characteristics against current market rates to identify cost-saving opportunities and prioritizes consolidation scenarios by profitability impact. Get actionable rate recommendations that balance cost reduction with service commitments.