skills.rest
FutureAtoms
FutureAtomsCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-component-design

Design mobile UI components with Material Design 3 and Apple HIG specifications.

1|Updated Mar 11, 2026
Search Tags:#ui#accessibility#material design#mobile development#component design#ux#human interface guidelines
One-click install
npx skills add https://github.com/FutureAtoms/claude-skills-backup --skill ui-ux-component-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-component-design
Source: https://github.com/FutureAtoms/claude-skills-backup/tree/main/ui-ux-component-design
Command: npx skills add https://github.com/FutureAtoms/claude-skills-backup --skill ui-ux-component-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of designing mobile UI components by providing a structured framework and detailed specifications for both Material Design 3 and Apple HIG.

Core Features & Use Cases

  • Component Design Framework: Offers a systematic approach to defining component anatomy, variants, states, and visual specifications.
  • Platform Adaptation: Provides guidance on adapting designs for iOS and Android.
  • Accessibility Focus: Integrates accessibility checklists and considerations throughout the design process.
  • AI/Voice Component Examples: Includes detailed specifications for chat bubbles, voice buttons, audio players, and more.
  • Use Case: A developer needs to design a custom "rating" component for a mobile app. They can use this Skill to generate a detailed specification covering its states (empty, filled, half-star), interaction (tap to select), accessibility (screen reader labels), and platform-specific visual treatments.

Quick Start

Generate a complete component specification for a 'user profile card'.

Frequently Asked Questions about ui-ux-component-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design mobile UI components that align with Material Design 3 and Apple Human Interface Guidelines?▼

To design mobile UI components, use a structured framework to define component anatomy, variants, interaction states, and visual specifications. This approach ensures adherence to Material Design 3 and Apple Human Interface Guidelines for platform consistency.

What is component anatomy in mobile UX design?▼

Component anatomy in mobile UX design breaks down a UI element into its constituent visual parts and properties. This process defines component variants, interaction states, and visual specifications for accurate platform implementation.

How do I adapt a custom UI component for both iOS and Android platforms?▼

Adapt a custom UI component for iOS and Android by applying platform-specific visual treatments and interaction patterns. This ensures the component meets Apple Human Interface Guidelines and Material Design 3 standards respectively.

Does this mobile component design framework include accessibility checklists?▼

Yes, the mobile component design framework integrates accessibility checklists throughout the specification process. It defines specific considerations like screen reader labels and interaction states for accessible UI components.

How do I create specifications for AI and voice-related mobile components like chat bubbles?▼

Create specifications for AI and voice components like chat bubbles and audio players by defining their anatomy, interaction states, and visual properties. This framework provides detailed examples for these specific mobile UI elements.

What is the best way to document interaction states for a custom mobile rating component?▼

The best way to document interaction states for a mobile rating component is to generate a complete specification covering its empty, filled, and half-star states, tap interactions, and platform-specific visual treatments.

Related Skills

Explore More Design & Creative Skills→
kireevkit15-syskireevkit15-sys

shape

Run a structured discovery interview and generate a design brief.

Community
Advanced
williamzujkowskiwilliamzujkowski
17

react-native-mobile-development

Develop cross-platform mobile apps with React Native for iOS and Android.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
Cure-Consulting-GroupCure-Consulting-Group
1

product-design

Generate platform-specific UI design specifications with design tokens and accessibility standards.

Official
Advanced