| name | govtech-de-design |
| description | Use this skill to generate well-branded interfaces and assets for GovTech DE — a speculative-design prototype for a citizen-first interaction layer over the German public-administration stack (DeutschlandID + EUDI Wallet + Deutschland-Stack). Contains design guidelines, OKLCH colour tokens, typography (Source Sans 3 + 5-px-line-height-rhythm GOV.UK scale), Lucide-icon usage rules, the three-tier shadow + motion system, and a web UI kit (Posteingang, Stammdaten, Umzug surfaces) for prototyping. |
| user-invocable | true |
GovTech DE Design Skill
Read the README.md file within this skill first; it documents the brand context (speculative prototype, all data mocked), the three primary personas (Anna Petrov, Familie Schmidt, Mehmet Yıldız), the content fundamentals (Sie-Form, gov.uk register, no emoji), the visual foundations (Hue-80° warm-neutral surfaces, Trust-Blau accent, three-tier shadows, two motion curves with no bounce), the 14 Hard-Lines, and the file index.
Then explore the other files:
colors_and_type.css — Drop into any HTML artefact; --ds-* tokens + .ds-* semantic classes + automatic dark mode + reduced-motion + high-contrast support.assets/ — Brand mark (logo-mark.svg) and wordmark (logo-wordmark.svg). Iconography is lucide-react (ISC) — load via CDN from https://unpkg.com/lucide@latest/dist/umd/lucide.min.js for static artefacts.fonts/README.md — Source Sans 3 (SIL-OFL) via Google Fonts CDN; substitution notes.preview/ — One HTML card per token cluster (colours, type, spacing, motion, components). Use as visual reference.ui_kits/web/ — Click-through web prototype with sidebar + topbar + the three shipped surfaces (Posteingang, Stammdaten, Umzug). Copy the component you need into your artefact.
When generating artefacts
- Slides, mocks, throwaway prototypes: Copy
colors_and_type.css (or its :root block) into the artefact. Use .ds-* classes for headings + body. Reference Lucide via CDN. Never emit emoji. Use Sie-Form German for any UI copy unless the user has asked for another language.
- Production code: The upstream Next.js app is at https://github.com/klarbau/govtech-de. Read its
CLAUDE.md for tech-stack constraints (Next.js 15 + Tailwind v4 + shadcn/ui + lucide-react + next-intl + framer-motion sparingly). Apply the same --ds-* tokens — they map 1:1 to src/app/globals.css in the live app.
Default behaviour on plain invocation
If the user invokes this skill without further guidance, ask them:
- What are you building? (a slide / a mock / a prototype / production code)
- Which surface? (Posteingang / Stammdaten / a Vorgangs-wizard / Dashboard / something new)
- Which persona's data? (Anna / Schmidt / Mehmet — or generic)
- In which language? (Deutsch is default; EN / RU / UK / AR / TR also supported via next-intl)
- Light, dark, or both? (Both is default —
prefers-color-scheme is honoured automatically.)
Then act as an expert designer working in the GovTech DE register and output HTML artefacts (or production code, depending on the answer).
Non-negotiable rules
- Never use emoji.
- Never frame Source Sans 3 as a "BundesSans alternative". It's chosen on tech merits only (SIL-OFL, 9 weights, German diacritics including ẞ, slashed zero).
- Never colour-code Behörden categories (Bund / Land / Kommune are text-only).
- Never invent norm citations — every
§ reference must resolve to a real regulation (gesetze-im-internet.de).
- Always include a prototype disclaimer /
[MOCK] watermark on any surface that displays personal data.
- Always use tabular numerals (
font-variant-numeric: tabular-nums or .ds-tabular) for Aktenzeichen, FE-Nr, IBAN, Renten-Nr, Fristen.
