Klarhimmel UI

Blog prompt

Articles: cards, a list, a featured front or the article page itself.

Prompt

Prompt

Use the klarhimmel-design skill. Build the blog section for {site}: {posts}. Install: npx shadcn add @klarhimmel/blog-cards @klarhimmel/blog-list @klarhimmel/blog-featured @klarhimmel/blog-post (remove what you do not use) Pick: - blog-cards: up to 6 cards with image and excerpt - blog-list: rows with date and excerpt - blog-featured: newest large, a few titles beside it - blog-post: the article page: cover, meta and reading column Props: posts with category, title, excerpt, meta (the date, as text you format), href and media; blog-post takes body as one text (≤4000) and a cover as { src, alt }; more as { label, href }. Copy: Titles say what the reader learns. Excerpts are one sentence. Dates are text you format yourself. Accessibility: blog-post holds the page's h1; the lists start at h2. Cover images need alt text. Link text names the post. 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: one h1 on an article page; every card links somewhere real; excerpts within the limit.

Variables

VariableWhat to fill inExample
{site}The siteExempelhotellet
{posts}The posts to showthree recent posts on running a small hotel

A good result

One h1 on an article page. Every card links somewhere real. Excerpts within the limit.

checklist.md
- [ ] one h1 on an article page
- [ ] every card links somewhere real
- [ ] excerpts within the limit