Open Components

Open Components

Open Components は、完璧な UI コンポーネントの標準です。人間と AI エージェントのどちらが作成する場合も、完璧なユーザーエクスペリエンス、開発者エクスペリエンス、エージェントエクスペリエンスを備えた UI コンポーネントを構築するためのガイドラインです。

Open Components は UXFront の一部で、@alexgrozav が作成・保守しています。





ホームページ · ドキュメント · 変更履歴 · llms.txt · 課題トラッカー

目次

• 標準
• 標準の読み方
• エージェント向け
• バグと機能リクエスト
• コントリビューション
• 作成者
• 著作権とライセンス

標準

この標準は、コンポーネントが対応する対象ごとに、3 つのレイヤーで構成されています。コンポーネントが 3 つすべてを満たすと、標準に準拠します。

• ユーザーエクスペリエンス（UX）：どのような入力でも、どのデバイスでも、あらゆる能力の人が期待どおりにコンポーネントを操作できます。 アクセシブル、予測可能、あらゆる状態に対応、適応性。
• 開発者エクスペリエンス（DX）：明確な API を一度学べば、どこでも使えます。1 つのコンポーネントを知れば、すべてのコンポーネントを理解できます。 一貫性、安全な型付け、合成可能、制御可能。
• エージェントエクスペリエンス（AX）：AI エージェントが読み取り、推論し、活用して構築できるコンポーネントにより、その出力があなたの成果物と同じ基準を満たします。 意味的、説明付き、決定論的、検証可能。

ガイドラインを一度学び、あなた自身が作成する場合もエージェントが作成する場合も、すべてのコンポーネントに同じ高い基準を適用してください。

標準の読み方

まずはじめにを読んで、3 つのレイヤーと、それぞれがコンポーネントに求めることを確認してください。ガイドラインは content/docs/ に Markdown 形式で保存されているため、GitHub 上でも読むことができます。

エージェント向け

エージェントが MCP に対応している場合は、無料でサインイン不要の MCP サーバー https://mcp.opencomponents.dev/mcp に接続してください。セクションごとに、標準の契約、すべてのルール、ドキュメントをツールとしてエージェントに提供します。MCP Server のページでは、Claude、Codex、Cursor、VS Code、Gemini CLI、Grok、Hermes Agent などのクライアントの接続方法を紹介しています。

または、plugins/open-components にあるエージェントプラグインをインストールしてください。標準の要求に沿ってコンポーネントを作成・レビューするスキルとともに、同じサーバーに接続します。これは Agent Plugin であるため、VS Code、GitHub Copilot、Cursor、Codex、Claude Code など、この形式に対応するクライアントで動作します。Agent Plugin のページでは、インストール方法を紹介しています。

ドキュメントの各ページは Markdown 形式でも公開されているため、エージェントは標準を読み、それに照らして作業を確認できます。

• https://opencomponents.dev/raw/<path>.md には 1 ページ分が格納されています。たとえば、入門ページは /raw/docs/getting-started/introduction.md です。
• https://opencomponents.dev/raw/<path>.yaml には、チェックリストのすべてのルールを含むページの契約が格納されています。例として、/raw/docs/components/button.yaml をご覧ください。ページの長さのわずかな部分で、すべての要件を確認できます。
• /schemas/contract.json は、すべての契約が従う JSON Schema です。契約や独自の契約を検証できます。各契約の先頭行にこのスキーマが指定されているため、YAML 言語サーバーを使用するエディターでは、入力中に検証されます。
• /llms.txt には、すべてのページと契約が記載されています。
• /llms-full.txt には、すべてが 1 つのファイルにまとめられています。エージェントにこのファイルを指定すると、1 回のリクエストで標準全体を渡せます。

バグと機能リクエスト

サイトのバグ、ガイドラインの不足、新しいガイドラインのアイデアを見つけた場合は、まず既存およびクローズ済みの Issue を検索してください。問題やアイデアがまだ取り上げられていない場合は、新しい Issue を作成してください。

コントリビューション

コントリビューションガイドをお読みください。サイトをローカルで実行する方法、ガイドラインを編集する方法、デプロイする方法を確認できます。 プロジェクトに参加する方は全員、行動規範に従うことに同意するものとします。

素晴らしい皆さんに感謝します！

作成者

Alex Grozav

• https://github.com/alexgrozav
• https://uxfront.com

日々の仕事で Open Components を使用していて、生活が楽になったと感じたら、GitHub Sponsors でのスポンサーをご検討ください。💖

著作権とライセンス

Copyright © 2026 UXFront。サイトのコードは MIT License の下で公開されています。content/ のガイドラインと plugins/open-components/ のエージェントプラグインは、Creative Commons Attribution 4.0 License の下で公開されています。Open Components のクレジットを表示すれば、商用利用を含め、共有および改変が可能です。