Can I use Punkt components without a build step?

Yes, the skill provides instructions for using Punkt Elements via CDN, which allows you to include scripts directly in your HTML without NPM.

Does this include Punkt CSS styling?

While this skill focuses on components, it assumes the use of Punkt CSS. For specific CSS classes, colors, and typography, it is recommended to use this in conjunction with the punkt-css skill.

How do I handle Content Security Policy (CSP) with Punkt?

Punkt loads resources from a specific CDN. This skill provides the exact CSP directives required for font-src, img-src, and script-src to ensure components load correctly.

Does this skill support both React and vanilla HTML?

Yes, it covers both the React wrapper (@oslokommune/punkt-react) and the standard Web Components library (@oslokommune/punkt-elements) for use in any framework or static site.

Are the components accessible?

Yes, Punkt components are designed by Oslo kommune to meet universal accessibility requirements, and this skill helps implement them according to those standards.

Punkt UI Components

Name: Punkt UI Components
Author: oslokommune

byoslokommune

0•

デザインツール

Implements accessible UI components using the Oslo kommune Punkt design system for React and Web Components.

This skill provides comprehensive guidance for implementing UI components from Oslo kommune's Punkt design system, supporting both React (@oslokommune/punkt-react) and standard Web Components (@oslokommune/punkt-elements). It simplifies the development of official digital services by providing Claude with deep knowledge of component APIs, props, events, and slots, while ensuring critical configurations like Content Security Policy (CSP) and CDN integration are correctly handled for consistent styling and functionality.

主な機能

01Detailed component API, props, and event documentation

02Pre-configured Content Security Policy (CSP) directives

030 GitHub stars

04Full support for React and Web Component implementations

05CDN and NPM installation and setup patterns

06Guidance for 30+ UI components including forms, navigation, and layout

ユースケース

01Building accessible and compliant web applications for Oslo kommune

02Troubleshooting missing icons or fonts caused by CSP configuration

03Prototyping UIs using Punkt's React or Elements libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oslokommune/punkt-skills punkt-components

For use in Claude.ai and ChatGPT

主な機能

01Detailed component API, props, and event documentation

02Pre-configured Content Security Policy (CSP) directives

030 GitHub stars

04Full support for React and Web Component implementations

05CDN and NPM installation and setup patterns

06Guidance for 30+ UI components including forms, navigation, and layout

ユースケース

01Building accessible and compliant web applications for Oslo kommune

02Troubleshooting missing icons or fonts caused by CSP configuration

03Prototyping UIs using Punkt's React or Elements libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oslokommune/punkt-skills punkt-components

For use in Claude.ai and ChatGPT