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

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.

2.72x

Quality

70%

Does it follow best practices?

Impact

98%

2.72x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

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

Evaluation results

95%

70%

Add Tag/Badge Component Styles

New component SCSS partial with BEM, theming, states

Criteria

Without context

With context

Namespaced @use imports

100%

Breakpoints imported as *

pkt- prefixed BEM classes

87%

100%

Private spacing variables

100%

CSS custom properties for colors

100%

Skin modifier pattern

100%

Custom element display rule

16%

100%

Double box-shadow focus ring

40%

100%

BEM focus/hover modifier classes

100%

All three disabled selectors

25%

100%

Dark mode override

14%

100%

Partial underscore prefix

100%

_index.scss registration

14%

100%

No deprecated color map

100%

43%

Add Responsive Typography and Layout to a Stats Card Component

Responsive typography and spacing in a component

Criteria

Without context

With context

typography.get-text() mixin

20%

100%

Valid pkt-txt style names

100%

Spacing from token scale

100%

Container query for component layout

88%

100%

bp() mixin for viewport overrides

13%

100%

Mobile-first ordering

58%

100%

No raw @media queries

100%

CSS custom properties for colors

100%

72%

Create a Dev Test Page for the Alert Component

Astro dev page with BEM states and layout conventions

Criteria

Without context

With context

Layout import only in frontmatter

100%

page-main + pkt-container wrapper

100%

.component section wrapper

100%

.component__example demo wrapper

100%

BEM state modifier classes for states

100%

Disabled shown with HTML attribute

100%

pkt-alert BEM class usage

100%

Layout component wraps page

100%

Multiple variant sections

100%

Repository: oslokommune/punkt-skills
Commit: ba01e6a

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

Table of Contents

Add Tag/Badge Component Styles Add Responsive Typography and Layout to a Stats Card Component Create a Dev Test Page for the Alert Component

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.