Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/sean-sunagaku/claude-code-plugin/ios-hig-prototypenpx skills add sean-sunagaku/claude-code-plugin --skill ios-hig-prototypegit clone --depth 1 https://github.com/sean-sunagaku/claude-code-pluginWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sean-sunagaku/claude-code-plugin/ios-hig-prototype)<a href="https://agentmods.dev/skills/sean-sunagaku/claude-code-plugin/ios-hig-prototype"><img src="https://agentmods.dev/badge/skills/sean-sunagaku/claude-code-plugin/ios-hig-prototype.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00328 | $0.01950 |
| Opus 5 | $0.00164 | $0.00975 |
| Sonnet 5 | $0.00066 | $0.00390 |
| Haiku 4.5 | $0.00033 | $0.00195 |
Grade A, and why
ios-hig-prototype scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 126 lines — stays where its author put it; the contents beside it link to each section on GitHub.
iOS HIG Prototype
あなたは Apple Human Interface Guidelines（HIG）を熟知したシニア iOS デザイナー兼フロントエンドエンジニアとして振る舞う。
【アプリ情報】をもとに、iOS ネイティブアプリと見分けがつかないレベルの、完全に動作するインタラクティブなプロトタイプを、単一の HTML ファイルの Artifact として作成する。
絶対条件
- 単一 HTML ファイルで完結させる（CSS・JS はすべて同一ファイル内に記述）
- 静止画のモックではなく、タップ・スワイプ・入力・画面遷移がすべて実際に動くプロトタイプにする
- 外部画像に依存しない（アイコンは SF Symbols 風のインライン SVG、写真が必要な場合はグラデーションや CSS で表現）
localStorage/sessionStorageは使用禁止。状態はすべて JavaScript 変数（メモリ内）で管理する- エラーなく動くこと。実装後、全ボタン・全遷移が機能するか必ず検証する
ワークフロー
Step 1: アプリ情報の確認
以下 7 項目が揃っているか確認する。ユーザーの指示に含まれていない項目があれば、不足分をまとめて 1 回で質問する（1 項目ずつ聞かない）。Claude Code では AskUserQuestion を使う。
| 項目 | 必須 | 補足 |
|---|---|---|
| アプリ名 | 必須 | |
| アプリの目的・概要 | 必須 | |
| ターゲットユーザー | 必須 | |
| 主な機能（3〜5 個） | 必須 | 画面構成の根拠になる |
| 雰囲気・トーン | 任意 | ミニマル / ポップ / 信頼感 / かわいい など |
| アクセントカラーの希望 | 任意 | 未指定ならトーンから提案する |
| その他の要望 | 任意 | ダークモード対応、特定画面の追加など |
既にコードベースやドキュメント（ペルソナ、トンマナ、要件定義など）が存在する場合は、質問する前にそれらを読んで埋める。
Step 2: 設計方針の提示
実装に入る前に、3〜5 行で簡潔に説明する。
- アプリのコンセプト
- 画面構成（3〜5 画面）とナビゲーション方式（タブバー / ナビゲーションスタック）
- アクセントカラー（tintColor）とその選定理由
Step 3: 実装
references/hig-components.md の仕様に従って実装する。以下は最低限守る基準。
デバイスフレーム
- 画面中央に iPhone 15 Pro 相当のフレーム（393 × 852px、角丸 55px 程度、Dynamic Island 付き）
- 上部にステータスバー（時刻「9:41」、電波・Wi-Fi・バッテリーアイコン）
- 下部にホームインジケーター（グレーの横バー）
タイポグラフィ
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", sans-serif;
letter-spacing: -0.4px;
| スタイル | サイズ | ウェイト |
|---|---|---|
| Large Title | 34px | bold |
| Title | 28px | — |
| Headline | 17px | semibold |
| Body | 17px | regular |
| Footnote | 13px | — |
| Caption | 12px | — |
カラー（iOS システムカラー）
| 用途 | 値 |
|---|---|
| systemBlue | #007AFF |
| systemGreen | #34C759 |
| systemRed | #FF3B30 |
| systemOrange | #FF9500 |
| systemGray | #8E8E93 |
| 背景（grouped） | #F2F2F7 |
| カード / セル | #FFFFFF |
| 区切り線 | rgba(60,60,67,0.29) を 0.5px 相当で |
アプリの世界観に合わせてアクセントカラーを 1 色選び、tintColor として一貫して使う。
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 126 lines · 328 tokens per session scan A 1849910df519
ios-hig-prototype is a skill published in the GitHub repository sean-sunagaku/claude-code-plugin (36 stars, last pushed 1mo ago), licensed MIT. It adds 328 tokens to every session and 1,950 once invoked, about $0.0016 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
display-glasses-with-jetpack-compose-glimmer
Provides guidelines for developing projected Android XR apps for display glasses using the Jetpack Compose Glimmer UI toolkit. This skill covers foundational Glimmer design principles, workflows for implementing Jetpack Compose Glimmer, and interaction models for the glasses form factor. Use this skill to build an…
expo-design-system
Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when…
flutter-build-responsive-layout
Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.
platform-conventions
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).
field-service-mobile-branding-configure
Derive a Field Service mobile app color scheme from a brand source (URL, hex codes, brand-guide paste, or color description), validate WCAG AA contrast in both light and dark mode, and apply the 14-field scheme to the org-default FieldServiceMobileSettings record. Trigger phrases include 'brand the mobile app', 'apply…
app-ui-design
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.