.md
Skill.mdサーチャーJP
Skill.md一覧に戻る
N
v1.0.0

AppleデザインガイドラインでUIを一括設計

by nahisaho

27
498
2026-01-01

説明

できること

  • iOS・macOS・watchOSなどAppleプラットフォーム向けのUIを、Apple Human Interface Guidelines(HIG)に自動準拠させて設計できます
  • マージン・スペーシング・グリッド・タイポグラフィ・カラーなど、プラットフォーム別の厳密な仕様に基づいて設計できます
  • Dynamic Type対応やダークモード対応など、ユーザーアクセシビリティに配慮した設計が実装できます
  • Navigation Bar・Tab Bar・Buttons・Lists・Cardsなど、標準コンポーネントの正確な仕様(寸法・色・配置)がすぐに参照できます
  • SF Symbols を活用したアイコン設計を、統一的なガイドラインで実行できます

こんな人におすすめ

  • iOS・iPadOS・macOS向けアプリのUIデザインを行うUI/UXデザイナー
  • Appleプラットフォーム開発初心者で、デザインシステムの標準的な仕様を学びたい開発者
  • 複数Appleプラットフォーム(iPhone・iPad・Mac・Watch・TV)で一貫性あるUIを構築したいプロダクトチーム
  • ユーザーのアクセシビリティニーズに配慮したアプリ設計を実装したいプロダクトマネージャー
SKILL.md の内容
# 役割

あなたは、プロジェクトのコードベースを分析し、プロジェクトメモリ(steeringコンテキスト)を生成・維持する専門家です。アーキテクチャパターン、技術スタック、ビジネスコンテキストを文書化し、すべてのエージェントが参照できる「プロジェクトの記憶」を作成します。

## 専門領域

### コードベース分析

- **アーキテクチャパターン検出**: ディレクトリ構造、命名規則、コード組織の分析
- **技術スタック抽出**: 使用言語、フレームワーク、ライブラリ、ツールの特定

Skill.md 情報

バージョン
v1.0.0
カテゴリ
design-dev
作成日
2025-11-16

インストール

ワンコマンドで導入
1

下の「Skill.mdをダウンロード」ボタンを押す

2

お使いのAIツール(Claude Code・Cursor・Copilot など)にファイルをアップロードして「このスキルを追加して」と入力する

ターミナルから追加する場合
$ mkdir -p ~/.claude/skills/ && curl -sL "https://github.com/nahisaho/MUSUBI" -o ~/.claude/skills/SKILL.md

キュレーターレビュー

ユニークなアプローチが光るスキル。日本語環境での開発に最適。

関連 Skill.md

注目
K

SmartHR UI で規格に沿ったPRを素早く作成

by kufu

Conventional Commits形式に自動対応したPRタイトルを生成できるため、リリースノートに反映されやすいPRが作成できます PR本文テンプレートに沿った構造化された説明を自動生成することで、レビューに必要な情報を漏れなく記載できます 破壊的変更(!マーク)や関連URL、プロダクト側対応事項などを体系的に整理できるため、チーム全体の確認漏れを防げます gh CLIのHEREDOC形式に対応したコマンドを提供するため、手作業でのフォーマット確認が不要になります SmartHR UIリポジトリに定期的にコードを貢献する開発者 PR作成時にテンプレート形式を毎回確認するのが手間と感じている人 プロダクト側の対応が必要な変更を忘れずに記載したい人 Conventional Commitsのルールを正確に守りたい人 SmartHR UIリポジトリのPR作成ルールを定義します。PRタイトルはConventional Commits形式((): )で日本語記述し、破壊的変更は!で示します。PR本文は「関連URL」「概要」「変更内容」「プロダクト側で対応が必要な事項」「確認方法」の5セクションで構成し、該当なしの場合は「なし」と記載します。変更内容にはBefore/Afterコード例やキャプチャを添付し、破壊的変更の場合は具体的な対応方法を記載します。確認方法ではStorybookやChromatic URLを記載します。実行時はgh pr createコマンドのHEREDOC形式で本文を渡します。

テストドキュメントPR
95111.5k2026-04-13
T

Another Quick Switcherのリリース運用を自動化

by tadashi-aikawa

リリース前の検証(CI状態確認)から、Release workflowの実行、完了待機、新規releaseの検出まで一連のリリース運用を再現可能な手順で実行。 リリースノートから関連Issue・PRを自動抽出し、Issue返信文とSNS投稿案(Bluesky)を自動生成。手作業での返信文作成が不要。 --dry-runオプションで事前検証。本実行前に動作確認してからリリースを進められるので安全。 Codex LLMと同梱スクリプトの役割分離。確定的な検証・実行はスクリプト、非確定的な文章生成はLLMが担当する堅牢な設計。 obsidian-another-quick-switcherのメンテナー。毎回のリリース作業を効率化・標準化したい。 オープンソースプロジェクトの管理者。リリースフローの属人性を減らし、再現可能な手順を確立したい。 チーム開発で複数人がリリース対応する環境。誰でも同じ品質でリリース運用できる仕組みが欲しい。 GitHub Actionsと連携したリリース自動化を実装している人。リリースノート生成やIssue通知まで含めた完全自動化を目指す。 実行前提:bun、gh、gh auth statusが利用可能。Codex CLI実行時はghコマンドを最初からエスカレート実行(sandbox・host間の認証コンテキスト差異対応)。基本フロー:リポジトリルートでbun .agents/skills/another-quick-switcher-release/scripts/release.ts実行→スクリプト出力のJSON(RELEASE_RESULT_JSON)を読み取り→assets/templatesのテンプレート使用して標準出力(Bluesky投稿案・Issue返信テンプレート)。Script Options:--branch (対象ブランチ指定、既定master)、--dry-run(dispatch/git pull非実行)、--skip-issue-notify(Issue候補表示スキップ)。Output Contract:スクリプトはJSON出力でrelease・issueCandidatesフィールドを含む。Issue返信はPR除外(isPullRequest=false対象)、author重複除去、tagName・URL置換。Bluesky投稿は利用者視点の日本語要約・URL直記載で標準出力。失敗時は references/release-workflow.md のtroubleshooting参照。

コミット
3814.8k2026-03-29
K

Flutterアプリを洗練されたモダンデザインで実装

by K9i-0

Material Design 3をベースに、タイポグラフィ(フォント)・カラー・立体感を戦略的に組み合わせた上質なUIを実現できます。 Google Fontsなどのモダンフォント(Poppins、Inter、Plus Jakarta Sansなど)を活用し、見出しと本文で異なるウェイトを使い分けることで、ビジュアル階層を明確にできます。 ダークテーマ・ライトテーマで統一感のあるカラーパレットを定義し、プライマリ・セカンダリ・ターシャリカラーを配置することで、ユーザーに印象的な体験を提供できます。 シャドウやグラスモーフィズム(ぼかし効果)を活用した奥行き表現で、フラットで単調な見た目から脱却できます。 UIを実装する際のチェックリストがあるため、デザイン品質を属人的にせず、チーム全体で統一した基準を保つことができます。 Flutter開発者で、デフォルトのデザインから抜け出し、プロフェッショナルな見た目にしたい人 アプリのUIを「ユーザーの目に留まる」印象的なものにしたい起業家やプロダクトマネージャー チーム開発でUIの美しさ・一貫性を保ちたいテックリード Material Designの基本は知っているが、洗練されたビジュアルの作り方を学びたいデザイナー FlutterアプリのUIを「ありきたりなデフォルト」から脱却させ、プロフェッショナルで印象的なデザインを実現するためのガイドラインです。タイポグラフィ面では、google_fontsパッケージでPoppins・Inter・Plus Jakarta Sansなどモダンフォントを使用し、FontWeightを極端に組み合わせ(w300とw800)、サイズ階層(headlineLarge:32sp/w800、bodyLarge:16sp/w400など)を設定します。カラー・テーマは、ダークテーマで深いダークグレー背景に鮮やかなインディゴ・シアン・ピンクを、ライトテーマでクリーン白背景にビビッドなインディゴ・スカイブルー・ピンクを配置し、Dominant Color(主色)を大胆に、Sharp Accents(アクセント色)を控えめに使用します。Elevation&Depthは、フラットすぎるデザインを避け、カードに微妙な立体感を持たせ、ソフトシャドウ(blur:10、opacity:0.04)やグラスモーフィズム効果(BackdropFilter)で奥行きを表現します。

設計
113242026-01-27