المهارات Apple HIG: Content Components
📦

Apple HIG: Content Components

آمن

Design Apple UI Components with Confidence

차트, 컬렉션, 콘텐츠 디스플레이를 Apple 플랫폼에 네이티브하게 구현하는 데 어려움을 겪고 계신가요? 이 스킬은 접근 가능하고 플랫폼에 적응하는 컴포넌트를 구축하여 Apple 의 디자인 원칙을 따르도록 돕는 권위 있는 Human Interface Guidelines 를 제공합니다.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "Apple HIG: Content Components". iOS 앱에서 시간에 따른 주식 가격 데이터를 표시해야 합니다. 어떤 차트 유형을 사용해야 하나요?

النتيجة المتوقعة:

시간에 따른 주식 가격 데이터에는 선 마크가 있는 선 차트를 사용하세요. 선 마크는 값이 시간에 따라 어떻게 변하는지 보여주고 사람들이 추세를 시각화하는 데 탁월합니다. 데이터가 플롯 영역을 채우도록 동적 Y 축 범위로 차트를 구성하고, 각 데이터 포인트에 접근성 레이블을 제공해야 합니다. VoiceOver 사용자가 추세를 들을 수 있도록 Audio Graphs 지원을 고려하세요. 완전한 구현 세부사항은 charts.md 를 참조하세요.

استخدام "Apple HIG: Content Components". tvOS 에 컬렉션 뷰를 어떻게 구현하나요?

النتيجة المتوقعة:

tvOS 에서 컬렉션은 패럴랙스 효과가 있는 대형 lockups 과 선반 레이아웃을 사용합니다. 포커스 관리가 중요합니다 - 항목은 포커스 시 확대되고 깊이가 추가되어야 합니다. 합성 레이아웃과 함께 UICollectionView 를 사용하고, 포커스 엔진이 예상 탐색 패턴을 따르도록 하세요. Lockups 은 일반적으로 텍스트 오버레이가 있는 이미지를 포함합니다. tvOS 별 패턴은 lockups.md 를, 레이아웃 구성은 collections.md 를 참조하세요.

التدقيق الأمني

آمن
v1 • 2/25/2026

Documentation-only skill containing Apple Human Interface Guidelines in Markdown format. No executable code, no runtime behavior, and no security risks. All static analysis findings are false positives from Markdown content (inline code blocks, documentation URLs, and legitimate UI terminology).

8
الملفات التي تم فحصها
587
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
65
الامتثال للمواصفات

ماذا يمكنك بناءه

데이터 대시보드를 구축하는 iOS 개발자

iOS 개발자가 피트니스 추적 데이터를 차트로 표시해야 합니다. 이 스킬은 막대와 선 마크 중 선택, 축 범위 구성, 오디오 그래프 접근성 구현을 도와줍니다.

tvOS 인터페이스를 제작하는 UI/UX 디자이너

디자이너가 Apple TV 용 미디어 브라우징 앱을 제작하고 있습니다. 이 스킬은 tvOS 고유의 lockups 컴포넌트, 포커스 효과, 선반 레이아웃에 대한 가이드를 제공합니다.

접근성을 보장하는 크로스플랫폼 개발자

개발자는 컬렉션 뷰가 모든 Apple 플랫폼에서 VoiceOver 및 Switch Control 과 함께 정상 작동하도록 해야 합니다. 이 스킬은 접근성 요구사항과 테스트 가이드를 제공합니다.

جرّب هذه الموجهات

컴포넌트 선택 
[platform] 앱에서 [content type] 을 표시해야 합니다. 어떤 컴포넌트를 사용해야 하고 그 이유는 무엇인가요?
접근성 구현 
VoiceOver 사용자를 위해 [component] 을 어떻게 접근 가능하게 만들 수 있나요? 어떤 레이블과 설명이 필요한가요?
플랫폼별 동작 
[component] 은 [other platform] 과 비교하여 [platform] 에서 어떻게 다르게 동작하나요? 어떤 적응이 필요한가요?
구성 및 모범 사례 
[component] 에 대해 구성해야 하는 주요 속성은 무엇인가요? 성능 및 접근성 모범 사례는 무엇인가요?

أفضل الممارسات

  • 질문하기 전에 항상 `.claude/apple-design-context.md`에서 기존 디자인 컨텍스트를 확인하세요 - 이 스킬은 기본적인 색상, 타이포그래피, 접근성 가이드라인을 기반으로 합니다
  • 플랫폼별 동작을 일찍 고려하세요 - iOS 에서 작동하는 컬렉션은 tvOS(lockups) 나 visionOS(깊이 및 호버 효과) 를 위해 상당한 조정이 필요할 수 있습니다
  • 처음부터 접근성을 설계하세요 - 차트에는 오디오 그래프 지원이, 이미지에는 대체 텍스트가, 모든 컴포넌트에는 적절한 VoiceOver 레이블이 필요합니다

تجنب

  • 단순히 시각적 외관을 기준으로 컴포넌트를 선택하지 마세요 - 항상 접근성 요구사항, 플랫폼 규칙, 데이터 특성을 고려하세요
  • 시스템 컴포넌트 (Swift Charts, UICollectionView, WKWebView) 가 내장된 접근성과 플랫폼 적응을 제공하는데도 불구하고 처음부터 커스텀 컴포넌트를 구현하지 마세요
  • 빈 상태를 건너뛰지 마세요 - 빈 화면은 사용자를 혼란스럽게 합니다; 빈 컬렉션이나 데이터 디스플레이를 채우는 방법에 대한 의미 있는 가이드를 제공하세요

الأسئلة المتكررة

컬렉션 뷰와 테이블 뷰의 차이점은 무엇인가요?
컬렉션 뷰는 합성 레이아웃을 사용하여 복잡한 그리드와 커스텀 레이아웃을 지원하는 반면, 테이블 뷰는 단일 열 목록으로 제한됩니다. 그리드, 그리드 내 그리드, 다중 열 레이아웃에는 컬렉션을 사용하세요. 단순 목록에는 테이블을 사용하세요. 둘 다 성능을 위한 diffable 데이터 소스와 지연 로딩을 지원합니다.
WKWebView 와 SFSafariViewController 중 무엇을 사용해야 하나요?
앱 인터페이스 내에 웹 콘텐츠를 인라인으로 표시하고 탐색 환경을 제어해야 할 때 WKWebView 를 사용하세요. 외부 웹 브라우징에는 SFSafariViewController 를 사용하세요 - 이는 읽기 모드, 자동 완성, 공유 기능을 제공하는 친숙한 Safari 인터페이스를 제공합니다.
차트에서 막대, 선, 점 마크 중 어떻게 선택하나요?
범주 간 값을 비교하거나 전체의 일부를 표시할 때는 막대 마크를 사용하세요. 값이 연속적인 변화를 나타낼 때 시간에 따른 추세를 보여주려면 선 마크를 사용하세요. 개별 고유 값을 나타내고 두 데이터 속성 간 관계를 보여주려면 점 마크를 사용하세요.
Lockup 이란 무엇이며 언제 사용해야 하나요?
Lockup 은 일반적으로 미디어 브라우징에 사용되는 텍스트와 결합된 이미지인 콘텐츠 카드입니다. Lockups 은 주로 패럴랙스 효과가 있는 카드로 나타나는 tvOS 에서 사용됩니다. 다른 플랫폼에서는 유사한 카드 기반 레이아웃을 위해 lockup 패턴을 적용할 수 있습니다. 영화, TV 쇼, 제품과 같은 브라우징 가능한 미디어 콘텐츠를 표시할 때 lockups 을 사용하세요.
언급된 모든 Apple 플랫폼을 지원해야 하나요?
아닙니다 - 앱이 타겟팅하는 플랫폼만 지원하세요. 그러나 나중에 다른 플랫폼으로 확장할 경우 컴포넌트 동작이 상당히 다를 수 있음을 인지하세요. 예를 들어 iOS 터치 상호작용에 최적화된 컬렉션은 tvOS 포커스 탐색이나 visionOS 깊이 효과를 위해 상당한 변경이 필요합니다.
차트에 구현해야 하는 최소 접근성은 무엇인가요?
모든 차트에는 목적과 구조를 설명하는 접근성 레이블이 필요합니다. 상호작용 마크나 의미 있는 마크 그룹에 대해 개별 레이블을 제공하세요. VoiceOver 사용자에게 데이터 추세의 청각적 표현을 제공하기 위해 Audio Graphs 를 지원하세요. VoiceOver 가 레이블을 통해 값을 보고하므로 표시된 축 레이블은 보조 기술에서 숨기세요. 완전한 요구사항은 charts.md 를 참조하세요.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-content

مرجع

main

بنية الملفات

📁 references/

📄 activity-views.md

📄 charts.md

📄 collections.md

📄 color-wells.md

📄 image-views.md

📄 image-wells.md

📄 lockups.md

📄 web-views.md

📄 SKILL.md