mcpField
D
digits-fintech-swiss-template

digits-fintech-swiss-template

github.com/nexu-ioデザイン・UI104.6k2.8k 回インストール今日更新
リポジトリ

digits-fintech-swiss-template について

スイスグリッドスタイルのデータストーリーテリング向け、3スライドの HTML テンプレートスキルです。エージェントが内容を調整する際の構成、ナビゲーション、控えめな動き、単一ファイルでの出力要件を示します。

主な機能

  1. 013スライドのデータストーリーテンプレート
  2. 02Prev / Next とドットナビゲーション
  3. 03矢印キーによる操作
  4. 04控えめなスライド・ホバー動作
  5. 05インライン CSS と JavaScript

活用シーン

  1. 013スライドのデータプレゼンテーション作成
  2. 02スイスグリッドレイアウトでの指標表示

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill digits-fintech-swiss-template

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

同梱ファイル

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

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

詳細

Digits Fintech Swiss テンプレート

スイスグリッドの言語でデータストーリーテリングを実現する、プレミアムな3枚構成のライブアーティファクトテンプレートです。

リソースマップ

digits-fintech-swiss-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

  1. assets/template.htmlを元にし、3枚のスライド構成をそのまま維持します。
  2. カードの階層と読み進める順序を保ちながら、コピーと指標の値を置き換えます。
  3. インタラクションを維持します。
    • 前へ／次へボタン
    • キーボード操作（ArrowLeft／ArrowRight）
    • ドットナビゲーション
  4. アニメーションは控えめにします（スライドのフェードと、ホバー時のわずかな浮き上がりのみ）。
  5. ファイルは自己完結型（インラインのCSS／JS）にし、サンドボックスで問題を起こすAPIは使用しません。

出力仕様

簡潔な案内文を1文出力し、その後にHTMLアーティファクトを1つ出力します。

<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>

コメント

Markdown 対応