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

policyengine-interactive-tools

Build Next.js 14 embeddable policy calculators and dashboards for policyengine.org.

2|Updated Mar 31, 2026
Search Tags:#dashboards#charts#nextjs#embed#policyengine#interactive-tools
One-click install
npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-interactive-tools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: policyengine-interactive-tools
Source: https://github.com/PolicyEngine/policyengine-skills/tree/main/skills/tools-and-apis/policyengine-interactive-tools-skill
Command: npx skills add https://github.com/PolicyEngine/policyengine-skills --skill policyengine-interactive-tools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create standalone, embeddable policy tools (calculators, dashboards, charts) that plug into policyengine.org via an iframe.

Core Features & Use Cases

  • Next.js 14 App Router scaffold with Tailwind 4 styling
  • Recharts-powered visualizations and policy data dashboards
  • Reusable UI-kit theming and a lightweight embedding workflow for policyengine.org

Quick Start

Create a new Next.js tool project using the scaffold described and begin building an embeddable policyengine tool.

Frequently Asked Questions about policyengine-interactive-tools

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

FAQPage Schema
How do I build embeddable policy calculators and dashboards for policyengine.org?▼

Create standalone interactive policy tools using a Next.js 14 App Router scaffold with Tailwind 4 styling. The generated React application outputs interactive calculators and dashboards ready to embed in policyengine.org via an iframe.

Can I use Recharts and Tailwind 4 to create interactive policy visualizations?▼

Yes, Recharts powers the visualizations and Tailwind 4 provides the styling within the Next.js 14 scaffold. This combination generates interactive policy dashboards and charts with consistent UI-kit theming tokens.

What is the best way to embed a standalone React dashboard into policyengine.org?▼

Deploy the standalone Next.js dashboard to Vercel under the policyengine scope and embed the deployed application via an iframe. This lightweight embedding workflow integrates interactive policy tools directly into policyengine.org.

Does the PolicyEngine interactive tools scaffold include testing setup?▼

Yes, the scaffold includes Vitest for testing the Next.js 14 application. This testing framework validates the interactive calculators and policy dashboards before deploying the embeddable tools to Vercel.

How do I deploy interactive policy tools to Vercel under the PolicyEngine scope?▼

Build the Next.js 14 application and deploy the project to Vercel under the policyengine scope. This deployment outputs a live URL for the interactive policy tool, enabling seamless iframe embedding into policyengine.org.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
nghiahsgsnghiahsgs
32

tiktok-shop-embed

Embed TikTok Shop product cards, videos, and affiliate links into Next.js pages.

Community
Intermediate
PolicyEnginePolicyEngine

policyengine-frontend-builder-spec

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

Official
Advanced
Tobbe3108Tobbe3108
3

github-pages-deployment

Automate static site deployment to GitHub Pages via gh-pages and CI/CD workflows.

Community
Intermediate