skills.rest
oslokommune
oslokommuneOFFICIAL
Explore all skills by this author →
WebsiteGitHub

punkt-components

Provide reusable Punkt design-system components for React and Lit web components.

3|Updated Feb 26, 2026
Search Tags:#documentation#frontend#react#design-system#web-components#punkt
One-click install
npx skills add https://github.com/oslokommune/punkt-skills --skill punkt-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: punkt-components
Source: https://github.com/oslokommune/punkt-skills/tree/main/skills/punkt-components
Command: npx skills add https://github.com/oslokommune/punkt-skills --skill punkt-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Punkt UI components reduce duplication and ensure a consistent look across React and Web Component-based projects by providing a centralized design-system library.

Core Features & Use Cases

  • Reusable building blocks for common UI patterns (Accordion, Button, Card, Tabs, Input Wrapper, etc.)
  • Framework-agnostic usage with both React and Elements/Web Components for cohesive design across apps
  • Clear, documented APIs with slots and events to accelerate development and ensure accessibility

Quick Start

Install and start importing Pkt* components in your project to begin building Punkt UIs with React and Web Components.

Frequently Asked Questions about punkt-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build React UIs with the Punkt design system?▼

Build Punkt UIs by installing the @oslokommune/punkt-react package and importing reusable components like Button, Card, and Accordion to assemble interfaces rapidly.

Can I use Punkt web components in non-React frontend projects?▼

Yes, Punkt web components work in non-React frontend projects via the @oslokommune/punkt-elements package, providing framework-agnostic Lit components for cohesive design.

What is the best way to ensure consistent UI design across multiple web apps?▼

Ensure consistent UI design across web apps by adopting a centralized design-system component library with modular APIs and aligned CSS to enforce a unified visual language.

Does the Punkt component library support Content Security Policy requirements?▼

Yes, the Punkt component library supports Content Security Policy requirements by enforcing CSP-friendly resource loading across its React and Web Component building blocks.

How do I add accessible input forms using Punkt components?▼

Add accessible input forms using the Input Wrapper component from the Punkt library, which provides documented APIs with slots and events to ensure accessibility compliance.

Why should I use a shared design system instead of custom web components?▼

Use a shared design system instead of custom web components to reduce duplication and enforce a consistent look across projects through centralized, reusable building blocks.

Related Skills

Explore More Software Engineering Skills→
engrateengrate
1

engrate-components

Integrate Engrate React components with design tokens and Tailwind CSS v4.

Official
Intermediate
rizaldiemrizaldiem

frontend-design

Create production-ready frontend interfaces with deliberate typography, color systems, and motion.

Community
Advanced
UnifeederUnifeeder

dpworld-branding

Validate UI components and styles against DP World branding and accessibility standards.

Official
Intermediate
PickleSodaPickleSoda

frontend-design

Generate custom frontend interfaces with unique typography, color, and motion.

Community
Advanced