Klarhimmel UI
Klarhimmel ↗

Design system skill

Beta

Teaches your agent to build with Klarhimmel UI: which block or component to use, which token to reach for, and the rules every page follows.

Install

CLI

npx shadcn add @klarhimmel/skill-design
Adds
.claude/skills/klarhimmel-design/SKILL.md. Plain Markdown, so other agents can read it too.

What it knows

  • Tokens

    Colour, type, space and motion, by name, in light and dark.

  • Components

    When to use each one, what it pairs with, what not to build twice.

  • Rules

    One primary action per view, 44 px targets, the writing rules.

SKILL.md

The file your agent loads, readable before you install. Copy for AI copies all of it.

SKILL.md
---
name: klarhimmel-design
description: Build pages and UI with Klarhimmel UI blocks, components and tokens. Use when adding or changing a page, a section or a component in a project that has components/klarhimmel/, or when asked to use the Klarhimmel design system.
---

# Klarhimmel design

Klarhimmel UI is source in this project, under `components/klarhimmel/`. Build with it; do not build a second version of something it already has.

## Share structure before adding components

Find the application's existing shell, content template and content collections
before choosing a catalogue template. A site has one shared navigation, footer,
theme and container system. Change their owner once; page files must not repeat
their markup, configuration or style objects. Navigation and footer links should
read the same product/service records. Active navigation is a page value, not a
different header.

Use four page purposes:

- **Content:** insights, guides, projects/cases, services and other
  reading pages use one content template. Supply a record with title, category,
  metadata, optional introduction/author/cover, body and optional structured content, related
  items or a closing action. Different subjects do not require new templates.
- **Product:** product decisions use one shared product landing template: split
  hero/actions, optional feature grid, explanations, FAQ, related products and
  closing action. Keep product records separate from the reading template,
  without per-product page components.
- **Index:** browse/search/filter a collection inside the same shell, using
  reusable cards or rows. Keep collection-specific behaviour explicit.
- **Task:** complete an action or read its result inside the same shell, such as
  a form, tool, confirmation or error. Keep the interaction focused.

…

Try it

A prompt to start with.

Prompt

Use the klarhimmel-design skill. Build a pricing page for {product} with three plans. Lead with the plan most people pick, then answer the questions people ask before they buy.