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
Analyze your entire codebase to identify hardcoded design values (colors, typography, spacing) that violate design system compliance. Claude generates targeted refactoring suggestions and automated replacements that map hardcoded values to your design token system. You maintain a single source of truth for your UI, making brand updates and scaling design changes seamless across all components.
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.
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 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.
This skill automates compliance screening for freight shipments and trade transactions by checking party details and destinations against international sanctions databases, assessing regulatory risk across export controls and tariff classifications, and generating audit documentation with specific regulatory citations. You provide shipment data, and Claude identifies compliance violations, flags restricted parties and destinations, classifies export control risks, and produces defensible audit trails for regulatory review.
You can streamline your entire inbound freight receiving process by leveraging templates, checklists, and protocols for verifying shipment documentation, identifying and escalating exceptions, and processing freight damage claims. This skill helps you coordinate with carriers and vendors, maintain detailed receiving records, and analyze freight costs to ensure accuracy and compliance.
You can create production-ready shipping documents including bills of lading, cargo manifests, and customs declarations. Claude validates all documents against international shipping regulations (IATA, IMO, Incoterms) and generates accurate HS code classifications to ensure compliance before submission to carriers and customs authorities.
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.