tjdgus4560/cardnews-maker-skill

Card-News Maker (카드뉴스 메이커)

トピック、ソース記事（URL）、または下書きファイルを、磨き上げられた800×800のカードニュース画像セットに変換します。ユーザーは毎回新しいテーマを持ち込みます。あなたはそのコンテンツを読み取り/抽出し、カードに構造化し、レンダリングし、セルフレビュー＆修正ループを実行してから納品します。

ルックアンドフィールは固定されています（そのため、各セットはシリーズのように感じられます）が、カラーテーマは毎回テーマに適応します。レイアウト、タイポグラフィ、スペーシング、レビューループは一定です。

質問するタイミングと判断するタイミング

ユーザーは、推測するよりも本当に曖昧なことについて質問されることを明示的に望んでいます。回答が出力を意味のある形で変更し、推測できない場合にのみ、AskUserQuestion（最初に推奨オプションを提示）を使用してください。それ以外の場合は、判断し、その選択を簡単に述べてください。

自分で判断する（質問しない）：

• カード数 — コンテンツに合わせ、通常8～15枚（表紙 + 本文 + 閉じ）。
• カラーテーマ — テーマ/ブランドに合ったものを選ぶ（参考資料参照）。
• カードごとのレイアウト（標準本文カード vs 統計カード vs 図/チェックリスト）。
• 韓国語のコピーライティング、強調スパン、キャッチャーラベル。

ユーザーに質問する（不明な場合）：

• ソースの曖昧さ：1行のトピックのみでソースがなく、範囲が広い場合 → ウェブ検索するか、どのような視点/深さを望むかを尋ねる。
• 強い単一のタイトルが浮かばない場合の表紙タイトル（デフォルト：1つ提案 + より良い代替案を提供、選択してもらう）。
• テーマが複数の方向性に進む可能性がある場合（例：経営者向けブリーフ vs 初心者向け解説）で、コピーが実質的に変更される場合のオーディエンス/トーン。
• ユーザーが「판단 애매（判断が曖昧）」とフラグを立てたもの — 質問として提起する。

繰り返しの好みが決まったら、将来の実行がスムーズになるようにそれをメモしておいても構いませんが、常識的なデフォルトで答えられる質問で全体の作業をブロックしないでください。

ワークフロー

1. コンテンツを取得する

• URL → それを取得し（WebFetch）、テーゼ、キーポイント、専門用語、注目すべき数字/引用、および主なポイントを抽出します。
• テキスト / 下書きファイル → それを読みます。章ごとの下書きが提供されている場合は、それを主要な骨格として扱います。軽く洗練させることはできますが、ユーザーの構造は維持してください。
• 1行のトピックのみ → 範囲が広くソースがない場合は、コンテンツを創作する前に、ウェブ検索するか、どのような視点を望むかを尋ねてください。

ソースに忠実に従ってください。過度な解釈は避けてください。「何を学ぶべきか / 시사점」の視点を追加する場合は、個人的な処方箋ではなく、ソースから引き出された教訓としてフレーム化してください。「Xをしろ / 하라」という命令形は、観察（「Xが重要である」、「Xのときに強くなる」）に言い換えてください。

2. デッキを計画する

カード数とカードごとの役割を決定します。典型的な流れ： 表紙 → フック/イントロ → コンテキスト → コアコンセプト（1カード1アイデア） → 転送を助ける統計または図カード → 閉じのメッセージ（+ ソースリンク）

1カード1アイデアを使用してください。カードの本文がオーバーフローする場合は分割してください。

テーマに合ったカラーテーマを選び、references/design-system.mdを読んで正確なトークン、カードレイアウト、コンポーネントパターンを確認してください。references/card-patterns.mdを読んで、既成のカードバリエーション（表紙、本文、統計、図、チェックリスト、閉じ）を確認してください。

3. HTMLを構築する

scripts/build.jsを出発点として使用してください。このスクリプトにはすでにレイアウトシステム（ベースCSS、キャッチャーチップ、見出し、区切り線、ハイライトスパン付き本文、フッター、リバーウェーブ装飾）が組み込まれており、カードごとに1つのHTMLファイルをcards/に出力します。それをワーキングディレクトリにコピーし、このテーマに合わせてカード定義とテーマカラーを編集してください。レイアウトエンジンをゼロから書き直さないでください。

4. PNGにレンダリングする

scripts/render.js（Playwright + Chromium、deviceScaleFactor 2 → 鮮明な800×800 PNGをout/に出力）を実行します。Playwrightがインストールされていない場合の初期セットアップ： npm install playwright && npx playwright install chromium

5. セルフレビューと修正ループ（常にこれを行う）

これは必須であり、オプションではありません。これにより、出力が完成されたものになります。

• レンダリングされたPNGを読み戻し（Readツール）、すべてのカードを検査します。
• 以下を確認：本文テキストがフッターと重なっていないか、空きスペースのバランスが悪くないか、テキストのオーバーフロー/不自然な改行、コントラスト/可読性、キャッチャーとフッターの一貫性、正しいページ番号と総数。
• build.jsの問題を修正し、再レンダリングし、影響を受けたカードを再確認します。
• セット全体がクリーンになった場合のみ納品してください。完全なリストと一般的な修正については、references/review-checklist.mdを参照してください。

6. 納品する

保存先 — コンテキストに応じて出力場所を選択し、結果がユーザーの探しやすい場所に配置されるようにします：

1. プロジェクト/リポジトリ内で作業している場合（セッションにプロジェクトルートがある場合 — 例：gitリポジトリ、またはユーザーが特定のワーキングディレクトリで明らかに操作している場合）：すべてをそのプロジェクトルートの下、<project-root>/cardnews/<topic>/に保存します。中間生成物もそこに保存します（ワーキングbuild.js、cards/*.html、out/*.png）。これにより、デッキがプロジェクトとともに再現可能でバージョン管理可能になります。プロジェクトコンテキストが存在する場合のデフォルトです。
2. プロジェクトコンテキストがない場合（ワンオフのアドホックなリクエストで、作業リポジトリがない場合）：OSに適したグローバルな場所に保存します — <home>/cardnews/<topic>/（Windows、macOS、Linuxで同様に機能します。Downloadsをハードコードしないでください）。
3. ユーザーが場所を指定した場合、上記よりもそれを優先します。

ファイルを保存した場所を明記してください。デフォルト出力はPNGのみです（ルール1に従い、プロジェクト内に保存する場合は中間HTMLも含む）。A4 PDFはリクエストがあった場合のみ（またはプロアクティブに提供）scripts/make_pdf.pyを使用して構築します。このスクリプトは、各カードを左右マージンゼロ（カードがページ幅を埋める）でA4ページに配置し、上部と下部のマージンは等しくします。動作についてはヘッダーコメントを読んでください。

ユーザーがコピーを微調整してnode build.js && node render.jsを再実行できるように、ワーキングファイル（build.jsなど）をプロジェクトフォルダに保持してください。

デフォルト（このスキルのハウススタイル）

• サイズ：800×800の正方形、2倍レンダリングスケール。
• カードごとの構造：キャッチャーチップ（番号 + ラベル） → 見出し → 区切り線 → 選択的なハイライトスパンを含む本文 → 統一フッター（ソース · NN / 合計）。
• 表紙と閉じ：テーマカラーのフルブリードグラデーション、ウェーブモチーフ。閉じカードにはソースリンクが含まれます。
• 出力：デフォルトでPNG。リクエストに応じてA4 PDF。
• 言語：韓国語のコピー（技術用語/識別子は元の形式を維持）。

リソース

• references/design-system.md — カラーテーマ、CSSトークン、コンポーネントの構造。
• references/card-patterns.md — 例付きのコピー＆ペースト可能なカードバリエーション。
• references/review-checklist.md — 確認すべき事項と各問題の修正方法。
• scripts/build.js — HTMLカードビルダー（レイアウトエンジン + カード定義）。
• scripts/render.js — Playwright HTML→PNGレンダラー。
• scripts/make_pdf.py — A4 PDFアセンブラー（サイドマージンゼロ、上下マージンあり）。