·static-web-artifacts-builder
{}

static-web-artifacts-builder

インフォグラフィックス、インタラクティブなダイアグラム、アーキテクチャビジュアル、データダッシュボード、豊富なビジュアル成果物など、精巧で自己完結型の静的 HTML 成果物を作成するためのツールスイート。このスキルは、インタラクティブな HTML アーティファクトの作成、自己完結型の Web コンポーネントの構築、静的な HTML ビジュアライゼーションの生成、インタラクティブな図の作成、ビジュアル インフォグラフィックの作成、または単一の HTML ファイルとしての高密度ビジュアルのレンダリングを求められた場合に使用します。ゼロ ビルド ツールチェーン — React、Vite、Parcel はありません。純粋な HTML5 + CSS3 (グリッド/フレックスボックス) + インライン SVG。トリガー: 「インタラクティブな HTML の作成」、「自己完結型の Web コンポーネントの構築」、「静的な HTML 視覚化の生成」、「インタラクティブなダイアグラムの作成」、「インフォグラフィックの作成」、「HTML アーティファクトとしてレンダリング」、「ビジュアル ダッシュボードの構築」、「ブラウザーで開くことができるダイアグラムの作成」。

15インストール·0トレンド·@mathews-tom

インストール

$npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder

static-web-artifacts-builder のインストール方法

コマンドラインで static-web-artifacts-builder AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: mathews-tom/praxis-skills。

To build high-density static infographic artifacts, follow these steps:

Stack: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

インフォグラフィックス、インタラクティブなダイアグラム、アーキテクチャビジュアル、データダッシュボード、豊富なビジュアル成果物など、精巧で自己完結型の静的 HTML 成果物を作成するためのツールスイート。このスキルは、インタラクティブな HTML アーティファクトの作成、自己完結型の Web コンポーネントの構築、静的な HTML ビジュアライゼーションの生成、インタラクティブな図の作成、ビジュアル インフォグラフィックの作成、または単一の HTML ファイルとしての高密度ビジュアルのレンダリングを求められた場合に使用します。ゼロ ビルド ツールチェーン — React、Vite、Parcel はありません。純粋な HTML5 + CSS3 (グリッド/フレックスボックス) + インライン SVG。トリガー: 「インタラクティブな HTML の作成」、「自己完結型の Web コンポーネントの構築」、「静的な HTML 視覚化の生成」、「インタラクティブなダイアグラムの作成」、「インフォグラフィックの作成」、「HTML アーティファクトとしてレンダリング」、「ビジュアル ダッシュボードの構築」、「ブラウザーで開くことができるダイアグラムの作成」。 ソース: mathews-tom/praxis-skills。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder
カテゴリ
{}データ分析
認証済み
初回登録
2026-02-25
更新日
2026-03-10

Browse more skills from mathews-tom/praxis-skills

クイックアンサー

static-web-artifacts-builder とは?

インフォグラフィックス、インタラクティブなダイアグラム、アーキテクチャビジュアル、データダッシュボード、豊富なビジュアル成果物など、精巧で自己完結型の静的 HTML 成果物を作成するためのツールスイート。このスキルは、インタラクティブな HTML アーティファクトの作成、自己完結型の Web コンポーネントの構築、静的な HTML ビジュアライゼーションの生成、インタラクティブな図の作成、ビジュアル インフォグラフィックの作成、または単一の HTML ファイルとしての高密度ビジュアルのレンダリングを求められた場合に使用します。ゼロ ビルド ツールチェーン — React、Vite、Parcel はありません。純粋な HTML5 + CSS3 (グリッド/フレックスボックス) + インライン SVG。トリガー: 「インタラクティブな HTML の作成」、「自己完結型の Web コンポーネントの構築」、「静的な HTML 視覚化の生成」、「インタラクティブなダイアグラムの作成」、「インフォグラフィックの作成」、「HTML アーティファクトとしてレンダリング」、「ビジュアル ダッシュボードの構築」、「ブラウザーで開くことができるダイアグラムの作成」。 ソース: mathews-tom/praxis-skills。

static-web-artifacts-builder のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/mathews-tom/praxis-skills