Skip to main content

design-a-filtering-interface

Design filters that expose available dimensions, current constraints, result effects, and reversible changes. Use when users narrow a large collection through multiple attributes.

ソース情報

リポジトリ
protosphinx/sphinxstack
ソースの最終更新活動
2026年7月29日 13:55
検出された SKILL.md の言語
英語
スター
3
フォーク
0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー
2 ファイル

SKILL.md を表示中

SKILL.md
ソースの指示 · 読み取り専用プレビュー
name
design-a-filtering-interface
category
design
description
Design filters that expose available dimensions, current constraints, result effects, and reversible changes. Use when users narrow a large collection through multiple attributes.
# design-a-filtering-interface Keep applied constraints visible and preserve the user's place while results change. ## Procedure 1. Identify user decisions, filter dimensions, values, dependencies, and data freshness. 2. Choose single, multiple, range, hierarchy, date, or text controls to match semantics. 3. Show selected state, result count, unavailable values, and clear-all behavior. 4. Define immediate versus explicit apply, batching, loading, and cancellation. 5. Preserve shareable URL, back navigation, defaults, and session restoration where appropriate. 6. Support keyboard, focus, labels, announcements, zoom, and mobile overflow. 7. Distinguish zero results, no data, permission limits, and errors. 8. Test combinations, dependent values, stale links, large option sets, and removal. 9. Measure task completion and abandoned or contradictory combinations. ## Guardrails - Do not hide applied filters in an unlabeled icon. - Avoid counts that reveal unauthorized data. - Never reset unrelated choices without explaining the change. ## Done - A filter behavior specification covers states, combinations, and navigation - Desktop, mobile, keyboard, and zero-result paths are tested - URL and visible filter state reconcile after navigation
GitHubで見る