スキル一覧に戻る

hig-patterns

raintree-technology
更新日 4 days ago
78
9
78
GitHubで表示
メタdesigndata

について

このスキルは、オンボーディング、ローディング状態、検索、エラー処理など、一般的なUXパターンとインタラクションに関するApple HIG(ヒューマンインターフェースガイドライン)のガイダンスを提供します。開発者がAppleアプリで特定のユーザーフローを実装する方法やインタラクションデザインの問題を解決する方法を尋ねた際にご利用ください。基礎原則、プラットフォーム固有の詳細、コンポーネントの詳細については、他のHIG関連スキルを参照しています。

クイックインストール

Claude Code

推奨
メイン
npx skills add raintree-technology/claude-starter -a claude-code
プラグインコマンド代替
/plugin add https://github.com/raintree-technology/claude-starter
Git クローン代替
git clone https://github.com/raintree-technology/claude-starter.git ~/.claude/skills/hig-patterns

このコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします

ドキュメント

Apple HIG: Interaction Patterns

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

Key Principles

  1. Minimize modality. Use modality only when it is critical to get attention, a task must be completed or abandoned, or saving changes is essential. Prefer non-modal alternatives.

  2. Provide clear feedback. Every action should produce visible, audible, or haptic response. Activity indicators for indeterminate waits, progress bars for determinate, haptics for physical confirmation.

  3. Support undo over confirmation dialogs. Destructive actions should be reversible when possible. Undo is almost always better than "Are you sure?"

  4. Launch quickly. Display a launch screen that transitions seamlessly into the first screen. No splash screens with logos. Restore previous state.

  5. Defer sign-in. Let users explore before requiring account creation. Support Sign in with Apple and passkeys.

  6. Keep onboarding brief. Three screens max. Let users skip. Teach through progressive disclosure and contextual hints.

  7. Use progressive disclosure. Show essentials first, let users drill into details. Don't overwhelm with every option on one screen.

  8. Respect user attention. Consolidate notifications, minimize interruptions, give users control over alerts. Never use notifications for marketing.

Reference Index

ReferenceTopicKey content
charting-data.mdCharting DataData visualization patterns, accessible charts, interactive elements
collaboration-and-sharing.mdCollaboration & SharingShare sheets, activity views, collaborative editing, SharePlay
drag-and-drop.mdDrag and DropDrag sources, drop targets, spring loading, multi-item drag, visual feedback
entering-data.mdEntering DataText fields, pickers, steppers, input validation, keyboard types, autofill
feedback.mdFeedbackAlerts, action sheets, haptic patterns, sound feedback, visual indicators
file-management.mdFile ManagementDocument browser, file providers, iCloud integration, document lifecycle
going-full-screen.mdGoing Full ScreenFull-screen transitions, immersive content, exiting full screen
launching.mdLaunchingLaunch screens, state restoration, cold vs warm launch
live-viewing-apps.mdLive Viewing AppsLive content display, real-time updates, Live Activities, Dynamic Island
loading.mdLoadingActivity indicators, progress views, skeleton screens, lazy loading, placeholders
managing-accounts.mdManaging AccountsSign in with Apple, passkeys, account creation, credential autofill, account deletion
managing-notifications.mdManaging NotificationsPermission requests, grouping, actionable notifications, provisional delivery
modality.mdModalitySheets, alerts, popovers, full-screen modals, when to use each
multitasking.mdMultitaskingiPad Split View, Slide Over, Stage Manager, responsive layout, size class transitions
offering-help.mdOffering HelpContextual tips, onboarding hints, help menus, support links
onboarding.mdOnboardingWelcome screens, feature highlights, progressive onboarding, skip options
playing-audio.mdPlaying AudioAudio sessions, background audio, Now Playing, audio routing, interruptions
playing-haptics.mdPlaying HapticsCore Haptics, UIFeedbackGenerator, haptic patterns, custom haptics
playing-video.mdPlaying VideoVideo player controls, picture-in-picture, AirPlay, full-screen video
printing.mdPrintingPrint dialogs, page setup, AirPrint integration
ratings-and-reviews.mdRatings & ReviewsSKStoreReviewController, timing, frequency limits, in-app feedback
searching.mdSearchingSearch bars, suggestions, scoped search, results display, recents
settings.mdSettingsIn-app vs Settings app, preference organization, toggles, defaults
undo-and-redo.mdUndo and RedoShake to undo, undo/redo stack, multi-level undo
workouts.mdWorkoutsWorkout sessions, live metrics, Always On display, summaries, HealthKit

Pattern Selection Guide

User GoalRecommended PatternAvoid
First app experienceBrief onboarding (max 3 screens) + progressive disclosureLong tutorials, mandatory sign-up
Waiting for contentSkeleton screens or progress indicatorsBlocking spinners with no context
Confirming destructive actionUndo supportExcessive "Are you sure?" dialogs
Collecting user inputInline validation, smart defaults, autofillModal forms for simple inputs
Requesting permissionsContextual, just-in-time with explanationRequesting all permissions at launch
Providing feedbackHaptics + visual indicatorSilent actions with no confirmation
Organizing preferencesIn-app settings for frequent itemsBurying all settings in system Settings app

Output Format

  1. Recommended pattern with rationale, citing the relevant reference file.
  2. Step-by-step implementation covering each screen or state.
  3. Platform variations for targeted platforms.
  4. Common pitfalls that violate HIG for this pattern.

Questions to Ask

  1. Where in the app does this pattern appear? What comes before and after?
  2. Which platforms?
  3. Designing from scratch or improving an existing flow?
  4. Does this involve sensitive actions? (Destructive operations, payments, permissions)

Related Skills

  • hig-foundations -- Accessibility, color, typography, and privacy principles underlying every pattern
  • hig-platforms -- Platform-specific pattern implementations
  • hig-components-layout -- Structural components (tab bars, sidebars, split views) for navigation patterns
  • hig-components-content -- Content display within patterns (charts, collections, search results)

Built by Raintree Technology · More developer tools

GitHub リポジトリ

raintree-technology/claude-starter
パス: templates/.claude/skills/hig-patterns
0
ai-toolsanthropicclaudeclaude-aiclaude-codedeveloper-tools

関連スキル

content-collections

メタ

このスキルは、Content Collections(Markdown/MDXファイルを型安全なデータコレクションに変換するTypeScriptファーストのツール)の本番環境でテストされた設定を提供します。Zodバリデーションによる型安全性を実現し、ブログ、ドキュメントサイト、コンテンツ重視のVite + Reactアプリケーション構築時にご利用ください。Viteプラグインの設定、MDXコンパイルから、デプロイ最適化、スキーマバリデーションまで、すべてを網羅しています。

スキルを見る

polymarket

メタ

このスキルは、開発者がPolymarket予測市場プラットフォームを活用したアプリケーション構築を可能にします。API統合による取引や市場データの取得に加え、WebSocketを介したリアルタイムデータストリーミングにより、ライブ取引や市場活動を監視できます。取引戦略の実装や、ライブ市場更新を処理するツールの作成にご利用ください。

スキルを見る

creating-opencode-plugins

メタ

このスキルは、開発者がコマンド、ファイル、LSP操作など25種類以上のイベントタイプにフックするOpenCodeプラグインを作成することを支援します。JavaScript/TypeScriptモジュール向けに、プラグイン構造、イベントAPI仕様、および実装パターンを提供します。カスタムイベント駆動ロジックでOpenCode AIアシスタントのライフサイクルをインターセプト、監視、または拡張する必要がある場合にご利用ください。

スキルを見る

sglang

メタ

SGLangは、高性能なLLMサービングフレームワークであり、RadixAttentionプレフィックスキャッシュを活用したJSON、正規表現、エージェントワークフロー向けの高速で構造化された生成を特長とします。特にプレフィックスが繰り返されるタスクにおいて、大幅に高速な推論を実現し、複雑な構造化出力やマルチターン対話に最適です。制約付きデコードが必要な場合や、広範なプレフィックス共有を伴うアプリケーションを構築する場合は、vLLMなどの代替案ではなくSGLangを選択してください。

スキルを見る