メニュー
Use when designing filters for lists, tables, search results. Covers facet patterns (checkboxes, ranges, tags), the apply-filters-as-you-go vs apply-button decision.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills-fleetsafety --skill filter-and-faceting-uiコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when designing 404 pages and the broader empty-state pattern library. Covers tone, illustration, search recovery, and the difference between 'no data yet' and 'this URL doesn't exist'.
Use when designing A/B tests. Covers hypothesis-driven testing, sample-size calculation, the test-design template, and the cultural rituals that make testing productive.
Use when shipping any user-facing UI. Covers the non-negotiable accessibility baseline: contrast, focus states, semantic HTML, keyboard navigation, screen-reader support, motion preferences. The minimum to avoid embarrassment and ADA risk.
| name | filter-and-faceting-ui |
| description | Use when designing filters for lists, tables, search results. Covers facet patterns (checkboxes, ranges, tags), the apply-filters-as-you-go vs apply-button decision. |
Filters narrow data fast. Done well, users find what they need in 2 clicks.
Checkbox (multi-select). Radio (single-select). Range slider (numbers, dates). Tag input (free-form). Toggle (boolean).
Apply-as-you-go (live filter on each click) for fast filtering. Apply-button when filter set is complex / expensive.
Show active filters above results as removable chips. 'Clear all' button.
Power users: save filter combinations as named views ('Drivers with expiring CDLs').
10 facets all expanded by default (overwhelming). No way to clear all. Apply button when single-click is faster. No saved views for repeat tasks.
Applied across the X3 Compass design system.