Klarhimmel UI

Gallery prompt

Pictures with captions: grid, masonry, featured or a scroll strip.

Prompt

Prompt

Use the klarhimmel-design skill. Show {subject} as a gallery. Install: npx shadcn add @klarhimmel/gallery-grid @klarhimmel/gallery-masonry @klarhimmel/gallery-featured @klarhimmel/gallery-strip (remove what you do not use) Pick: - gallery-grid: up to 12 same-crop images - gallery-masonry: mixed shapes in balanced columns - gallery-featured: one lead image and two or three more - gallery-strip: one row that scrolls sideways Props: items with media { src, alt } and a caption; columns 2 or 3 on masonry; stripLabel names the scroll region. Copy: Captions say what is in the picture and where. Images must be yours or licensed; sample images are placeholders. Accessibility: Every image has alt text. The strip is keyboard focusable and scrolls with arrow keys; its label names it. 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: every image has alt; captions are specific; strip scrolls by keyboard.

Variables

VariableWhat to fill inExample
{subject}What the pictures showrooms, the restaurant and the garden

A good result

Every image has alt. Captions are specific. Strip scrolls by keyboard.

checklist.md
- [ ] every image has alt
- [ ] captions are specific
- [ ] strip scrolls by keyboard