Klarhimmel UI

Features prompt

What it does, as a grid, a list, tabs, bento tiles or alternating rows.

Prompt

Prompt

Use the klarhimmel-design skill. Build a features section for {product}: {features}. Install: npx shadcn add @klarhimmel/features-grid @klarhimmel/features-list @klarhimmel/features-split @klarhimmel/features-tabs @klarhimmel/features-bento @klarhimmel/features-terminal @klarhimmel/activity-log (remove what you do not use) Pick: - features-grid: up to 9 features with icons; the default - features-list: up to 6, heading and link beside the list - features-split: rows of copy beside an image, with points - features-tabs: 2 to 5 tabs, each with an image - features-bento: mixed tiles, up to 7 - features-terminal: a command and a prompt box - activity-log: a timed log of work done Props: items with icon (from the fixed icon set), title, description; columns 2, 3 or 4 on the grid; stay under the list limit. Copy: Each title is a benefit in 2 to 5 words, each description one sentence. Do not repeat the hero. Accessibility: The section heading is h2 and each item title h3. Tabs are keyboard operable. Images need alt text. 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: titles are benefits, not nouns; icons come from the set; list within the limit; one heading level per item.

Variables

VariableWhat to fill inExample
{product}What you sell, in a few wordsRoom booking for small hotels
{features}Three to six things it doesonline booking, a guest list, invoices

A good result

Titles are benefits, not nouns. Icons come from the set. List within the limit.

checklist.md
- [ ] titles are benefits, not nouns
- [ ] icons come from the set
- [ ] list within the limit
- [ ] one heading level per item