Stats
Actions
Tags
From punkt-designsystem
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/punkt-designsystem:punkt-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Skill for using Punkt design system components. Covers both React (`@oslokommune/punkt-react`) and Elements/Web Components (`@oslokommune/punkt-elements`).
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.
All usage patterns require Punkt CSS. See the punkt-css skill for setup instructions.
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.
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>.
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.
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.
npx claudepluginhub oslokommune/claude-marketplace --plugin punkt-designsystemBuilds accessible, responsive, performant frontend components using design systems, modern CSS, WCAG patterns, and React/Vue/Svelte examples.
Provides component reference for @wix/design-system: search components, inspect props, view examples, and access testkit driver APIs via a bundled CLI script.
Provides patterns and best practices for MUI core components like TextField, Autocomplete, Button, Dialog, Table, AppBar, Drawer, Snackbar. Includes TSX/JSX examples for inputs and UI elements.