AI Integration Components

フルガイドをAIに渡すと、7onicコンポーネントとトークンで構築します。Props、サブコンポーネント構成、フォームレシピまですべて含まれています。
トークンのみの使用については、Token AI Integrationをご覧ください。

https://7onic.design/llms-full.txt

llms.txtはパッケージインストール時に自動で含まれます。AIに追加指示する際にこのURLをコピーしてお使いください。

Supported AI Tools

llms.txt (Full) — llms.txtはオープン標準です。テキストファイルを読み込めるAIツールすべてに対応しています。

Claude Code

Cursor

GitHub Copilot

ChatGPT

How to Use

AIツールとワークフローに合った方法を選んでください。

ローカル（パッケージインストール済み）

Claude Code、Cursor、Copilotなど、AIがローカルファイルを直接読み込めます。

Reference Path

Direct Prompt

プロンプトでAIにnode_modulesのllms.txtを直接読ませます。

Read node_modules/@7onic-ui/react/llms.txt and build a dashboard with 7onic

Web（ローカルアクセス不可）

ChatGPTなど、ローカルファイルを読み込めないWebベースのAIツール向け。

URL Reference

Copy & Integrate

llms-full.txtの内容をプロジェクトのAIルールファイルにコピーします。

# 7onic Components + Tokens
(paste llms-full.txt content here)

What AI Does Automatically

フルガイドにより、AIはコンポーネントとトークンを一体的に扱います。

Uses 7onic Components

カスタムボタン/モーダル/フォームを自作せず、正しいPropsで既存コンポーネントを使用します。

Complete Sub-component Sets

ModalにはModalContent、TooltipにはTooltipTriggerなど、必須サブコンポーネントをもれなく適用します。

Token Classes Only

bg-blue-500ではなくbg-primaryを使用し、すべてのスタイリングがデザイントークンに従います。

Form Patterns

AIはInputをFieldで囲み、FieldLabelにrequiredを付け、FieldErrorで正しくエラー処理を行います。

Before / After

コンポーネントガイドありとなしで構築した同じUI

llms.txt なし

<button
  className="bg-blue-500 text-white px-4 py-2
    rounded-lg hover:bg-blue-600"
>
  Save Changes
</button>

<div className="fixed inset-0 bg-black/50 z-[9999]">
  <div className="bg-white rounded-lg p-6 max-w-md">
    <h2>Confirm</h2>
    <p className="text-gray-500">Are you sure?</p>
  </div>
</div>

llms.txt あり

<Button variant="solid">
  Save Changes
</Button>

<Modal>
  <ModalTrigger asChild>
    <Button>Open</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalTitle>Confirm</ModalTitle>
    <ModalDescription>
      Are you sure?
    </ModalDescription>
  </ModalContent>
</Modal>

コンポーネントはダークモード、アクセシビリティ、z-indexレイヤリング、アニメーションを自動で処理します。手動実装は不要です。

Token Rules

コンポーネントはすべてのスタイリングにデザイントークンを使用しています。トークンの完全ガイドはAI Integration (Tokens)をご覧ください。

bg-blue-500

bg-primary

text-gray-700

text-foreground

p-[17px]

p-4

rounded-[7px]

rounded-md

Troubleshooting

よくある問題と対処法

AIが7onicを使わずカスタムコンポーネントを作る

AIに伝えてください：「llms.txtを再読み込みして。カスタムで作らず、既存の7onicコンポーネントを使って。」

AIが必須サブコンポーネントを忘れる

AIに伝えてください：「ModalにはModalContentとModalTitleが必要。llms.txtのコンポーネント構造を確認して。」

AIが間違ったPropsを渡す

AIに伝えてください：「llms.txtのPropsテーブルを確認して。文書化されたprop値のみ使用して。」

Disclaimer

AIは完璧ではありません。AIが生成したコードはデプロイ前に必ずレビューしてください。デザイン要件、アクセシビリティ、トークン設定が正しいか確認してください。