scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Use Tegel brand-themed color tokens when working in a project that has adopted Tegel colors. Apply when the user asks to style components, theme the app, switch between Scania/Traton brands or light/dark mode, or pick a color. Two brands (scania, traton) and two modes (light, dark) toggled via root classes. Always…
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Install, integrate, and avoid the gotchas of @scania/tegel-lite. Use when adopting tegel-lite in a new project, debugging "why does this look broken?" symptoms, or porting Tegel-Lite conventions. Covers the -tag CSS loading pattern (bundlers like Lightning CSS / Turbopack reject the package's CSS), the copy-tegel.mjs…
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Reference for Tegel design system motion tokens — durations, easings, keyframes, and pre-composed transition/animation CSS variables. Use when adding, tweaking, or reviewing animations and transitions in any Tegel-based UI so the result stays on-brand instead of hardcoding ms/cubic-bezier values.
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Use when the user says the Tegel UI an agent generated is wrong, off-brand, or drifted from the design system — especially after the user manually corrected the code. Captures the lesson as an edit to the responsible Tegel skill and opens a PR upstream against scania-digital-design-system/tegel-ui-skills. Invoke…
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Reference for Tegel design system spacing tokens — the layout scale (macro, between sections), the element scale (micro, inside components), the intent-named --space- aliases, and the --unit- primitives. Use when adding, tweaking, or reviewing padding, margin, or gap in any Tegel-based UI so token names stay on-brand…
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Use a Tegel Lite design system component. Invoke when the user asks to build UI with Tegel, references a Tegel component (Button, Card, Header, Table, etc.), or asks what classes/props a component accepts. Tegel Lite is a CSS-first design system (no JS runtime) — components are BEM-named classes…
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Workarounds for laying out Tegel Lite form components (TextField, Dropdown, Message) when their default CSS fights you. Use when aligning inputs in a row (toolbar/filter cluster), mixing TextField + Dropdown, repositioning prefix/suffix icons, or vertically centering message contents. The Tegel Lite beta is built…
scania-digital-design-system/tegel-ui-skills
Skill Claude CodeCodex
Set the aesthetic direction BEFORE building Tegel UI. Use at the start of any new screen, page, or section — or any restyle, relayout, or "make it look more X / modern / editorial" change to an existing one. First decide the register — Expressive (storytelling, landing, communicative surfaces) or Functional…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: