oslokommune/punkt-components
skills/punkt-components/SKILL.md
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.
development
Updated May 5, 2026
$ install --global
skillsauthnpx skillsauth add oslokommune/punkt-skills punkt-componentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 5, 2026, 6:29 AM146.8s31 files scanned
SKILL.md
- name:
- punkt-components
- description:
- 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.
Punkt Components
Skill for using Punkt design system components. Covers both React (@oslokommune/punkt-react) and Elements/Web Components (@oslokommune/punkt-elements).
For CSS classes, colors, typography, spacing, grid, and layout, see the punkt-css skill.
Getting started
All usage patterns require Punkt CSS. See the punkt-css skill for setup instructions.
React (NPM)
npm add @oslokommune/punkt-react
import { PktButton } from '@oslokommune/punkt-react';
<PktButton skin="primary" variant="icon-left" iconName="user">
Click me
</PktButton>
Punkt components load icons, SVGs, and other resources from the CDN. If your project uses a Content Security Policy (CSP), you must configure it to allow resources from https://punkt-cdn.oslo.kommune.no/. See the CSP section below.
If you have unit tests, components that wrap Elements may need special setup — see individual component docs.
Elements (NPM)
npm add @oslokommune/punkt-elements
import '@oslokommune/punkt-elements/dist/pkt-button.js';
<pkt-button skin="primary">
<span>Click me</span>
</pkt-button>
For reactive slot content (content that changes programmatically), wrap it in a container element like <span> or <div>.
Elements (CDN)
No build step required. Include CSS and component scripts directly:
<link href="https://punkt-cdn.oslo.kommune.no/latest/css/pkt.min.css" rel="stylesheet" />
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-button.js" type="module"></script>
If using CSP, see the CSP section below.
Content Security Policy (CSP)
Punkt components load fonts, icons (SVG), and other resources from https://punkt-cdn.oslo.kommune.no/. If the application uses a Content Security Policy, the CSP must allow this origin. This applies to all setup methods (NPM and CDN).
Required CSP directives:
Content-Security-Policy:
default-src 'self';
font-src 'self' https://punkt-cdn.oslo.kommune.no/;
img-src 'self' https://punkt-cdn.oslo.kommune.no/;
script-src 'self' https://punkt-cdn.oslo.kommune.no/;
style-src 'self' 'unsafe-inline' https://punkt-cdn.oslo.kommune.no/;
connect-src 'self' https://punkt-cdn.oslo.kommune.no/;
Why 'unsafe-inline' in style-src? Because of the intricacies of SVG styling and certain web component features, Punkt requires 'unsafe-inline' in the style-src directive. Without it, some styles will be blocked by the browser. CSP nonces can be used as an alternative but require server-side configuration.
Important: Always instruct users to configure CSP when setting up Punkt components. Missing CSP configuration is a common cause of broken fonts, missing icons, and invisible components.
Components
- Accordion
- Alert
- Backlink
- Breadcrumbs
- Button
- Card
- Checkbox
- Combobox
- Consent
- Datepicker
- Footer
- Header
- Icon
- Input Wrapper
- Link
- LinkCard
- Loader
- Messagebox
- Modal
- Progressbar
- Radio Button
- Search Input
- Select
- Steps
- Switch
- Table
- Tabs
- Tag
- Textarea
- Text Input
Related Skills
oslokommune/punkt-react-dev
development
VerifiedTrustedCommunity
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.
SKILL.mdUpdated May 5, 2026
oslokommune/punkt-elements-dev
development
VerifiedTrustedCommunity
Developing Lit web components in the Punkt design system (@oslokommune/punkt-elements). Covers creating, modifying, and testing components in /packages/elements/src/components/. Use when working on Punkt Elements source code.
SKILL.mdUpdated May 5, 2026
oslokommune/punkt-css
tools
VerifiedTrustedCommunity
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.
SKILL.mdUpdated May 5, 2026
oslokommune/punkt-css-dev
tools
VerifiedTrustedCommunity
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.mdUpdated May 5, 2026