coreline-ai/skills-html-showcase

skills-html-showcase は何をしますか？

入力データを17モードにルーティングし、専門家レベルの韓国語HTMLを生成する単一統合スキル adaptive-html-final のショーケース — 8テーマ、ビジュアルプロファイル（ウィジェット・図式・自動）、JS不使用、159の自己防御ゲート

このスキルは、単一の統合スキル adaptive-html-final を通じて、ユーザーからの入力を17の異なる専門モード（例：記事、ダッシュボード、フォーム、テーブル、ナビゲーション、チャート、プロフィール、ポートフォリオ、ブログ、ランディングページ、エラーページ、認証ページ、設定画面、レポート、ウィザード、ギャラリー、FAQ）に自動ルーティングし、各モードに最適化された専門家レベルの韓国語HTMLを生成します。

主な特徴

• 17モード対応: 入力内容に応じて最適なモードを自動選択
• 8テーマ: ダーク、ライト、ミニマル、ネオン、レトロ、プロフェッショナル、ナチュラル、ハイテク
• 3ビジュアルプロファイル: ウィジェット（コンパクト）、図式（ダイアグラム重視）、自動（コンテキスト依存）
• JavaScript不要: すべての動的動作はCSSとHTML属性で実現
• 自己防御ゲート: 159の検証ルールにより、不正入力や改ざんを防止

使用方法

# 例: 記事モードでHTML生成を要求
input: 記事「AIエージェントの未来」をダークテーマで作成してください

サポートされるプラットフォーム

• Claude Code
• Cursor
• Codex および類似のAIコーディングエージェント

技術詳細

出力されるHTMLは以下の特性を持ちます：

• 完全なスタンドアロン（外部依存なし）
• CSS変数によるテーマカスタマイズ対応
• アクセシビリティ準拠（ARIAラベル、適切な見出し構造）
• レスポンシブデザイン（モバイルファースト）
• SEO最適化（メタタグ、構造化データ）

使用例

<!-- 生成されるHTMLの簡略例 -->
<div class="article dark-theme" role="main">
  <header>
    <h1>AIエージェントの未来</h1>
    <p class="meta">公開日: 2024-01-15 | 著者: AIスキル</p>
  </header>
  <section>
    <p>本記事では、AIエージェントがもたらす革新的な変化について解説します...</p>
  </section>
</div>

トラブルシューティング

• 期待したモードでない場合: より具体的な指示を入力してください（例：「ダッシュボード形式で」）
• テーマが反映されない場合: テーマ名を明示的に指定してください
• 出力が不完全な場合: スキルの自己防御ゲートが有効になっているか確認してください

詳細なドキュメントについては、coreline-ai/skills-html-showcase をご参照ください。