skills.rest
weberwang
weberwangCOMMUNITY
Explore all skills by this author →
GitHub

pencil-apple-hig-ui-design

Designs Apple HIG-compliant UI/UX in .pen files using Pencil MCP for iOS, iPadOS, macOS, visionOS.

1|Updated Apr 17, 2026
Search Tags:#apple#ui-design#hig#component-design#pen-file#pencil-mcp#design-annotation
One-click install
npx skills add https://github.com/weberwang/flutter_impeccable --skill pencil-apple-hig-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pencil-apple-hig-ui-design
Source: https://github.com/weberwang/flutter_impeccable/tree/main/.claude/skills/pencil-apple-hig-ui-design
Command: npx skills add https://github.com/weberwang/flutter_impeccable --skill pencil-apple-hig-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Apple UI/UX design inside .pen files using Pencil MCP to ensure strict adherence to Apple HIG and to produce structured UI assets including page previews, reusable components, sheets, popovers, alerts, and annotated non-page presentations.

Core Features & Use Cases

  • Page previews for main flows and navigation
  • Reusable components, sheets, popovers, alerts, and transient UIs
  • Annotations clarifying triggers, state, and HIG rationale
  • Cross-platform adaptation guidance for iOS, iPadOS, macOS, and visionOS

Quick Start

Start a new .pen design with Pencil MCP to outline an Apple HIG–compliant UI, focusing on page previews, components, and transient UI.

Frequently Asked Questions about pencil-apple-hig-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design Apple HIG compliant UI components in .pen files?▼

Design Apple HIG compliant UI in .pen files by using Pencil MCP to create structured boards for page previews, reusable components, and annotated presentations. This ensures adherence to iOS, iPadOS, macOS, and visionOS guidelines.

What is the best way to structure page previews and sheets for iOS UI design?▼

Structuring page previews and sheets for iOS requires creating distinct boards in Pencil MCP. You separate page previews, reusable components, and transient UIs like popovers and alerts, adding explicit annotations for state and HIG rationale.

Can I use Pencil MCP to generate cross-platform UI designs for macOS and visionOS?▼

Yes, Pencil MCP supports cross-platform adaptation guidance for macOS and visionOS. It creates structured UI assets inside .pen files, applying Apple HIG standards to page previews and transient interfaces across all specified platforms.

Do I need Pencil MCP tooling to create annotated Apple UI design presentations?▼

Yes, Pencil MCP is required to produce annotated non-page presentations inside .pen files. It generates distinct boards with explicit annotations clarifying triggers, state, and HIG rationale for your Apple UI components.

How does Pencil MCP handle transient UI like alerts and popovers in Apple UI design?▼

Pencil MCP handles transient UI like alerts and popovers by placing them on distinct presentation boards within .pen files. This separation ensures clear annotations for triggers and states while maintaining strict Apple HIG compliance.

What are the limitations of using .pen files for Apple HIG component design?▼

Designing Apple HIG components in .pen files requires Pencil MCP tooling to create distinct boards for previews, components, and presentations. Without this tooling, you cannot generate the structured UI assets or explicit annotations needed for compliance.

Related Skills

Explore More Design & Creative Skills→
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
sampaio-techsampaio-tech
19

create-widget

Create Flutter widgets following iOS Design System and Apple HIG conventions.

Official
Intermediate
iilleagliilleagl

pen-design-generator

Generate Pencil .pen design drafts from UI requirements using DevUI components.

Community
Advanced
windyskywindysky

moai-design-tools

Generate React/Tailwind components from Figma and Pencil designs.

Community
Advanced