mcpField
F
faq-page

faq-page

github.com/nexu-ioデザイン・UI104.6k2.8k 回インストール今日更新
リポジトリ

faq-page について

検索とカテゴリ絞り込みに対応した、アコーディオン形式のFAQページを作るスキルです。コンテンツ、ページ構成、アクセシビリティ、レスポンシブ対応を案内します。

主な機能

  1. 01質問と回答のリアルタイム検索
  2. 02カテゴリによる項目の絞り込み
  3. 03折りたたみ式FAQセクションの作成
  4. 04キーボードとモバイルの操作性確認

活用シーン

  1. 01製品のヘルプやサポートページの作成
  2. 02請求やアカウント関連FAQの整理
  3. 03短い要件からレスポンシブFAQを作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill faq-page

インストール後、Claude Code で/faq-pageを入力して読み込まれたか確認します。

同梱ファイルexample.html

詳細

FAQ ページスキル

折りたたみ式のアコーディオンセクション、検索、カテゴリー絞り込みを備えた FAQ ページを 1 つ作成します。

ワークフロー

  1. アクティブな DESIGN.md を読みます（上に挿入されています）。インタラクティブ要素（アコーディオンのヘッダー、検索入力欄、カテゴリーのピル型ボタン）にはコンポーネントのトークンを使用します。
  2. 概要からドメインを選び（例：SaaS 製品、E コマース、サービス）、3～4 カテゴリーにまたがる実際的な FAQ を 12～18 件作成します。
    • エッジケース：
      • 概要に FAQ が 8 件未満しかない場合は、追加のコンテンツを求めるか、そのドメインに基づいて現実的な質問を作成します。
      • FAQ が 1～5 件の場合は、カテゴリーと検索を省略し、シンプルなリストを表示します。
      • 回答が非常に長い場合（100 語超）は、読みやすさを保つため段落または箇条書きに分けます。
  3. セクションは次の順に並べます：
    • ヘッダー — ページタイトル（「よくある質問」または「ヘルプセンター」）、任意のサブタイトル（ユーザーがここで確認できる内容を説明する 1 文）。
    • 検索バー — プレースホルダーテキストとアイコンを備えた、目立つ検索入力欄。質問をリアルタイムで絞り込む機能的な JavaScript を用意します。
    • カテゴリー絞り込み — カテゴリーごとに 3～4 個のピル型ボタンを表示します（例：「請求」「アカウント」「技術」「一般」）。デフォルトでは「すべて」を選択します。
    • FAQ アコーディオン — 折りたたみ式の質問と回答のペア：
      • 質問は、展開／折りたたみアイコン（シェブロンまたはプラス／マイナス）付きのクリック可能なヘッダーとして表示します。
      • 回答はデフォルトで非表示にし、クリックすると滑らかなアニメーションで展開します。
      • 各項目には絞り込み用の data-category 属性を設定します。
    • フッターの CTA — 連絡先リンクまたはサポートメールを記載した「まだ質問がありますか？」セクション。
  4. 作成するのは HTML ドキュメント 1 つです：
    • <!doctype html> から </html> までを含め、CSS と JS はインラインにします。
    • アコーディオンには、セマンティックな HTML（段階的な拡張のための <details> と <summary>、または適切な ARIA 属性を用いたカスタム JS）を使用します。
    • 質問または回答のテキストに一致する内容で検索を絞り込みます。
    • カテゴリー絞り込みでは、data-category に基づいて質問の表示／非表示を切り替えます。
    • 展開／折りたたみには滑らかなトランジションを適用します（max-height または grid-template-rows）。
    • ヘッダー、検索、カテゴリー、アコーディオンコンテナ、フッターに data-od-id を設定します。
  5. セルフチェック：
    • 質問が具体的で現実的である（汎用的なプレースホルダーではない）。
    • 回答が簡潔（2～4 文）で、必要な情報を網羅している。
    • キーボード操作が機能する（Tab キーで質問を移動し、Enter キーで展開できる）。
    • 検索で大文字と小文字を区別せず、一致するテキストで絞り込める。
    • 一度に展開されるアコーディオン項目は 1 つだけ（任意。UX の方針による）。
    • モバイルに対応している（アコーディオンのヘッダーをタップでき、検索も使いやすい）。

出力規約

<artifact> タグで囲んで出力します：

<artifact identifier="faq-page" type="text/html" title="FAQ Page">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に 1 文だけ記載し、後には何も記載しません。

カテゴリー別の質問例

請求

  • 支払い方法を更新するにはどうすればよいですか？
  • どのような支払い方法に対応していますか？
  • 返金を受けられますか？
  • サブスクリプションを解約するにはどうすればよいですか？

アカウント

  • パスワードをリセットするにはどうすればよいですか？
  • メールアドレスを変更できますか？
  • アカウントを削除するにはどうすればよいですか？
  • 解約後、データはどうなりますか？

技術

  • どのブラウザーに対応していますか？
  • モバイルアプリはありますか？
  • データをエクスポートするにはどうすればよいですか？
  • API のレート制限はどのようになっていますか？

一般

  • [Product Name] とは何ですか？
  • 利用を始めるにはどうすればよいですか？
  • カスタマーサポートはありますか？
  • 利用規約はどこで確認できますか？

コメント

Markdown 対応