plannotator/effective-html

解決する課題

AIエージェントが高品質な自己完結型HTML成果物を作成するための専門的なスキルセットを提供します。これにより、エージェントはテキストベースの説明を超え、構造や意図をより明確に伝えるワイヤーフレーム、プロトタイプ、図解などの視覚的支援ツールを生成できるようになります。

仕組み

本プロジェクトは、創造的な方向性と技術的な信頼性を分離する6つの異なるスキルからなるコレクションを提供します。広範な html スキルが一般的なリクエストとルーティングを処理し、専門的なスキルが特定の忠実度レベルを管理します：低忠実度レイアウト用の html-wireframe、インタラクティブな動作用の html-prototype、システムアーキテクチャ用の html-diagram、実装ロードマップ用の html-plan。また、個別の design-artifact スキルは、特定の視覚スタイルを強制せずにデザインプロセスを提供します。

対象者

AIコーディングエージェント（Claude CodeやCodexなど）のデベロッパーやユーザー向けに設計されており、エージェントがコードやテキストだけでなく、視覚的なドキュメントやインタラクティブなプロトタイプを生成することを希望する方々を対象としています。

ハイライト

• 専門的な成果物: 低忠実度のワイヤーフレームから、完全なインタラクティブなプロトタイプやシステム図解まで、あらゆるものを生成します。
• 自己完結型: 生成されるすべての成果物はレスポンシブで、アクセシビリティに配慮されており、ブラウザ互換性が検証されています。
• プラグイン対応: Claude CodeやCodexなどのエージェント用にプラグインとして簡単にインストールできます。
• モジュール型設計: スキルは独立しており、個別に使用することも、完全なコレクションとして使用することもできます。