skills.rest
PolicyEngine
PolicyEngineOFFICIAL
Explore all skills by this author →
Website𝕏@thepolicyengineGitHub

policyengine-ui-kit-consumer

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
One-click install
npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-ui-kit-consumer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate
lexand-devlexand-dev

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 and react-native-css in Expo projects.

Community
Intermediate
tc9011tc9011

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate