CtrlK
BlogDocsLog inGet started
Tessl Logo

punkt-components

Using Punkt design system components (React and Elements/Web Components). Covers component APIs, props, events, slots, and usage patterns for all Punkt UI components. Use when building UIs with Punkt components.

68

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured overview skill: executable setup in three installation modes, a genuinely non-obvious CSP section including the second-domain edge case, and disciplined deferral of per-component detail to one-level-deep reference files. The only trimmable fat is the standard-HTML explanation in the form-association section.

Suggestions

Tighten 'Fields outside the form' by cutting the explanation of how the HTML form attribute works ('the browser submits the field with that form, wherever it is on the page', 'selecting one clears the others') and keep only the Punkt-specific facts: which components support the prop and the usage examples.

DimensionReasoningScore

Conciseness

The body is largely lean — install commands, compact dual React/HTML snippets, and a dense CSP directive block with a justified 'unsafe-inline' rationale. Minor over-explanation: the 'Fields outside the form' section spends several sentences on standard HTML form-attribute semantics Claude already knows ('the browser submits the field with that form, wherever it is on the page'). Fits anchor 4 ('efficient; minor instances of over-explanation') rather than anchor 5, and is well above anchor 3's 'some unnecessary explanation'.

4 / 5

Actionability

Everything is copy-paste ready: 'npm add @oslokommune/punkt-react', full import plus JSX usage, CDN <link>/<script> tags, executable CSP header block, and concrete size/prop tables with code in both frameworks. Matches anchor 5's 'fully executable; copy-paste ready code or commands; specific examples cover the common cases'.

5 / 5

Workflow Clarity

Getting started is a clear install → import → use → configure-CSP sequence, with CSP setup explicitly flagged as a required checkpoint ('Missing CSP configuration is a common cause of broken fonts, missing icons, and invisible components') and an important warning callout. This is a usage/reference skill, not a multi-step process, and no validation loop is required — anchor 4's 'clear sequence with most checkpoints' fits better than anchor 5's feedback-loop pattern.

4 / 5

Progressive Disclosure

The body is a clear overview that defers per-component detail to 33 one-level-deep links (accordion.md … timepicker.md) plus strings.md, header.md, footer.md, header-menu.md and consent.md, each clearly signaled; cross-cutting guidance (CSP, input sizes, form association) is appropriately kept inline. Matches anchor 5's 'clear overview with well-signaled one-level-deep references; content appropriately split'.

5 / 5

Total

18

/

20

Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description that names a specific niche, enumerates concrete coverage areas, and includes an explicit 'Use when' clause in third person. Its main weakness is a single narrow trigger phrase that would not fire when users reference individual Punkt components or package names.

Suggestions

Broaden the 'when' clause to cover how users will actually invoke the skill, e.g. 'Use when building UIs with Punkt components or when the user mentions a Pkt-prefixed component or the @oslokommune/punkt-react / @oslokommune/punkt-elements packages.'

Add package-name and component-level trigger terms (e.g. 'PktButton', '@oslokommune/punkt-react') so the description matches how users naturally refer to the library.

Consider stating what the skill does not cover (CSS classes, colors, typography, spacing) to sharpen the boundary with the sibling punkt-css skill.

DimensionReasoningScore

Specificity

Names the domain and several concrete coverage areas ('component APIs, props, events, slots, and usage patterns'), matching anchor 4's 'several specific actions; minor gaps'. Not anchor 5 because it lists coverage topics rather than multiple concrete actions with comprehensive scope.

4 / 5

Completeness

Clear 'what' (component APIs, props, events, slots, usage patterns) and an explicit 'when' clause ('Use when building UIs with Punkt components'). Not anchor 5 because the trigger is a single narrow phrase — a user mentioning a specific component (e.g. 'use PktButton') would not match it — whereas anchor 5 expects concrete plural trigger phrases; clearly above anchor 3's 'when missing or only weakly implied'.

4 / 5

Trigger Term Quality

Good natural keyword coverage ('Punkt design system components', 'React', 'Elements/Web Components', 'props', 'events', 'slots', 'building UIs') but misses package names like '@oslokommune/punkt-react' and component-level phrasings users would actually say. Fits anchor 4's 'good keyword coverage; a few natural terms missing' rather than anchor 5's synonym/extension-complete coverage.

4 / 5

Distinctiveness Conflict Risk

'Punkt design system' is a clearly delineated niche with distinct, brand-specific triggers; minimal conflict risk with any other skill. Matches anchor 5 exactly.

5 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 38 missing

Warning

Total

15

/

16

Passed

Repository
oslokommune/punkt-skills
Reviewed

Table of Contents

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.