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

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
One-click install
npx skills add https://github.com/oslokommune/punkt-skills --skill punkt-react-dev
Or copy as Structured Prompt for Agent▼
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.

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
Angriff36Angriff36

Frontend Implementation

Guide frontend UI development across React, Vue, and Angular projects.

Community
Advanced
oslokommuneoslokommune

punkt-components

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

Official
Intermediate
KouemouSahKouemouSah

TaxasGE Frontend Dev

Provide Next.js/React architecture patterns, templates, and best practices for frontend tasks.

Community
Intermediate