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

punkt-elements-dev

Create and validate Lit-based Punkt Elements components within the monorepo.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps developers build, modify, and validate Lit web components within the Punkt Elements design system, enabling consistent architecture, typing, and testing practices.

Core Features & Use Cases

  • Architecture overview and directory structure for Punkt Elements projects.
  • Base classes, light DOM, slot controllers, form integration, testing, and build workflows.
  • Typing patterns and testing strategies used across components in the monorepo.

Quick Start

Create a new component directory under packages/elements/src/components, implement with Punkt base classes, wire up tests, and run the build and test workflow.

Frequently Asked Questions about punkt-elements-dev

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

FAQPage Schema
How do I create Lit web components within the Punkt Elements design system?▼

Creating Lit web components within Punkt Elements involves setting up a new directory under packages/elements/src/components, implementing with Punkt base classes, wiring up tests, and running the build and test workflow.

What architecture and directory structure does Punkt Elements use for Lit components?▼

Punkt Elements architecture organizes Lit components within a monorepo structure under packages/elements/src/components, applying consistent patterns for base classes, slot controllers, typing, and testing across the project.

How do I add tests and validate Lit components in a Punkt Elements monorepo?▼

Testing Lit components in Punkt Elements requires wiring up test files alongside the component implementation and executing the reproducible build and test pipeline to validate structure, type patterns, and functionality.

Can I use form integration and light DOM with Lit components in Punkt Elements?▼

Punkt Elements supports form integration and light DOM for Lit components through its base classes and slot controllers, enabling consistent architecture and typing patterns across the design system.

What typing patterns and build workflows are enforced for Punkt Elements component development?▼

Punkt Elements enforces specific typing patterns and reproducible build workflows across Lit components, ensuring consistent structure, type safety, and validated test pipelines within the monorepo.

Why does my Lit component build fail in the Punkt Elements monorepo?▼

Build failures in Punkt Elements typically occur when Lit components deviate from enforced structure, type patterns, or base class guidelines, requiring alignment with the monorepo architecture and build workflow validation.

Related Skills

Explore More Software Engineering Skills→
reactivereactive
2.0k

initialize

Set up Node.js, Yarn, and workspace commands for the Reactive Data Client monorepo.

Official
Intermediate
mazreanmazrean

building-lit-components

Create Lit web components with reactive properties and Shadow DOM styling.

Community
Intermediate
outcomeengineeringoutcomeengineering
1

coding-typescript

Guide type-safe TypeScript development with dependency injection and behavior-only testing.

Official
Intermediate
ConectateConectate
15

lit-ct-components

Integrate Conectate Components with Lit using CtLit utilities, slots, and events.

Official
Intermediate