MCP HubMCP Hub
← Retour aux compétences

hig-platforms

raintree-technology
Mis à jour 4 days ago
78
9
78
Voir sur GitHub
Métadesign

À propos

Cette compétence fournit les directives d'interface humaine spécifiques aux plateformes d'Apple pour concevoir sur iOS, iPadOS, macOS, tvOS, visionOS et watchOS. Utilisez-la pour des questions sur l'adaptation d'applications aux différentes plateformes Apple, leurs conventions uniques, leurs méthodes d'entrée, ou pour créer des designs universels. Elle fait des renvois vers d'autres compétences HIG concernant les bases, les modèles et les composants.

Installation rapide

Claude Code

Recommandé
Principal
npx skills add raintree-technology/claude-starter -a claude-code
Commande PluginAlternatif
/plugin add https://github.com/raintree-technology/claude-starter
Git CloneAlternatif
git clone https://github.com/raintree-technology/claude-starter.git ~/.claude/skills/hig-platforms

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Documentation

Apple HIG: Platform Design

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Each platform has a distinct identity. Do not port designs between platforms. Respect each platform's conventions, interaction models, and user expectations.

  2. iOS: touch-first. Direct manipulation on a handheld screen. Optimize for one-handed use. Navigation uses tab bars and push/pop stacks.

  3. iPadOS: expanded canvas. Support Split View, Slide Over, and Stage Manager. Use sidebars and multi-column layouts. Support pointer and keyboard alongside touch.

  4. macOS: pointer and keyboard. Dense information display is acceptable. Use menu bars, toolbars, and keyboard shortcuts extensively. Windows are resizable with precise control.

  5. tvOS: remote and focus. Viewed from a distance. Design for the Siri Remote with focus-based navigation. Large text, simple layouts, linear navigation.

  6. visionOS: spatial interaction. 3D environment using windows, volumes, and spaces. Eye tracking for targeting, indirect gestures for interaction. Respect ergonomic comfort zones.

  7. watchOS: glanceable and brief. Information consumable at a glance. Brief interactions. Digital Crown, haptics, and complications for timely content.

  8. Games: own paradigm. Free to define in-game interaction models, but still respect platform conventions for system interactions (notifications, accessibility, controllers).

Reference Index

ReferenceTopicKey content
designing-for-ios.mdiOSTouch, tab bars, navigation stacks, gestures, screen sizes, safe areas
designing-for-ipados.mdiPadOSMultitasking, sidebars, pointer, keyboard, Apple Pencil, Stage Manager
designing-for-macos.mdmacOSMenu bars, toolbars, window management, keyboard shortcuts, dense layouts, Dock
designing-for-tvos.mdtvOSFocus engine, Siri Remote, lean-back experience, content-forward, parallax
designing-for-visionos.mdvisionOSSpatial computing, windows/volumes/spaces, eye tracking, hand gestures, depth
designing-for-watchos.mdwatchOSGlanceable UI, Digital Crown, complications, notifications, haptics
designing-for-games.mdGamesControllers, immersive experiences, platform-specific conventions, accessibility

Decision Framework

  1. Identify the primary use context. On the go (iOS/watchOS), at a desk (macOS), on the couch (tvOS), spatial environment (visionOS)?

  2. Match input to interaction. Touch for direct manipulation, pointer for precision, gaze+gesture for spatial, Digital Crown for quick scrolling, remote for focus navigation.

  3. Adapt, don't replicate. A macOS sidebar becomes a tab bar on iPhone. A visionOS volume has no equivalent on watchOS. Translate intent, not implementation.

  4. Leverage platform strengths. Live Activities on iOS, Desktop Widgets on macOS, complications on watchOS, immersive spaces on visionOS.

  5. Maintain brand consistency while respecting each platform's visual language and interaction patterns.

Output Format

  1. Platform-specific recommendations citing relevant HIG sections.
  2. Platform differences table comparing navigation, input, layout, and conventions.
  3. Implementation notes per platform including recommended APIs and adaptation strategies.

Questions to Ask

  1. Which platforms are you targeting?
  2. New app or adapting an existing one? If existing, which platform is the base?
  3. SwiftUI or UIKit/AppKit?
  4. Need to support older OS versions?
  5. Primary use context? (On the go, desk, couch, spatial, glanceable?)

Related Skills

  • hig-foundations -- Shared principles (color, typography, accessibility, layout) across platforms
  • hig-patterns -- Interaction patterns that manifest differently per platform
  • hig-components-layout -- Navigation structures (tab bars, sidebars, split views) that vary by platform
  • hig-components-content -- Content display that adapts across platforms

Built by Raintree Technology · More developer tools

Dépôt GitHub

raintree-technology/claude-starter
Chemin: templates/.claude/skills/hig-platforms
0
ai-toolsanthropicclaudeclaude-aiclaude-codedeveloper-tools

Compétences associées

content-collections

Méta

Cette compétence propose une configuration éprouvée en production pour Content Collections, un outil axé sur TypeScript qui transforme des fichiers Markdown/MDX en collections de données typées de manière sûre avec une validation Zod. Utilisez-la lors de la création de blogs, de sites de documentation ou d'applications Vite + React riches en contenu pour garantir la sécurité de typage et la validation automatique du contenu. Elle couvre tout, de la configuration du plugin Vite et de la compilation MDX à l'optimisation des déploiements et la validation des schémas.

Voir la compétence

polymarket

Méta

Cette compétence permet aux développeurs de créer des applications avec la plateforme de marchés prédictifs Polymarket, incluant l'intégration d'API pour le trading et les données de marché. Elle fournit également une diffusion de données en temps réel via WebSocket pour surveiller les transactions en direct et l'activité du marché. Utilisez-la pour mettre en œuvre des stratégies de trading ou pour créer des outils traitant les mises à jour de marché en direct.

Voir la compétence

creating-opencode-plugins

Méta

Cette compétence aide les développeurs à créer des plugins OpenCode qui s'interconnectent avec plus de 25 types d'événements tels que les commandes, les fichiers et les opérations LSP. Elle fournit la structure du plugin, les spécifications de l'API événementielle et les modèles d'implémentation pour les modules JavaScript/TypeScript. Utilisez-la lorsque vous avez besoin d'intercepter, de surveiller ou d'étendre le cycle de vie de l'assistant IA OpenCode avec une logique personnalisée pilotée par les événements.

Voir la compétence

sglang

Méta

SGLang est un framework de service LLM haute performance spécialisé dans la génération rapide et structurée pour les workflows JSON, regex et agentiques grâce à son cache de préfixe RadixAttention. Il offre une inférence nettement plus rapide, particulièrement pour les tâches avec des préfixes répétés, ce qui le rend idéal pour les sorties complexes et structurées ainsi que les conversations multi-tours. Choisissez SGLang plutôt que des alternatives comme vLLM lorsque vous avez besoin d'un décodage contraint ou que vous construisez des applications avec un partage étendu de préfixes.

Voir la compétence