teach-impeccable
プロジェクトのデザインに関する情報をAIに記憶させ、デザインの方向性を一貫させるための初期設定を行い、継続的なデザインガイドラインを確立するSkill。
📜 元の英語説明(参考)
One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
🇯🇵 日本人クリエイター向け解説
プロジェクトのデザインに関する情報をAIに記憶させ、デザインの方向性を一貫させるための初期設定を行い、継続的なデザインガイドラインを確立するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o teach-impeccable.zip https://jpskill.com/download/19794.zip && unzip -o teach-impeccable.zip && rm teach-impeccable.zip$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19794.zip -OutFile "$d\teach-impeccable.zip"; Expand-Archive "$d\teach-impeccable.zip" -DestinationPath $d -Force; ri "$d\teach-impeccable.zip"完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
teach-impeccable.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
teach-impeccableフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
[スキル名] teach-impeccable
このプロジェクトのデザインコンテキストを収集し、今後のすべてのセッションのために永続化します。
ステップ1：コードベースを探索する
質問する前に、プロジェクトを徹底的にスキャンして、何がわかるかを発見してください。
- READMEとドキュメント: プロジェクトの目的、対象読者、明記されている目標
- Package.json / 設定ファイル: 技術スタック、依存関係、既存のデザインライブラリ
- 既存のコンポーネント: 現在のデザインパターン、スペーシング、使用中のタイポグラフィ
- ブランドアセット: ロゴ、ファビコン、すでに定義されている色値
- デザインシステム / CSS変数: 既存のカラーパレット、フォントスタック、スペーシングスケール
- スタイルガイドまたはブランドドキュメント
学んだことと不明な点をメモしてください。
ステップ2：UXに焦点を当てた質問をする
{{ask_instruction}} コードベースから推測できなかったことのみに焦点を当ててください。
ユーザーと目的
- 誰がこれを使用しますか？使用時の彼らのコンテキストは何ですか？
- 彼らはどのような仕事を達成しようとしていますか？
- インターフェースはどのような感情を呼び起こすべきですか？（自信、喜び、落ち着き、緊急性など）
ブランドと個性
- ブランドの個性を3つの単語で説明するとどうなりますか？
- 適切な雰囲気を示す参照サイトやアプリはありますか？具体的にそれらの何が適切ですか？
- これは明示的にどのようなものに見えるべきではありませんか？アンチリファレンスはありますか？
美的嗜好
- 視覚的な方向性について強い好みはありますか？（ミニマル、大胆、エレガント、遊び心のある、技術的、オーガニックなど）
- ライトモード、ダークモード、またはその両方ですか？
- 使用する必要がある、または避けるべき色はありますか？
アクセシビリティとインクルージョン
- 特定のアクセシビリティ要件はありますか？（WCAGレベル、既知のユーザーニーズ）
- 動きの軽減、色覚異常、その他の配慮事項はありますか？
コードベースの探索からすでに答えが明確な質問はスキップしてください。
ステップ3：デザインコンテキストを作成する
調査結果とユーザーの回答を統合して、## Design Context セクションを作成します。
## Design Context
### Users
[彼らが誰であるか、彼らのコンテキスト、達成すべき仕事]
### Brand Personality
[声、トーン、3つの単語の個性、感情的な目標]
### Aesthetic Direction
[視覚的なトーン、参照、アンチリファレンス、テーマ]
### Design Principles
[会話から導き出された、すべてのデザイン決定を導くべき3〜5つの原則]このセクションをプロジェクトルートの .impeccable.md に書き込んでください。ファイルがすでに存在する場合は、Design Context セクションをその場で更新してください。
次に、{{ask_instruction}} Design Context を {{config_file}} にも追加するかどうかを尋ねてください。はいの場合、そこにもセクションを追加または更新してください。
完了を確認し、今後のすべての作業を導く主要なデザイン原則を要約してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Gather design context for this project, then persist it for all future sessions.
Step 1: Explore the Codebase
Before asking questions, thoroughly scan the project to discover what you can:
- README and docs: Project purpose, target audience, any stated goals
- Package.json / config files: Tech stack, dependencies, existing design libraries
- Existing components: Current design patterns, spacing, typography in use
- Brand assets: Logos, favicons, color values already defined
- Design tokens / CSS variables: Existing color palettes, font stacks, spacing scales
- Any style guides or brand documentation
Note what you've learned and what remains unclear.
Step 2: Ask UX-Focused Questions
{{ask_instruction}} Focus only on what you couldn't infer from the codebase:
Users & Purpose
- Who uses this? What's their context when using it?
- What job are they trying to get done?
- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
Brand & Personality
- How would you describe the brand personality in 3 words?
- Any reference sites or apps that capture the right feel? What specifically about them?
- What should this explicitly NOT look like? Any anti-references?
Aesthetic Preferences
- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
- Light mode, dark mode, or both?
- Any colors that must be used or avoided?
Accessibility & Inclusion
- Specific accessibility requirements? (WCAG level, known user needs)
- Considerations for reduced motion, color blindness, or other accommodations?
Skip questions where the answer is already clear from the codebase exploration.
Step 3: Write Design Context
Synthesize your findings and the user's answers into a ## Design Context section:
## Design Context
### Users
[Who they are, their context, the job to be done]
### Brand Personality
[Voice, tone, 3-word personality, emotional goals]
### Aesthetic Direction
[Visual tone, references, anti-references, theme]
### Design Principles
[3-5 principles derived from the conversation that should guide all design decisions]Write this section to .impeccable.md in the project root. If the file already exists, update the Design Context section in place.
Then {{ask_instruction}} whether they'd also like the Design Context appended to {{config_file}}. If yes, append or update the section there as well.
Confirm completion and summarize the key design principles that will now guide all future work.