skills.rest
sergiodxa
sergiodxaCOMMUNITY
Explore all skills by this author →
Website𝕏@sergiodxaGitHub

apple-hig-web-app-guidelines

Applies Apple Human Interface Guidelines to Remix UI web app design and review.

5|Updated Feb 2, 2026
Search Tags:#accessibility#responsive design#ios#macos#ui guidelines#apple hig#remix ui
One-click install
npx skills add https://github.com/sergiodxa/monorepo --skill apple-hig-web-app-guidelines-sergiodxa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-hig-web-app-guidelines
Source: https://github.com/sergiodxa/monorepo/tree/main/.agents/skills/apple-hig-web-app-guidelines
Command: npx skills add https://github.com/sergiodxa/monorepo --skill apple-hig-web-app-guidelines-sergiodxa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Translating Apple's Human Interface Guidelines into browser-based web apps is error-prone: teams either copy native-only patterns that break on the web or ignore platform conventions entirely. This Skill provides 10 concrete rules for building responsive iOS-like and macOS-like interfaces with Remix UI and css() mixins. ## Core Features & Use Cases - Adaptive Layout Rules: Guidance for compact mobile flows versus persistent multi-pane desktop layouts, navigation by device class, and responsive density. - Interaction and Input Standards: Touch-first 44px targets, keyboard and pointer enhancements, and visible alternatives to gestures and hover-only controls. - Visual and Feedback Patterns: Semantic color tokens, reduced-motion support, readable typography, and explicit feedback for destructive actions. - Use Case: When designing a project dashboard that must feel polished on iPhone Safari and desktop browsers, apply these rules to choose bottom navigation on mobile, a persistent sidebar on desktop, and safe-area-aware fixed UI. ## Quick Start Review my Remix UI page layout against the Apple HIG web app guidelines and suggest responsive improvements for mobile and desktop.

Frequently Asked Questions about apple-hig-web-app-guidelines

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

FAQPage Schema
How do I apply Apple HIG to a web app?▼

Apply Apple HIG as product design guidance rather than copying native UI. Translate concepts like safe areas into CSS env() insets, sheets into dialog or popover elements, and Dynamic Type into rem-based scalable text, using semantic HTML and your app's design tokens.

How to design responsive navigation for mobile and desktop?▼

Use bottom or simple top navigation with three to five primary destinations on mobile, and a persistent sidebar or toolbar on desktop. Add breadcrumbs for deep hierarchies on desktop, and avoid hamburger menus unless space is genuinely constrained.

What touch target size should web app buttons use?▼

Touch targets should be at least 44x44 CSS pixels, matching Apple's 44pt guidance. Use semantic button and anchor elements, keep focus states visible, and treat hover as an enhancement rather than the only way to reach actions.

Should web apps copy native iOS UI elements?▼

No. Web apps should not fake native chrome like home indicators, traffic-light window controls, or Safari UI. Respect real browser safe areas with env(safe-area-inset-*) and prefer browser conventions when HIG and web expectations conflict.

How do I handle destructive actions in web UI design?▼

Use explicit labels like "Delete project", visually separate destructive actions from safe primary actions, and confirm irreversible operations with a dialog. Prefer undo for reversible actions and show immediate pending states for network operations.

Related Skills

Explore More Design & Creative Skills→
79yuuki79yuuki

component-gallery

Select reusable component patterns from design systems for frontend UI tasks.

Community
Intermediate
remix-runremix-run
33.3k

author-ui-components

Guides authoring of Remix packages/ui components including primitives, styled wrappers, and style mixins.

Official
Advanced
ssdeanxssdeanx
2

web-ui-ux

Audit web pages for usability, accessibility, and responsive behavior.

Community
Intermediate
Fire-ants-never-dieFire-ants-never-die

orchestrator-designer

Generate design tokens and component specifications for the Claude Orchestrator UI.

Official
Intermediate