Klarhimmel UI

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

VariableWhat to fill inExample
{product}The appExempelhotellet
{things}What can be foundrooms, treatments and events
{facets}One to three ways to narrowtype, price

Blocks it uses

A good result

The result count is announced. Every chip has a named remove button. No results offers suggestions.

checklist.md
- [ ] the result count is announced
- [ ] every chip has a named remove button
- [ ] no results offers suggestions
- [ ] facet counts follow the other filters