Name: punkt-react-dev
Rating: 78 (1 reviews)
Author: oslokommune

punkt-react-dev

Developing React components in the Punkt design system (@oslokommune/punkt-react). Covers creating, modifying, and testing components in /packages/react/src/components/. Use when working on Punkt React source code.

1.13x

Quality

66%

Does it follow best practices?

Impact

98%

1.13x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

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

Evaluation results

100%

Implementing a Badge Component for the Punkt Design System

New component implementation following Punkt conventions

Criteria

Without context

With context

'use client' directive

100%

Component name prefix

100%

Interface name prefix

100%

Extends HTML attributes

100%

ref as regular prop

100%

className passthrough

100%

Props spread on root

100%

Array class composition

100%

BEM class naming

100%

No inline styles

100%

Named React imports only

100%

Destructuring defaults

100%

Test uses Vitest + Testing Library + jest-axe

100%

Barrel exports updated

100%

20%

Writing Tests for the PktAlert Component

Writing component tests with Punkt testing stack

Criteria

Without context

With context

Vitest test runner

100%

@testing-library/react imports

100%

@testing-library/user-event import

100%

jest-axe accessibility test

100%

BEM class tests

100%

className passthrough test

100%

Ref forwarding test

100%

User interaction test

100%

Default prop test

100%

Co-located test file

100%

No console.log in test

100%

No import React

100%

94%

Building a Tabs Compound Component for the Punkt Design System

Compound component with React Context and dev page

Criteria

Without context

With context

React Context for state sharing

100%

Context consumer in children

100%

Props override context

100%

25%

Pkt component naming

100%

IPkt interface naming

100%

'use client' directive

100%

No forwardRef for simple refs

100%

No inline styles

100%

Named React imports only

100%

BEM CSS classes

100%

Dev page structure

37%

100%

Dev page default export

100%

Export registration documented

100%

Repository: oslokommune/punkt-skills
Commit: ba01e6a

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

Table of Contents

Implementing a Badge Component for the Punkt Design System Writing Tests for the PktAlert Component Building a Tabs Compound Component for the Punkt Design System

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.