ui-design-guidelines

Provide iOS-inspired UI design guidelines for web and mobile interfaces.

Updated Mar 28, 2025

Search Tags:#design #accessibility #ui-design #RTL #design-guidelines #semantic-tokens #iOS-inspired

Ready to run

npx skills add https://github.com/gileck/app-template-ai --skill ui-design-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design-guidelines
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/ui-design-guidelines
Command: npx skills add https://github.com/gileck/app-template-ai --skill ui-design-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates iOS-inspired UI design principles to help teams craft visually cohesive, accessible interfaces across web and mobile apps.

Core Features & Use Cases

Comprehensive design philosophy for iOS-like interfaces, including RTL support, haptics, and motion guidelines.
Guidance on using semantic tokens, responsive grids, typography, color systems, and accessibility.
Use Case: When building a multi-platform app, apply these guidelines to ensure a consistent, accessible user experience across platforms.

Quick Start

Review the guidelines and apply semantic tokens to your components.
Adapt the examples to your tech stack (Tailwind/shadcn patterns with your theme).
Begin auditing existing UI against the checklist and iterate.

Frequently Asked Questions about ui-design-guidelines

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

FAQPage Schema

How do I apply iOS-inspired UI design guidelines to ensure consistency across web and mobile apps?▼

Apply iOS-inspired UI design guidelines by adopting semantic tokens, responsive grids, and consistent typography across platforms. This ensures visually cohesive, accessible interfaces for both web and mobile apps while maintaining design system consistency.

What are semantic tokens and how do they work in design systems?▼

Semantic tokens are named design variables that map to specific UI roles rather than raw values. They work in design systems by enabling consistent theming across web and mobile components, allowing teams to adapt examples to their tech stack like Tailwind or shadcn patterns.

Can I use these design guidelines with my existing Tailwind or shadcn frontend components?▼

Yes, you can adapt the design guidelines to your existing Tailwind or shadcn frontend components. The guidelines provide patterns for semantic tokens and theming that integrate with your current tech stack to improve visual consistency and accessibility.

How do I implement RTL support and haptics for multi-platform interfaces?▼

Implement RTL support and haptics by following the comprehensive design philosophy provided in the guidelines. These cover motion guidelines, haptic feedback patterns, and RTL layout support to ensure accessible, consistent user experiences across multi-platform interfaces.

What's the best way to audit existing UI against accessibility and design guidelines?▼

The best way to audit existing UI is to use the provided QA checklists for both web and mobile interfaces. Review your components against the accessibility, typography, color system, and motion guidelines, then iterate on your semantic tokens and design patterns accordingly.

Do I need a specific framework to start building an iOS-like UI with semantic tokens?▼

No specific framework is required to build iOS-like UI with semantic tokens. The guidelines are framework-agnostic and can be adapted to your preferred tech stack, including Tailwind, shadcn patterns, or other theme-based frontend component libraries.