mistica-react について
Telefonicaの`@telefonica/mistica`コンポーネントライブラリでReactの画面を構築・変更するためのスキルです。Misticaを使ったコードを生成する前に、ライブラリの正式なドキュメントを確認するよう案内します。
主な機能
- 01`@telefonica/mistica`のReactコンポーネント案内
- 02Telefonicaブランドのページとレイアウトに対応
- 03フォーム、カード、リスト、ナビゲーションのパターン
- 04ライブラリの正式ドキュメント参照の指示
活用シーン
- 01TelefonicaブランドアプリのReactページ作成
- 02Misticaコンポーネントを使う画面の変更
- 03Misticaによるフォーム、カード、ナビゲーションの構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/mistica-reactを入力して読み込まれたか確認します。
詳細
Mistica React - Telefonica デザインシステム
Telefonica のデザインシステム向け React コンポーネントライブラリ、@telefonica/mistica を使用してウェブインターフェースを構築します。
適用する場合
以下の場合にこのスキルを使用します。
@telefonica/misticaを使用する React コンポーネントを作成または変更する場合- Telefonica ブランドのアプリケーション向けにページ、レイアウト、UI を構築する場合
- ユーザーが Mistica を使用したウェブサイトまたはウェブアプリの構築を依頼した場合
- Mistica のコンポーネント、デザイントークン、スキンを扱う場合
- フォーム、カード、リスト、ナビゲーション、フィードバック画面、その他の UI パターンを生成する場合
セットアップ
コードを書く前に、プロジェクトに @telefonica/mistica がインストールされていることを確認してください。インストールされていない場合は、次のようにします。
npm install @telefonica/mistica
ドキュメント
コードを書く前に、node_modules/@telefonica/mistica/doc/llms/llms.md を読んでください。このファイルは信頼できる唯一の情報源であり、重要なルール、クイックスタートガイド、コンポーネントのカテゴリ、デザイントークンの概要、およびどのドキュメントファイルをどの順番で読むべきかを示す手順が記載されています。
代替手段：
node_modules/@telefonica/mistica/doc/llms/llms.mdが利用できない場合は、GitHub リポジトリから同等のファイルを取得してください。https://github.com/Telefonica/mistica-web/blob/master/doc/llms/llms.md
コードを生成する前に必須のドキュメントをすべて読むことを含め、llms/llms.md のすべての指示に正確に従ってください。