# Punkt CSS Dev

> Developing component and utility styles in the Punkt design system (@oslokommune/punkt-css). Covers creating, modifying, and maintaining SCSS in /packages/css/src/scss/. Use when working on Punkt CSS source code.

- Skill: `oslokommune/punkt-css-dev` (Agent Skill, multi-file: 17 files)
- Install (CLI): `npx skillmds@latest add oslokommune/punkt-css-dev`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oslokommune/punkt-css-dev/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: oslokommune (https://skillmd.com/u/oslokommune)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oslokommune/punkt-css-dev

---


# Punkt CSS Development

Skill for developing component and utility styles in the Punkt design system (`@oslokommune/punkt-css`). Covers creating, modifying, and maintaining SCSS in `/packages/css/src/scss/`.

## Sections

1. [Architecture Overview](architecture-overview.md)
2. [Directory Structure](directory-structure.md)
3. [Naming Conventions](naming-conventions.md)
4. [Abstracts (Variables, Mixins, Functions)](abstracts.md)
5. [Component / Element SCSS Patterns](component-patterns.md)
6. [Colors & Theming](colors-and-theming.md)
7. [Dark Mode](dark-mode.md)
8. [Typography](typography.md)
9. [Spacing](spacing.md)
10. [Breakpoints & Responsive](breakpoints.md)
11. [Grid & Layout](grid-and-layout.md)
12. [States & Interactivity](states.md)
13. [Accessibility](accessibility.md)
14. [Build System](build-system.md)
15. [Checklist: Adding Component Styles](checklist-new-component.md)
16. [Astro Dev / Test Pages](astro-dev-pages.md)