ドキュメント&知識ベース · nexu-io/html-anything

resume-modern

現代的でミニマルなレジュメ、A4 1ページ、印刷およびPDFエクスポートに最適

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License 2.0;GitHub API spdx_id=Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本テンプレートは「フォルダ=テンプレート」構造における純粋なデータです。SKILL.md はセレクター用の YAML frontmatter と、エージェント向けレイアウト指示となる本文で構成されています。リポジトリはテンプレート個別のコードを持たず、テンプレートの追加はフォルダの追加のみで完結します。

next/src/lib/templates/loader.ts
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
loader.ts のファイル先頭コメントにディレクトリ規約が明記されています。frontmatter はプロセス内正規表現でパースされ(YAML依存関係なし)、本文はプロンプト本文としてそのまま抽出されフロントエンドには送信されません(「Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.」)。

実行時、ホストが本テンプレートの本文を共通デザイン指示とユーザーコンテンツの間に挟み込み、単一のプロンプトを構築します。テンプレートの「知能」はすべてこの自然言語に含まれており、実行可能コードは一切存在しません。

next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
assemblePrompt の戻り値は「共通デザイン指示 + テンプレート本文 + 【入力フォーマット】 + 【ユーザーコンテンツ】」です。共通部分(同ファイル内の SHARED_DESIGN_DIRECTIVES)が単一ファイル HTML、Tailwind/フォント CDN、コンテンツ駆動の分量制御、ファイルシステムツールの使用禁止などの必須要件を担っており、全テンプレート共通で本テンプレート独自のものではありません。

ホストの /api/convert が本テンプレートをロード後、そのテキストをローカルで認証済みの coding-agent CLI に渡し、stdout のみを HTML としてストリーミング回収します。テンプレート自体は通信を行わず、認証情報を読み取らず、ファイル書き込みもしません。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ルートはその後 invokeAgent({ … }) を呼び出して CLI(ホストの PATH から検出された claude / codex / cursor-agent など)を起動します。付随する共通指示にも「**Write / Edit / MultiEdit / Bash / Create / いかなるファイルシステムツールの使用も禁止**」と明記されています。

テンプレートに付属する example.html は「事前レンダリング済みサンプル」であり、プレビューAPIからそのまま返されてセレクターやギャラリーの iframe に表示されます。テンプレートカードのプレビュー表示を担うのみで、コンテンツ生成には関与しません。

next/src/app/api/templates/[id]/preview/route.ts
Returns the skill's `example.html` verbatim so it can be loaded into an
プレビューは skill id ごとにキャッシュされます(Cache-Control: public, max-age=300)。フロントエンドはプレビューパネル内の iframe に sandbox="allow-scripts allow-same-origin" を付与しています(ホスト側の実装であり、本テンプレート側では制御不可)。

frontmatter の各フィールドはセレクターのメタデータにマッピングされ(featured は全体ソート、recommended は上部「★ おすすめ」枠、example_* はサンプルカードの文面を生成)、カテゴリや利用シーンのフィルタリングでの表示位置を決定します。

next/src/lib/templates/loader.ts
if (typeof fm.featured === "number") meta.featured = fm.featured;
fmToMeta は category/scenario/aspectHint/tags を SkillMeta に直接移行します。example ブロックは example_id または example.{md,html} が存在する場合に生成されます(id/name/format/tagline/desc + 任意で source)。これらのフィールドは表示とソートにのみ影響し、生成処理には影響しません。

本テンプレートの生成機能はすべて自身の本文のみによって実現されます。resume-modern/SKILL.md はレイアウト、配色、フォント、コンテンツ規律のみを記述しており、エージェントにツールの実行、API呼び出し、外部データの読み取りを促す記述は一切ありません。

next/src/lib/templates/skills/resume-modern/SKILL.md
【模板: 现代极简简历】
skill ディレクトリには合計 2〜3 ファイル(SKILL.md + example.html [+ example.md])のみが存在し、scripts/references/データファイルはありません。example.html は本テンプレートの静的な手動生成サンプルです(internal_assets を参照)。

本文は「A4 1ページ」を実行可能な制約へと落とし込んでいます。コンテナは Tailwind の任意値を用いて A4 を模倣し(w-[210mm] min-h-[297mm] mx-auto)、@media print による印刷用スタイルを義務付けています。これが「印刷 / PDF エクスポート可能」を実現する仕組みです。

next/src/lib/templates/skills/resume-modern/SKILL.md
- 容器宽度模拟 A4: `w-[210mm] min-h-[297mm] mx-auto`, 内边距 16-20mm。

情報設計は 60/40 の主・副 2カラム構成に固定されており、副カラムにはスキル、言語、受賞歴などの補助的な情報が配置されます。

next/src/lib/templates/skills/resume-modern/SKILL.md
- 主体两栏可选: 左 60% 主线(经历/项目/教育), 右 40% 副线(技能/语言/获奖)。

職歴項目の記述ルールも規定されています。「企業名 + 役職 + 右揃えの期間 + 動詞で始まる 1〜3 行の箇条書き」と定められており、レジュメの作成基準がテンプレートに組み込まれています。

next/src/lib/templates/skills/resume-modern/SKILL.md
- 经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。

配色はモノトーン(白黒グレー)+ 1 つのアクセントカラー(ネイビー/ダークグリーン)に限定され、派手な配色は明確に排除されています。採用担当者の閲覧負担を軽減すると同時に、モデルの過度な自由度を抑制します。

next/src/lib/templates/skills/resume-modern/SKILL.md
- 不使用花哨颜色, 黑白灰 + 1 个 accent (深蓝 / 墨绿)。

付属のサンプルもこの仕様通りに実装されています。.page は A4 サイズに固定され、@media print では背景とドロップシャドウが無効化されます。

next/src/lib/templates/skills/resume-modern/example.html
.page { width:210mm; min-height:297mm; margin:0 auto; background:#fff; padding:18mm 16mm; box-shadow:0 30px 60px -20px rgba(0,0,0,0.18); }

2コア機能

01A4 1ページレイアウト(210×297mm コンテナ + 16–20mm パディング)
02印刷 / PDF エクスポート専用スタイル(@media print で不要な要素を非表示化しつつカラーを保持)
032カラム情報設計(左 60% メイン / 右 40% サブ)
04構造化された経歴項目(企業名 + 役職 + 右揃え期間 + 動詞開始の箇条書き)
05セクション見出しの視覚言語(スモールキャップス + 短いアクセントライン)
06控えめなカラーシステム(白黒グレー + 単一アクセントカラー)
07サンプル入力データの付属(定量的実績の記述を含むフロントエンドエンジニアのレジュメ)

3外部依存関係

KindDependency / Endpoint
networkTailwind CDN(仅出现在产物示例 example.html,运行时不要求)
networkGoogle Fonts(仅出现在产物示例 example.html)
cli本地 coding-agent CLI(宿主提供,模板自身不调用)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言: cdn.tailwindcss.com(example.html 内の <script src>、セレクターでのプレビューまたはローカルでのファイル閲覧時にブラウザからリクエスト)
監査ノート: 審査対象=本 skill ディレクトリ(SKILL.md + example.html [+ example.md])。独自スクリプトなし、認証情報読み取りなし、ディスク書き込み指示なし、実行時の外部エンドポイント要求なし。本文はレイアウト・配色・フォントファミリ名・コンテンツ規律のみを指示しており、フォント名はネットワークリクエストを構成しません。ディレクトリ内に実在する外部リンクはすべて「成果物サンプル」としての性質であり、以下に証明として列挙します:cdn.tailwindcss.com(example.html 6行目 <script src>)、fonts.googleapis.com(example.html 7行目 <link>、Inter + Noto Sans SC)。第4バッチ基準(エンドポイントが成果物サンプル/出典表記にのみ現れる場合は green)に基づき、セキュリティ評価には影響しません。ホスト側の挙動(loader.ts によるディスク読み込み、assemblePrompt によるプロンプト組み立て、agents/invoke.ts によるローカル CLI 起動、プレビュー iframe の sandbox="allow-scripts allow-same-origin")は verdict.risks に記載されており、本評価の根拠とはなりません。

5二重目の独立検証

  • [ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html / example.md 3 个文件,无 scripts/references/数据目录;token 扫描(curl / wget / fetch / exec / spawn / process.env / API_KEY / token / secret / write / save / delete)在该目录的 SKILL.md 中零命中;无自带可执行脚本。
  • [ok] 运行时链路复核 — 重读 loader.ts / shared.ts / app/api/convert/route.ts / app/api/templates/[id]/preview/route.ts:模板正文只作为 prompt body 被 assemblePrompt 拼装,宿主 spawn 本地 CLI 并捕获 stdout;模板不参与任何执行。
  • [ok] commit 与元数据 — 工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(=任务表 pin 的 full 40 位);GitHub API nexu-io/html-anything:stars 8827、license spdx Apache-2.0、pushed_at 2026-09-15T03:36:24Z(与本地 HEAD 提交时间 2026-09-15 11:36:24 +0800 一致)。
  • [discrepancy] README 与源码的 frontmatter schema 漂移(仓库级) — README 第 213 / 217 / 468 行称模板 frontmatter 必须含 mode · scenario · surface · preview · design_system;但在 next/src/lib/templates/skills/ 下 '^mode:'、'^surface:'、'^design_system:' 全部零命中,实际字段是 category / scenario / aspect_hint / featured / recommended + example_*(loader.ts 的 SkillFrontmatter)。文档滞后于代码,不影响本模板运行,但照 README 新写模板会踩空。
  • [ok] frontmatter 元数据映射 — loader.ts fmToMeta 逐字段映射 zhName / enName / emoji / description / category / scenario / aspectHint / tags + featured / recommended + example 卡;本模板取自 SKILL.md 的实际取值与之相符。
  • [ok] example.html 与 SKILL.md 的一致性 — 正文三条硬约束都能在示例找到实现:A4 容器(.page width:210mm / min-height:297mm)、@media print 关阴影与背景、双栏 + 动词开头 bullet 的经历条目。
  • [ok] 端点扫描(目录内) — resume-modern 目录 3 个文件中仅 example.html 含 2 个外部端点(cdn.tailwindcss.com、fonts.googleapis.com);SKILL.md / example.md 零 URL、零工具调用指令。
  • [ok] 「可打印 / 导出 PDF」能力核对 — 不是营销词:example.html 真的带 @media print { body { background:#fff; padding:0; } .page { box-shadow:none; } },浏览器打印即可出 A4。

6結論

  • 「A4 1ページ印刷可能」を曖昧な形容詞ではなく、ミリメートル単位のコンテナや印刷スタイルといった実行可能な制約に落とし込んでいる点
  • 情報設計と記述規範の同時定義:60/40 の 2カラム + 各項目 1〜3 行の動詞開始箇条書き
  • 控えめな配色(白黒グレー + 1 アクセント)により、印刷適性を確保しながらモデルの意図しない出力を抑制
  • 定量的実績の書き方(MAU 5,000万以上、ビルド時間 18s→2.4s など)を例示する example.md を内包
  • 印刷対応を自ら証明するサンプル成果物:@media print ルールが実際に定義されている点
  • 最適な用途: 1ページに収まり印刷やPDFエクスポートが可能な中英レジュメを求める方に最適です。特に本文・サンプル共に「定量的成果+動詞開始」で記述されているためエンジニアなどの技術職に適しています。また、A4レイアウトの制約仕様を参考にしたいテンプレート制作者にも向いています。
    不向きな用途: 複数ページの学術向けCV(改ページ・目次・論文一覧のレイアウト非対応)、写真付きや多言語併記が必要な履歴書(指示内に該当レイアウトなし)、プレーンテキスト出力を前提とするATS自動化フロー(成果物がHTML形式のため)には適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload resume-modern.tar.gz
    sha256: 4f09497e18a7ccfc…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.