MCP HubMCP Hub
← Retour aux compétences

hig-components-content

raintree-technology
Mis à jour 5 days ago
78
9
78
Voir sur GitHub
Métaaidesigndata

À propos

Cette compétence Claude fournit les directives d'interface humaine d'Apple pour les composants d'affichage de contenu tels que les vues d'image, les vues web, les vues de collection et les vues d'activité. Utilisez-la lorsque les développeurs s'interrogent sur l'implémentation de graphiques, l'affichage de médias, le rendu de contenu web ou la présentation de collections dans les applications Apple. Elle fait référence aux compétences connexes pour les fondations, les modèles et les comportements spécifiques aux plateformes.

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

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

Documentation

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

Dépôt GitHub

raintree-technology/claude-starter
Chemin: templates/.claude/skills/hig-components-content
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