kortix-design-system
Installation
SKILL.md
Kortix Design System
Track this file: .claude/skills/kortix-design-system/SKILL.md
If you are touching a visual surface in apps/web, follow this. This skill was rewritten in June 2026 to match the polished customize-panel reference implementations — older guidance is stale and superseded. (July 2026: Card codified as the system panel; elevation ladder added — shadow-* now renders the Kortix four-sided soft shadows, not Tailwind's stock bottom-only ones.)
Companion skill — always load both
Always invoke make-interfaces-feel-better alongside this skill. They are complementary, not optional alternatives:
| Skill | Owns |
|---|---|
| kortix-design-system (this file) | Brand, tokens, components, layout shells, color/radius/spacing law, reference implementations |
| make-interfaces-feel-better | Polish: concentric radius, optical alignment, shadows, enter/exit motion, scale-on-press, tabular nums, hit areas, font smoothing |
Load both before writing or reviewing UI. When Kortix rules and polish rules overlap (e.g. border radius, motion), Kortix tokens win — then apply the polish skill within those constraints.