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

policyengine-frontend-builder-spec

Enforce Tailwind CSS v4, ui-kit, and Next.js App Router frontend specifications.

2|Updated Mar 31, 2026
Search Tags:#frontend#nextjs#bun#tailwind#app-router#design-tokens#ui-kit
One-click install
npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-frontend-builder-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: policyengine-frontend-builder-spec
Source: https://github.com/PolicyEngine/policyengine-skills/tree/main/skills/tools-and-apis/policyengine-frontend-builder-spec-skill
Command: npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-frontend-builder-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves inconsistent frontend practices for PolicyEngine dashboards and interactive tools.

Core Features & Use Cases

  • Enforces Tailwind CSS v4 as the styling foundation and requires the ui-kit theme integration for all components.
  • Dictates architecture expectations for Next.js with the App Router, token-driven design, and a Bun-based tooling workflow.
  • Guides project scaffolding, component availability, and deployment considerations to ship reliable, accessible dashboards.

Quick Start

Validate or initialize a frontend project according to this spec and ensure Tailwind v4 setup, ui-kit integration, and Next.js App Router compliance.

Frequently Asked Questions about policyengine-frontend-builder-spec

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

FAQPage Schema
How do I set up a Next.js dashboard with Tailwind CSS v4 and bun?▼

Setting up a Next.js dashboard with Tailwind CSS v4 and bun requires using the App Router, installing Tailwind v4, importing the ui-kit theme, loading design tokens, and applying Vercel deployment configurations for consistent frontend practices.

What are design tokens and how do they work with a ui-kit in Next.js?▼

Design tokens are styling variables loaded into your project to standardize UI elements, working with the @policyengine/ui-kit in a Next.js App Router setup to enforce consistent visual theming across all dashboard components.

Do I need Vercel to deploy a Next.js App Router project using this frontend spec?▼

Using this frontend spec requires Vercel deployment configurations, dictating Vercel setups alongside Next.js App Router, Tailwind v4, and a bun-based toolchain to ship reliable, accessible dashboards.

Why should I use bun instead of npm for my Tailwind CSS Next.js project?▼

You should use bun because this spec dictates a bun-based tooling workflow for Next.js projects, standardizing the package manager across project scaffolding, component availability, and deployment considerations to solve inconsistent frontend practices.

Can I use Tailwind CSS v3 with the PolicyEngine ui-kit?▼

No, you cannot use Tailwind CSS v3 with the PolicyEngine ui-kit because the spec enforces Tailwind CSS v4 as the styling foundation, requiring ui-kit theme integration and dictating token-driven design for dashboards.

What is the best way to standardize frontend components across multiple dashboards?▼

The best way to standardize frontend components across multiple dashboards is enforcing Tailwind v4, importing the @policyengine/ui-kit theme, loading design tokens, and using Next.js App Router with a bun-based toolchain.

Related Skills

Explore More Software Engineering Skills→
zardusai-cyberzardusai-cyber
1

bun-runtime

Run JavaScript projects with Bun as runtime, package manager, bundler, and test runner.

Community
Intermediate
Axel-DaMageAxel-DaMage
2

nextjs-developer

Configure Next.js 14+ App Router applications and deploy them to Vercel.

Community
Advanced
PolicyEnginePolicyEngine

policyengine-tailwind-shadcn

Bridge PolicyEngine design tokens to Tailwind v4 utilities via @theme inline blocks.

Official
Intermediate
oalansilvaoalansilva

tailwind-patterns

Apply Tailwind v4 CSS-first patterns with container queries and design tokens.

Community
Advanced