01
このSkillでできること
- ✓複数列のテーブルに、固定ヘッダー・列ソート・列フィルターなどの標準仕様を適用する
- ✓列の表示・追加・並べ替えや、ユーザーごとの設定保存を設計する
- ✓セル表示、日付形式、列幅、行高、固定列などのテーブル挙動を整える
- ✓ブラウザ駆動の検証スイートで、テーブルの実装状態を確認する
02
使い方
01
STEP 1
複数列のテーブル、グリッド、行リストを作成・変更する前に、この標準を参照する
02
STEP 2
列ごとのソート、フィルター、検索、列操作、空状態などを要件として設計する
03
STEP 3
アプリ固有のビジュアル言語に合わせてスタイルを適用し、標準仕様だけの無機質な見た目にしない
04
STEP 4
ブラウザ検証スイートで各ルールを確認し、FAILやMISSINGを実装完了の判定に利用する
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/Criptso/data-table-standard手動でインストールする
README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。
npm install # once, in this directory
node scripts/verify-table.mjs <url> [config.json]git clone https://github.com/Criptso/data-table-standard.git ~/.claude/skills/data-table
cd ~/.claude/skills/data-table && npm install04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
複数列の商品一覧を設計してください。data-tableの標準に従い、固定ヘッダー、列タイトルによる昇順・降順ソート、列ごとの値フィルターと検索、表示・追加・並べ替え可能な列、フィルター適用時の空状態を含めてください。既存のアプリのビジュアル言語にも合わせてください。出力例を見る
テーブル仕様: 固定ヘッダー、アクティブ列とソート方向の表示、列ごとの検索・値フィルター、列の表示・追加・並べ替え、フィルター結果が0件の場合の「該当する行がありません」表示。実装後はブラウザ検証スイートでルール適合を確認する。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- shell: a list with more than one column. ## Verify a table ```bash node scripts/verify-table.mjs http://localhost:3000/your-page node scripts/verify-table.m
- network: Verify a table ```bash node scripts/verify-table.mjs http://localhost:3000/your-page node scripts/verify-table.mjs --help # selector o
06