mcpField
A
after-hours-editorial-template

after-hours-editorial-template

github.com/nexu-ioクリエイティブ・メディア104.6k2.8k 回インストール今日更新
リポジトリ

after-hours-editorial-template について

3つの物語ページを持つ、ダークなエディトリアル調のHTMLモーション作品を作成するスキルです。デザイン設定の反映、控えめなトランジション、単一ファイル出力の検証を案内します。

主な機能

  1. 013ページの物語構成
  2. 02ダークでラグジュアリーな基調
  3. 03段階的なテキスト表示と章のワイプ
  4. 04CSSとJavaScriptをインライン化
  5. 05チェックリストによる検証

活用シーン

  1. 01短いエディトリアルモーション作品の作成
  2. 02現在のデザイン設定のHTMLへの反映
  3. 03単一ファイルのブラウザー作品の用意

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill after-hours-editorial-template

インストール後、Claude Code で/after-hours-editorial-templateを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

example.html
assets/
template.html
references/
checklist.md

詳細

深夜のエディトリアルテンプレート

ダークでラグジュアリーなスタイルの、自己完結型HTMLエディトリアル・モーション作品を作成します。 シネマティックなタイポグラフィと上質なトランジション表現を用いた、短い3ページ構成にします。

リソース一覧

after-hours-editorial-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

  1. 有効なDESIGN.mdを読み込み、ダークなエディトリアルの基本スタイルを保ちながら、色、タイポグラフィのトーン、レイアウトのリズムをCSS変数に反映します。
  2. assets/template.htmlをindex.htmlにコピーします。
  3. 3つの物語ページを順番に配置し、各ページの標準表示時間は3秒を超えないようにします。
  4. 上質なモーションの動作を維持します。
    • 段階的なテキスト表示の階層
    • チャプター切り替えのワイプトランジション
    • 奥行きを生むアンビエントグレインとビネット
    • ローカルプレビュー用の控えめなカーソルライトインタラクション
  5. インラインCSSとJSを含む単一ファイルのHTMLにします。
  6. サンドボックスで問題を起こしやすいブラウザーAPI（例：localStorageやconfirm）は避けます。
  7. 出力前にreferences/checklist.mdで検証します。

出力形式

短い導入文を1文、その後に次を出力します。

<artifact identifier="after-hours-editorial" type="text/html" title="After Hours Editorial Template">
<!doctype html>
<html>...</html>
</artifact>

コメント

Markdown 対応