- Agent kit
Search screens prompt
A results page with facets, active filters and a no-results state.
Prompt
Prompt
Use the klarhimmel-design skill. Build the search results page for {product}: search {things}, with facets {facets}. Install: npx shadcn add @klarhimmel/app-search-results (remove what you do not use) Pick: - app-search-results: search box, checkbox facets with counts, filter chips, count announced, no-results with suggestions Props: facets { name, options { label, checked } }; results { title, summary, href, meta?, matches[] } where matches repeat option labels; query; state enum from your request. Counts come from the results you pass. Copy: Result titles say what the thing is. The no-results page says what to change and offers real alternatives. Facet names are nouns. Accessibility: The count is a status that is announced when it changes; removing a filter moves focus to the count; each remove button names its filter; facet groups are fieldsets with legends. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: the result count is announced; every chip has a named remove button; no results offers suggestions; facet counts follow the other filters.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | The app | Exempelhotellet |
{things} | What can be found | rooms, treatments and events |
{facets} | One to three ways to narrow | type, price |
Blocks it uses
A good result
The result count is announced. Every chip has a named remove button. No results offers suggestions.
- [ ] the result count is announced
- [ ] every chip has a named remove button
- [ ] no results offers suggestions
- [ ] facet counts follow the other filters