to-artifact について
to-artifactは、指定されたハウススタイルに沿って根拠のあるページを制作・公開するスキルです。デザイナーやコンテンツ制作者向けに、テーマ選定から論旨の構成、レンダリング、テーマと狭い画面での確認までを案内します。
主な機能
- 01テーマの選定と根拠の確認
- 02読者に沿った論旨とページ構成
- 03指定スタイルとスタイルシートの適用
- 04ライト・ダークテーマと狭幅表示の確認
- 05レンダリング、修正、公開
活用シーン
- 01根拠に基づくプロジェクトや課題のページ制作
- 02資料を概要読解と監査の経路に整理
- 03テーマや狭い画面でのページ表示確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ angusfretwell/ skills --skill to-artifactインストール後、Claude Code で/to-artifactを入力して読み込まれたか確認します。
同梱ファイルassets/style.cssreferences/design.md
詳細
成果物は、ハウススタイルに沿って公開するArtifactです。
デザインに取りかかる前に artifact-design と humanize を読み込み、チャートを書く前に dataviz を読み込んでください。references/design.md にはハウススタイルが記載されています。すなわち、文体、使用する書体と色、それらを設定するスタイルシート、そして避けるべきお決まりの手法です。ページ内のすべての文言は humanize に従います。
1. 主題を決める
主題が示されている最初の情報源から主題を特定します。呼び出しで指定された対象、このセッションで議論されている主題、現在のタスクに関連する PR または issue のいずれかです。すべての情報源が空なら、質問してください。
主題が1行で書かれ、それを裏付ける資料が手元にある状態になれば完了です。
2. 読者の目的を定める
デザインに取りかかる前に、利用可能な資料をすべて確認します。次の点を非公開で明確にしてください。
- 誰が、どのような状況でこれを開き、何を判断または理解するのでしょうか?
- 最も強く裏付けられている答えは何でしょうか?
- その答えの信頼性を高める根拠は何でしょうか?
- 解釈に影響するトレードオフ、不確実性、制約は何でしょうか?
- 最初に読む際の妨げにならない形で、監査のために残しておくべき情報は何でしょうか?
事実、単位、日付、情報源、数式、矛盾、不明点、プライバシー上の制約を整理します。観察、導出、予測、推奨、因果関係を区別してください。意図、所有権、緊急性、確実性、期限、承認、将来の行動、機密性を捏造してはいけません。
情報源の順序ではなく、読者のニーズに沿って並べます。2つの読み方に対応させてください。エグゼクティブ向けの読み方では、タイトル、見出し、決定的な数値、キャプション、結論から論旨を素早く把握できるようにし、監査向けの読み方では、正確な表、前提、方法論、注意点、情報源を残して記録を保存します。
論旨を書き出せば完了です。つまり、読者の疑問、最も強く裏付けられた答え、その答えを信頼できるものにする根拠を明確にします。各セクションは、ほかのセクションでは答えていない読者の疑問に答えるものとし、すべての主張には根拠の置き場所を1つだけ設けてください。後半の表で正確な情報を参照できるようにしてもかまいませんが、別の要約、チャート、結論で、同じ答えを同じ目立ち方で繰り返してはいけません。
3. 作成して確認する
論旨に合わせて構成を決めます。最初の画面には、マストヘッドや導入ではなく論旨を置きます。その後は、資料にふさわしい内容を構成してください。references/design.md から書体、色、文体を採用し、指定どおりに assets/style.css をページの隣に公開します。そこに挙げられているお決まりの手法は一切使わないでください。
公開したページをレンダリングし、ライトテーマとダークテーマ、狭い画面幅で確認します。
- **最初に読むとき:**最初の画面しか見ていない読者は、タイトルや雰囲気ではなく、中心となる関係性、判断、またはツールを覚えているでしょうか?
- **簡潔さ:**意味、操作性、リズムを損なわずに省ける面、境界線、ピル、アイコン、ラベル、色、段落、セクションはないでしょうか?あれば取り除いてください。
- **テーマとリフロー:**ライトテーマとダークテーマで、階層とコントラストは同等でしょうか?また、はみ出したり、文字単位で改行されたりせずに、ページが再構成されるでしょうか?
影響が最も大きい不備を修正し、もう一度レンダリングして、同じ確認を繰り返します。
スタイルシートをページの隣に置いて公開し、レンダリング結果が3つの確認項目すべてを満たし、ユーザーにページそのものを渡せる状態になれば完了です。このレビューは内部向けです。スコア、作業記録、自己批評は提出しないでください。