punkt-react-dev

Develop and test Punkt React components in the monorepo.

3|Updated Feb 26, 2026

Search Tags:#testing #architecture #react #monorepo #component-development #punkt #dev-pages

Ready to run

npx skills add https://github.com/oslokommune/punkt-skills --skill punkt-react-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: punkt-react-dev
Source: https://github.com/oslokommune/punkt-skills/tree/main/skills/punkt-react-dev
Command: npx skills add https://github.com/oslokommune/punkt-skills --skill punkt-react-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers efficiently develop, test, and maintain React components for Punkt by providing a cohesive set of guidelines, architecture knowledge, and workflow documentation.

Core Features & Use Cases

Architecture guidance and monorepo structure for the React package, including integration with the Punkt CSS and Lit wrappers.
Comprehensive component development workflow: specs, file structure, implementation rules, styling, testing, and dev-pages.
Real-world use: use this skill to add a new component to packages/react/src/components, validate with tests, and preview via the dev pages.

Quick Start

Open the Punkt React development docs, review the architecture overview, and begin by adding a new component under packages/react/src/components, then run the Build & Dev Commands to start the dev server.

Frequently Asked Questions about punkt-react-dev

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

FAQPage Schema

How do I create a new React component in a monorepo?▼

To create a new React component in a monorepo, add the component files under packages/react/src/components, follow the established architecture specs, and validate the implementation using the provided dev-page workflows and build commands.

What is the workflow for testing React components in a monorepo?▼

Testing React components in a monorepo involves running the specified Build & Dev Commands to start the dev server, validating component behavior via dev pages, and executing linting and testing guidelines to ensure architecture compliance before integration.

How does the Punkt React package integrate with CSS and Lit wrappers?▼

The Punkt React package integrates with Punkt CSS and Lit wrappers through a cohesive monorepo architecture, ensuring component styling and structure align across different framework implementations within the same development environment.

Do I need specific metadata structure for React component development?▼

Yes, React component development requires enforcing a specific metadata structure via SKILL.md frontmatter to align with the monorepo architecture, specs, and component implementation rules.

Why use dev pages when modifying React components?▼

Using dev pages when modifying React components allows you to preview changes locally, validate component behavior in isolation, and ensure compliance with linting and testing guidelines before finalizing the architecture integration.