Name: punkt-css
Rating: 74.4 (1 reviews)
Author: oslokommune

punkt-css

Using Punkt CSS (@oslokommune/punkt-css) in projects. Covers setup, layout, typography, colors, grid, spacing, and utility classes for building websites and applications with the Oslo kommune design system. Use when building pages or layouts with Punkt CSS classes.

1.65x

Quality

61%

Does it follow best practices?

Impact

96%

1.65x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./skills/punkt-css/SKILL.md

Evaluation results

100%

37%

Municipal Service Portal Page

Page layout and typography setup

Criteria

Without context

With context

CDN stylesheet link

100%

Full stylesheet used

100%

pkt-layout page shell

100%

Header not in container

100%

Footer not in container

100%

Narrow article container

60%

100%

Explicit heading typography

40%

100%

Responsive h1 typography

100%

Body text class

30%

100%

Mobile-first breakpoint pattern

100%

89%

15%

Service Directory Card Grid

Responsive grid and spacing utilities

Criteria

Without context

With context

pkt-grid for cards

100%

pkt-cell on card items

50%

100%

Mobile full-width span

100%

Responsive 3-column span

100%

Sidebar narrower span

100%

Content wider span

100%

Recommended spacing sizes only

50%

100%

Spacing utility class format

100%

70%

Responsive spacing

Mobile-first grid pattern

100%

pkt-container used

100%

62%

Event Highlights Panel with Dark and Light Variants

Dark mode, colors, and accessibility

Criteria

Without context

With context

Semantic color classes used

100%

No deprecated color classes

100%

Dark mode via data-mode attribute

100%

No custom dark CSS overrides

100%

Skip link present

100%

pkt-sr-only on skip link

100%

pkt-sr-only navigation label

100%

pkt-link class used

100%

pkt-truncate-text used

100%

Dark mode comment explanation

100%

Repository: oslokommune/punkt-skills
Commit: ba01e6a

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Municipal Service Portal Page Service Directory Card Grid Event Highlights Panel with Dark and Light Variants

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.