MCP HubMCP Hub
SKILL·081E0C

hig-components-system

raintree-technology
업데이트됨 2 months ago
6 조회
84
9
84
GitHub에서 보기
디자인aidesign

정보

이 스킬은 위젯, 알림, 라이브 액티비티와 같은 시스템 수준 구성 요소를 설계하기 위한 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-system

Claude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요

문서

Apple HIG: System Experiences

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

Key Principles

  1. Glanceable, immediate value. System experiences bring your app's most important content to surfaces the user sees without launching your app. Design for seconds of attention.

  2. Respect platform context. A Lock Screen widget has different constraints than a Home Screen widget. A complication is far smaller than a top shelf item.

  3. Widgets: show relevant information, not everything. Display the most useful subset, updated appropriately.

  4. Support multiple widget sizes with distinct layouts. Each size should be a thoughtful design, not a scaled version of another.

  5. Deep-link on tap. Take users to the relevant content, not the app's root screen.

  6. Live Activities: track events with a clear start and end. Deliveries, scores, timers, rides. Design for both Dynamic Island and Lock Screen.

  7. Stay updated and timely. Stale data undermines trust. End promptly when the event concludes.

  8. Respect user attention with notifications. Only send notifications for information users genuinely care about. No promotional or low-value notifications.

  9. Notifications: actionable and self-contained. Include enough context to understand and act without opening the app. Support notification actions. Use threading and grouping.

  10. Complications: focused data on the watch face. Design for the smallest useful representation. Support multiple families. Budget updates wisely.

  11. Home Screen quick actions: 3-4 most common tasks. Short titles, optional subtitles, relevant SF Symbol icons.

  12. Top Shelf: tvOS showcase. Feature content that entices: new episodes, featured items, recent content.

  13. App Clips: instant, focused functionality within a strict size budget. Load quickly without App Store download. Only what's needed for the immediate task, then offer full app install.

  14. App Shortcuts: surface key actions to Siri and Spotlight. Define shortcuts for frequent tasks. Use natural, conversational trigger phrases.

Reference Index

ReferenceTopicKey content
widgets.mdWidgetsGlanceable info, sizes, deep linking, timeline
live-activities.mdLive ActivitiesReal-time tracking, Dynamic Island, Lock Screen
notifications.mdNotificationsAttention, actions, grouping, content
complications.mdComplicationsWatch face data, families, budgeted updates
home-screen-quick-actions.mdQuick actionsHaptic Touch, common tasks, SF Symbols
top-shelf.mdTop shelfFeatured content, showcase
app-clips.mdApp ClipsInstant use, lightweight, focused task, NFC/QR
watch-faces.mdWatch facesCustom complications, face sharing
app-shortcuts.mdApp ShortcutsSiri, Spotlight, voice triggers

Output Format

  1. System experience recommendation -- which surface best fits the use case.
  2. Content strategy -- what to display, priority, what to omit.
  3. Update frequency -- refresh rate including system budget constraints.
  4. Size/family variants -- which to support and how layout adapts.
  5. Deep link behavior -- where tapping takes the user.

Questions to Ask

  1. What information needs to surface outside the app?
  2. Which platform?
  3. How frequently does the data update?
  4. What is the primary glanceable need?

Related Skills

  • hig-components-status -- Progress indicators in widgets or Live Activities
  • hig-inputs -- Interaction patterns for system experiences (Digital Crown for complications)
  • hig-technologies -- Siri for App Shortcuts, HealthKit for complications, NFC for App Clips

Built by Raintree Technology · More developer tools

GitHub 저장소

raintree-technology/claude-starter
경로: templates/.claude/skills/hig-components-system
0
agent-configai-agentsanthropicclaudeclaude-codecli
FAQ

자주 묻는 질문

hig-components-system Skill이란 무엇인가요?

hig-components-system은(는) raintree-technology이(가) 만든 Claude Skill입니다. Skill은 Claude가 필요할 때 불러오는 지침과 리소스를 묶어 추가 프롬프트 없이 hig-components-system 관련 작업을 수행할 수 있게 합니다.

hig-components-system은(는) 어떻게 설치하나요?

이 페이지의 설치 명령을 사용하세요. hig-components-system을(를) Claude Code 플러그인으로 추가하거나 저장소를 skills 디렉터리에 복제한 다음 Claude를 다시 시작해 Skill을 불러옵니다.

hig-components-system은(는) 어떤 카테고리에 속하나요?

hig-components-system은(는) 디자인 카테고리에 속합니다.

hig-components-system은(는) 무료로 사용할 수 있나요?

네. hig-components-system은(는) AIMCP에 등록되어 있으며 무료로 설치할 수 있습니다.

연관 스킬

executing-plans
디자인

executing-plans 스킬은 검토 체크포인트가 포함된 통제된 배치로 실행할 완전한 구현 계획이 있을 때 사용합니다. 이 스킬은 계획을 불러와 비판적으로 검토한 후, 소규모 배치(기본값 3개 작업)로 작업을 실행하면서 각 배치 사이에 진행 상황을 아키텍트 검토를 위해 보고합니다. 이를 통해 내재된 품질 관리 체크포인트를 갖춘 체계적인 구현이 보장됩니다.

스킬 보기
requesting-code-review
디자인

이 스킬은 코드 변경 사항을 요구 사항에 따라 분석하기 위해 코드 리뷰어 하위 에이전트를 호출합니다. 작업 완료 후, 주요 기능 구현 후, 또는 메인 브랜치에 병합하기 전에 사용해야 합니다. 이 리뷰는 현재 구현체와 원래 계획을 비교하여 문제를 조기에 발견하는 데 도움이 됩니다.

스킬 보기
connect-mcp-server
디자인

이 스킬은 개발자들이 HTTP, stdio 또는 SSE 전송 방식을 통해 MCP 서버를 Claude Code에 연결하는 포괄적인 가이드를 제공합니다. GitHub, Notion 및 사용자 정의 API와 같은 외부 서비스를 통합하기 위한 설치, 구성, 인증 및 보안을 다룹니다. MCP 통합 설정, 외부 도구 구성 또는 Claude의 모델 컨텍스트 프로토콜 작업 시 활용하세요.

스킬 보기
web-cli-teleport
디자인

이 스킬은 작업 분석을 기반으로 개발자가 Claude Code 웹 인터페이스와 CLI 인터페이스 중 선택할 수 있도록 돕고, 두 환경 간 원활한 세션 텔레포트를 가능하게 합니다. 웹, CLI 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.

스킬 보기