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

invoice

標準請求書: 送信元/送信先 + 明細 + 税 + 合計 + 支払案内

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE 文件为 Apache License Version 2.0;package.json "license": "Apache-2.0";GitHub API spdx_id Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

A4 1枚完結の請求書の5段構造を固定化:ヘッダー(請求書番号/発行日/期日)→ From/Bill to → 明細表(line items)→ 税+合計(右揃え)→ 支払案内(payment instructions)。

next/src/lib/templates/skills/invoice/SKILL.md
- Header: 发票号 / 日期 / 截止日
構造リストがそのままフィールドリストとなり、モデルは各セクションに沿って内容を埋めるだけで、税金や支払案内といった忘れがちなブロックの漏れを防ぎます。

印刷の対応は @media print で個別に完結:印刷用スタイルで影や枠線を削除しパディングを調整。さらに 720px 未満での単一カラム崩しフォールバックも備えます。

next/src/lib/templates/skills/invoice/example.html
@media print {
サンプルでは印刷用スタイルで .sheet の box-shadow/border を除去して白背景に変更。本文が求める「カラーコントラストの維持」は「背景と余白のみを変更し、文字色はそのまま維持する」ことで実現しています。

金額は Total だけにとどまらず、Subtotal → Sales tax · NY (9%) → Net before tax という検証可能な階層構造を提示。

next/src/lib/templates/skills/invoice/example.html
<div class="total-row tax"><span>Sales tax · NY (9%)</span><span>$3,246.48</span></div>
税項目と正味金額を階層化することで照合に耐えうる請求書となります。支払条件には別途「30日サイト+月利1.5%の遅延損害金+受領済み手付金の控除」を記載。

テンプレート自体がプロンプト:loader が SKILL.md 本文を読み出し、共通の前文およびユーザーコンテンツと結合した上で、ローカルの agent CLI に渡して実行。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
ランタイムはテンプレートディレクトリ内のコードを実行しません:/api/convert は {agent, templateId, content} のみを受け取り、loadSkill(templateId) で取得した SKILL.md 本文をプロンプト本体としてローカルで認証済みの agent CLI に渡し、HTML は stdout 経由でフロントエンドにストリーミングされます。

skill ディレクトリは純粋なテキスト資産:loader がディスクから SKILL.md 本文を読み込むのみで、ディレクトリ内の実行可能コードは一切ロードされません。

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ファイルシステム内の skill は単なるテキストです:loader は各ディレクトリの SKILL.md を読み取り、frontmatter をピッカー用メタデータとして抽出し、本文を body として返します。本テンプレートディレクトリ内のモジュールがインポートまたは実行されることはありません。

共通前文はテンプレートより前に挿入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツにより決定される」ことを最優先事項として規定。

next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
テンプレート本文の前に注入される共通前文により、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツにより決定される」と規定されているため、本テンプレート内のレイアウト一覧は「再利用可能なレイアウトプール」であり、ページ数やフレーム数の上限ではありません。

共通前文はテンプレートより前に挿入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツにより決定される」ことを最優先事項として規定。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
前文ではファイルシステムツールの使用を明示的に禁止し、純粋な HTML をレスポンス本文からストリーミング出力することを要求しています。ディスクへの保存はフロントエンド側が担当するため、skill 側での書き込み動作はありません。

skill ディレクトリは純粋なテキスト資産:loader がディスクから SKILL.md 本文を読み込むのみで、ディレクトリ内の実行可能コードは一切ロードされません。

next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
ディレクトリ内の example.html はリポジトリに同梱されたゴールデンサンプルであり、プレビュー用ルートがビルドやコンパイルを行わずに直接ディスクから読み出して返します。品質基準であると同時に詳細ページの素材でもあります。

2コア機能

01印刷対応の A4 1枚(@media print + モバイル向け単一カラム崩し)
02明細一覧表(Description / 数量 / 単価 / 金額)
03From / Bill to の2カラム見開き配置
04税金と合計金額の階層表示(Subtotal / Sales tax / Net before tax)
05支払案内 + 手書き風サイン欄

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部影響は一切なし
監査ノート: 🟢 グリーン()。判定対象=skill 自身のディレクトリ:ディレクトリ内に URL は存在しません(example.html にも http(s) エンドポイントはありません)。ディレクトリ内には SKILL.md と example.html のみが含まれ、スクリプト、実行可能コード、ネットワークエンドポイント、認証情報の読み出し、ディスク書き込み命令は一切ありません。SKILL.md に従った実行結果はホストモデルによる HTML テキストの出力のみであり、外部送信やディスク保存の動作は含まれません。ホストシェルおよび生成物の利用側の挙動は評価ランクの根拠とはせず、verdict.risks にのみ記録します:shared.ts 前文は生成物に Tailwind CDN(https://cdn.tailwindcss.com)と Google Fonts の読み込みを要求しており、ランタイムはローカルでログイン済みの agent CLI を spawn し(envFor は process.env を透過的に渡す)、プレビュー用 iframe は sandbox="allow-scripts allow-same-origin" を使用しています。

5二重目の独立検証

  • [ok] 规范↔示例:五段全覆盖 — header(INV-2025-0142 / Issued 14 October 2025 / Due 13 November 2025)、Bill to、明细表(Description 表头)、Subtotal/Sales tax/Net before tax、Payment terms 全部命中。
  • [ok] 打印样式核对 — 示例 `@media print` 分支确做去阴影/去边框/改 padding(`.sheet { box-shadow: none; border: none; margin: 0; padding: 32px 36px; }`),与正文「@media print 样式」一致。
  • [ok] 「颜色对比保留」核对 — 打印分支只改背景/阴影/边距,未改文字色变量(--ink/--muted 保持),对比度不降。
  • [ok] 移动端兜底(正文未要求) — 示例另有 `@media (max-width: 720px)` 把 parties/pay/signoff/totals 塌成单列,属超出规范的加固,非违背。
  • [ok] 税务/条款为示例文案 — 示例的 NY 9% 销售税、1.5% 月服务费、30 天账期均为演示内容,正文未规定任何税务口径,须由用户输入决定——不算夸大也不构成合规保证。
  • [ok] 目录资产面普查 — glob 全量:SKILL.md、example.html;无 scripts/、无 references/、无数据文件、无包管理器清单。
  • [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0,fetch/XMLHttpRequest/WebSocket 命中 0;SKILL.md 全篇无脚本或可执行代码。
  • [ok] 外链端点普查 — 目录内(含 example.html)零 http(s) 命中,产物离线自持。

6結論

  • 印刷してすぐ使え、狭い画面向けのフォールバックも完備
  • 金額の階層構造が完全で検証可能
  • 支払案内とサイン欄により、ビジネス帳票としての完成度を担保
  • 最適な用途: フリーランス/スタジオの対外請求、SaaS サブスクリプション請求書、コンサルティング案件の精算書など。直接印刷可能で金額階層が明確な A4 1枚の請求書が必要な場合に最適。
    不向きな用途: 財務システム連携や自動税計算が必要なシナリオ(テンプレート側で税制ロジックの検証は行いません)、電子署名や監査証跡が求められる公式な証憑書類、中国の増値税発票(VAT)要件が必要な場合。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload invoice.tar.gz
    sha256: a389000ce1b07884…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.