MCP HubMCP Hub
← スキル一覧に戻る

hig-components-content

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

について

このClaudeスキルは、画像ビュー、ウェブビュー、コレクションビュー、アクティビティビューなどのコンテンツ表示コンポーネントに関するAppleのヒューマンインターフェースガイドラインを提供します。開発者がチャートの実装、メディアの表示、ウェブコンテンツのレンダリング、またはAppleアプリでのコレクションの提示について質問する際にご利用ください。基礎、パターン、プラットフォーム固有の動作に関する関連スキルも参照しています。

クイックインストール

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-components-content

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

ドキュメント

Apple HIG: Content Components

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

Key Principles

  1. Adapt to different sizes and contexts. Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes.

  2. Make content accessible. Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions.

  3. Maintain visual hierarchy. Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent.

  4. Use system components first. Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation.

  5. Respect platform conventions. A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects.

  6. Handle empty states. Show a meaningful empty state with guidance on how to populate it, not a blank screen.

  7. Optimize for performance. Use lazy loading, cell reuse, pagination, and prefetching for large datasets.

Reference Index

ReferenceTopicKey content
charts.mdChartsSwift Charts, bar/line/area/point marks, chart accessibility, audio graphs
collections.mdCollectionsGrid/list layouts, compositional layout, selection, reordering, diffable data sources
image-views.mdImage ViewsAspect ratio handling, content modes, SF Symbol images, accessibility
image-wells.mdImage WellsDrag-and-drop image selection, macOS-specific, placeholder content
color-wells.mdColor WellsColor selection UI, system color picker, custom color spaces
web-views.mdWeb ViewsWKWebView, SFSafariViewController, navigation controls, content restrictions
activity-views.mdActivity ViewsShare sheets, activity items, custom activities, action extensions
lockups.mdLockupsImage+text elements, tvOS card layouts, focus effects, shelf layouts

Component Selection Guide

Content NeedRecommended ComponentPlatform Notes
Visualizing quantitative dataCharts (Swift Charts)iOS 16+, macOS 13+, watchOS 9+
Browsing a grid or list of itemsCollection ViewCompositional layout for complex arrangements
Displaying a single imageImage ViewSupport aspect ratio fitting; provide accessibility description
Selecting an image via drag or browseImage WellmacOS primarily; use image pickers on iOS
Selecting a colorColor WellTriggers system color picker; macOS, iOS 14+
Showing web content inlineWeb View (WKWebView)Use SFSafariViewController for external browsing
Sharing content to other appsActivity ViewSystem share sheet with configurable activity types
Content card (image + text)LockupPrimarily tvOS; adaptable to other platforms

Output Format

  1. Component recommendation with rationale, referencing the relevant HIG reference file.
  2. Configuration guidance -- key properties and setup.
  3. Accessibility requirements for the recommended component.
  4. Platform-specific notes for targeted platforms.

Questions to Ask

  1. What type of content? (Quantitative data, images, web content, browsable collection, share action?)
  2. Which platforms?
  3. Static or dynamic content?
  4. How much content? (Few items vs hundreds/thousands affects component choice and optimization.)

Related Skills

  • hig-foundations -- Color, typography, accessibility, and image guidelines
  • hig-patterns -- Data visualization, sharing, and loading patterns
  • hig-components-layout -- Structural containers (scroll views, lists, split views) hosting content
  • hig-platforms -- Platform-specific component behavior (lockups on tvOS, web views on macOS)

Built by Raintree Technology · More developer tools

GitHub リポジトリ

raintree-technology/claude-starter
パス: templates/.claude/skills/hig-components-content
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を選択してください。

スキルを見る