From c1cbef359855367be57181ce9ea1aaf381eb9844 Mon Sep 17 00:00:00 2001 From: policyengine-bot Date: Thu, 18 Dec 2025 13:56:24 +0000 Subject: [PATCH] Add @policyengine/design-system package to design skill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds documentation about the centralized design system npm package (@policyengine/design-system) which provides design tokens for consistent styling across PolicyEngine projects. Context: Learned from policyengine-api-v2-alpha PR #14 which integrated design tokens from this package into API documentation. Changes: - Document design-system package installation and usage - Add guidance for using design tokens in documentation sites - Point to policyengine-api-v2 as reference implementation - Clarify when to use package vs. app-v2 colors vs. legacy colors This helps future sessions working on API v2, app v2, and other modern PolicyEngine projects that should use the centralized design system rather than hardcoded colors. 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude --- .../policyengine-design-skill/SKILL.md | 49 ++++++++++++++++++- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/skills/documentation/policyengine-design-skill/SKILL.md b/skills/documentation/policyengine-design-skill/SKILL.md index 96da84a..86703ac 100644 --- a/skills/documentation/policyengine-design-skill/SKILL.md +++ b/skills/documentation/policyengine-design-skill/SKILL.md @@ -418,9 +418,54 @@ ls -la ### Color Definitions -**⚠️ IMPORTANT: App V2 Transition** +**⚠️ IMPORTANT: Design System Package** -PolicyEngine is transitioning to policyengine-app-v2 with updated design tokens. Use app-v2 colors for new projects. +PolicyEngine has a centralized design system package: `@policyengine/design-system` (available on npm). This package provides design tokens (colors, spacing, typography) for consistent styling across all PolicyEngine projects. + +**For new projects (API v2, documentation sites, etc.):** +- Install: `npm install @policyengine/design-system` +- Import tokens from the package instead of hardcoding colors +- See the package README for usage patterns + +**For legacy projects:** +- Use app-v2 colors for new projects not yet using the design system package +- Gradually migrate to use `@policyengine/design-system` when possible + +### Using @policyengine/design-system Package + +**Installation:** +```bash +npm install @policyengine/design-system +``` + +**Usage in documentation sites (Docusaurus, etc.):** +```javascript +// Import design tokens +import { tokens } from '@policyengine/design-system'; + +// Use in custom CSS +:root { + --primary-color: var(--pe-color-primary-500); + --secondary-color: var(--pe-color-blue-700); +} + +// Or import CSS directly +import '@policyengine/design-system/dist/tokens.css'; +``` + +**Current implementation:** +```bash +# See how API v2 uses design tokens +cat policyengine-api-v2/docs/docusaurus.config.js +cat policyengine-api-v2/docs/src/css/custom.css +``` + +**Package repository:** +```bash +# For reference implementation and available tokens +# See: https://www.npmjs.com/package/@policyengine/design-system +# Source: PolicyEngine/design-system (GitHub) +``` **Current colors (policyengine-app-v2):**