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
Audit import/export documentation against regulatory requirements, identify missing certificates or discrepancies, and generate compliance checklists for customs submission. You'll catch documentation gaps early, reduce shipment delays, and ensure all goods meet destination country regulations. The validator reviews invoices, packing lists, tariff classifications, and origin certificates to flag non-compliance issues before they reach port.
This skill systematically reviews your import shipment documentation, verifies harmonized tariff codes, and checks regulatory requirements before customs entry. You get a comprehensive compliance assessment that identifies documentation gaps, tariff misclassifications, and regulatory risks, helping you avoid costly delays, penalties, and audit issues.
Analyze multi-modal transportation options by evaluating carrier capabilities, route efficiency, cost trade-offs, and regulatory constraints. You receive structured route recommendations ranked by your priority criteria (cost, speed, compliance, sustainability), along with risk assessments and implementation checklists for each option.
You can input your fleet data (vehicle metrics, fuel consumption, maintenance records, driver performance) and receive comprehensive analysis including cost reduction opportunities, efficiency benchmarks, and actionable optimization strategies. The skill generates detailed reports that identify fuel waste, maintenance inefficiencies, and underutilized assets to help you reduce operating expenses by 10-25% and extend vehicle lifespan.
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 analyzes shipment data, vehicle constraints, delivery windows, and regulatory requirements to generate efficient routes that reduce transportation costs and fuel consumption while ensuring on-time delivery. It evaluates complex multi-variable problems to find routing solutions that balance cost savings with operational compliance and customer service levels.
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.
Submit full truckload shipment details and receive detailed analysis of capacity utilization, rate competitiveness, and profitability margins. The skill evaluates compliance requirements, identifies routing risks, and generates optimization recommendations to improve load factors and carrier margins while ensuring regulatory adherence.