By oslokommune
Skills for using and developing the Punkt design system by Oslo kommune. Covers Punkt Elements (web components), Punkt React, and Punkt CSS.
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.
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.
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.
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.
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.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Claude Code plugin with skills for using and developing the Punkt design system by Oslo kommune.
Disclaimer: This plugin is somewhat experimental. Use it with care, and always check the generated output manually. AI agents are unpredictable, and errors might occur.
| Skill | Description |
|---|---|
| punkt-components | Using Punkt UI components (React and Web Components) — APIs, props, events, slots, and usage patterns |
| punkt-css | Using Punkt CSS — setup, layout, typography, colors, grid, spacing, and utility classes |
| punkt-elements-dev | Developing Lit web components in @oslokommune/punkt-elements |
| punkt-react-dev | Developing React components in @oslokommune/punkt-react |
| punkt-css-dev | Developing component and utility styles in @oslokommune/punkt-css |
/plugin install punkt-designsystem@dig
(Requires access to the Claude marketplace for Digitaliseringsdirektoratet, Oslo kommune)
Skills are activated automatically by Claude when your request matches what they cover. For example:
The plugin version is bumped automatically on push to main based on Conventional Commits.
| Commit prefix | Bump | Example |
|---|---|---|
feat: | minor | feat: add tooltip component skill |
fix: | patch | fix: correct accordion example |
docs: | patch | docs: update README |
refactor: | patch | refactor: reorganize css skill sections |
chore: | patch | chore: update metadata |
feat!: | major | feat!: rename all skill directories |
A ! after any prefix (e.g. feat!:, fix!:) triggers a major bump.
Commits that don't match a conventional prefix are ignored.
Team Designsystem, Digitaliseringsetaten, Oslo kommune — [email protected]
npx claudepluginhub oslokommune/claude-marketplace --plugin punkt-designsystemOslo Kommune composite GitHub Actions for CI/CD pipelines. Includes actions for AWS deployments (CloudFront, ECS, S3), Docker image operations (crane-copy-image), Terraform deployments, artifact packaging, release management, Renovate metadata, and CLI tool setup (ok, boilerplate, terraform). Used together with iac-platform skill for CI/CD pipelines
Reusable GitHub Actions workflow for building and pushing Docker images to ECR or GHCR. Used together with iac-platform skill for CI/CD pipelines.
Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
Complete UI/UX design system for React Native & Next.js with 4 core skills
Token generators, component patterns, accessibility guidance, and framework integrations
Build, document, and maintain scalable design systems — from tokens and components to accessibility and theming.
Automated design system construction from repository analysis to production-ready implementation.
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems — with taste, context-matching, and anti-slop discipline.