skills.rest
patternfly
patternflyOFFICIAL
Explore all skills by this author →
Website𝕏@patternflyGitHub

pf-tokens

Generate PatternFly CSS design tokens and copy them to the repository.

10|26|Updated Jul 8, 2025
Search Tags:#css#scss#design-tokens#design-systems#patternfly#pf-tokens#token-build
One-click install
npx skills add https://github.com/patternfly/ai-helpers --skill pf-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pf-tokens
Source: https://github.com/patternfly/ai-helpers/tree/main/plugins/design-foundations/skills/pf-tokens
Command: npx skills add https://github.com/patternfly/ai-helpers --skill pf-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

PatternFly teams need consistent design tokens across the core and the PatternFly repository for parity and maintainability.

Core Features & Use Cases

  • Build the SCSS for PatternFly core using the build:scss:core script.
  • Copy the generated CSS files from the build output to the PatternFly repository's tokens directory to sync design tokens across projects.

Quick Start

Run the token build and copy flow to generate the CSS tokens and place them in the PatternFly repository.

Frequently Asked Questions about pf-tokens

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

FAQPage Schema
How do I generate CSS design tokens for PatternFly core?▼

Generate CSS design tokens for PatternFly core by running the build:scss:core script, which compiles SCSS sources into CSS token files ready for synchronization across PatternFly repositories.

How does design token synchronization work between PatternFly core and sibling repositories?▼

Design token synchronization works by running the build:scss:core script and copying the generated CSS output to the sibling repository's src/patternfly/base/tokens/ directory, maintaining parity across projects.

What's the best way to sync SCSS design tokens across PatternFly projects?▼

The best way to sync SCSS design tokens across PatternFly projects is running an end-to-end token-sync process that builds SCSS and copies CSS output to the target repository's tokens directory.

Do I need to run the build:scss:core script before copying tokens to the PatternFly repository?▼

Yes, you need to run the build:scss:core script first to generate the CSS token files, then copy the output to src/patternfly/base/tokens/ to complete the token synchronization workflow.

Can I use this token build process for PatternFly design system maintenance?▼

Yes, this token build process is designed for PatternFly design system maintenance, enabling consistent design tokens across core and sibling repositories when token changes occur.

Why does PatternFly need consistent design tokens across multiple repositories?▼

PatternFly needs consistent design tokens across multiple repositories to ensure visual parity and maintainability, preventing token drift between core and sibling projects during updates.

Related Skills

Explore More Design & Creative Skills→
patternflypatternfly
10

css-var-analyzer

Analyze PatternFly SCSS CSS custom properties and generate a Markdown report.

Official
Intermediate
I-SynergyI-Synergy

keycloak-theme-colors

Derive light and dark color tokens from a base hex and rewrite Keycloak login.css.

Official
Advanced
proffesor-for-testingproffesor-for-testing
43

github-project-management

Automate GitHub issue triage, board synchronization, and sprint planning.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced