policyengine-ui-kit-consumer

Name: policyengine-ui-kit-consumer
Availability: InStock
Author: PolicyEngine

Integrate the PolicyEngine UI Kit into frontend projects with Tailwind and PostCSS configuration.

2|Updated Mar 31, 2026

Search Tags:#theming #tailwind #ui-kit #postcss #globals.css #frontend-setup

Ready to run

npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-ui-kit-consumer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: policyengine-ui-kit-consumer
Source: https://github.com/PolicyEngine/policyengine-skills/tree/main/skills/frontend/policyengine-ui-kit-consumer-skill
Command: npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-ui-kit-consumer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps frontend teams quickly integrate @policyengine/ui-kit into new projects, eliminating guesswork around styling setup and token availability.

Core Features & Use Cases

Guided setup for Tailwind + ui-kit theme integration in consumer apps
Troubleshooting for common ui-kit integration issues like import order, missing tokens, and config problems
Scenarios include starting a new React/Vite/Next app, debugging global styles, and configuring globals.css with correct imports

Quick Start

Create a new project, install @policyengine/ui-kit, and configure globals.css to import Tailwind first and the ui-kit theme second.

Frequently Asked Questions about policyengine-ui-kit-consumer

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

FAQPage Schema

How do I configure Tailwind and PostCSS for a custom UI kit integration in Next.js?▼

To configure Tailwind and PostCSS for a UI kit integration, create a postcss.config.mjs file using the @tailwindcss/postcss plugin to ensure the framework processes your custom theme tokens correctly.

Why are my custom theme styles missing after importing a UI kit into globals.css?▼

Missing theme styles occur when the globals.css import order is incorrect. You must import Tailwind first and the UI kit theme second in your globals.css file to enforce proper style cascading.

Can I use the PolicyEngine UI kit with a Vite frontend setup?▼

Yes, you can use the PolicyEngine UI kit with a Vite frontend setup. The integration supports configuring PostCSS and globals.css across Next.js, Vite, and other frontend frameworks for consistent styling.

What is the correct way to import Tailwind and UI kit tokens in a React application?▼

The correct way to import Tailwind and UI kit tokens in a React application is using a two-line globals.css import strategy, placing the Tailwind import before the UI kit theme import to establish correct cascading.

How to fix PostCSS configuration errors when adding a shared theme package?▼

To fix PostCSS configuration errors when adding a shared theme package, ensure your postcss.config.mjs file explicitly includes the @tailwindcss/postcss plugin and verify your globals.css import order matches the required setup.