Conversation
jcmill
changed the title
jcmill
changed the title
jpuzz0
reviewed
Mar 24, 2026
| @@ -0,0 +1,30 @@ | |||
| --- | |||
Collaborator
There was a problem hiding this comment.
This scans CSS for raw colors and suggests design token replacements — it think it belongs in pf-design-tokens, not pf-react.
--> plugins/pf-design-tokens/skills/raw-colors-scan/.
Signed-off-by: Jeff Puzzo <jpuzzo@redhat.com>
Signed-off-by: Jeff Puzzo <jpuzzo@redhat.com>
Signed-off-by: Jeff Puzzo <jpuzzo@redhat.com>
Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
…unit-test-generator Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a comprehensive skill for tracking Figma design updates and generating code update checklists. The skill: - Fetches Figma version history via API - Generates three types of reports: design changelog, release notes, and code update checklist - Cross-references GitHub issues from patternfly-design-kit and chatbot repos - Categorizes updates by status (code update needed, design-only, needs verification) - Creates token-focused checklists (color, spacer, dimension tokens) for developers - Includes reference documentation and helper scripts This skill helps PatternFly maintainers keep code in sync with Figma design updates. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Move report templates from SKILL.md to separate reference files - Created template-changelog.md - Created template-release-notes.md - Created template-detailed-report.md - Reduced SKILL.md from 266 to 163 lines (103 line reduction) - Add Node.js runtime validation for compare-tokens script - Created compare-tokens.sh wrapper with dependency check - Validates Node.js availability before execution - Provides clear error messages if Node.js is missing - Update README.md to reflect new file structure Addresses review comments from PR #25 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…ation This comprehensive update improves the skill based on PR review feedback and adds substantial new features for better designer/developer experience. ## Simplified SKILL.md (40% shorter) - Reduced from 205 to ~120 lines for easier reading - Removed technical implementation details (moved to references) - Simplified status determination to 3-step process - More designer-friendly language and examples - Better organization with clear "What This Skill Does" section ## New Automation & Tools - Added figma-sync.sh: Complete workflow orchestration script - Fetches Figma data, compares tokens, searches GitHub, generates reports - Supports dry-run, caching, component filtering, custom output - Provides colored output and progress tracking ## Enhanced Scripts & Validation - compare-tokens.sh: Added comprehensive environment validation - Validates Node.js version, file existence, arguments - Color-coded output with clear error messages - Counts and displays token files found ## New Example Files - token-mappings.json: Figma-to-code token mapping configuration - Supports exact mappings, fuzzy patterns, ignore lists - Includes custom transforms for special cases - .figma-sync-cache.json: Sync history and caching example - Tracks processed versions to prevent duplicates - Stores component status and GitHub issue cache - Enables incremental syncs ## New Documentation - troubleshooting.md: Comprehensive troubleshooting guide - Covers API errors, token comparison, script issues - PatternFly-specific solutions and debugging tips - validation-checklists.md: Quality and validation checklists - Pre-sync, post-sync, code update, release checklists - Quick reference commands for critical checks - README.md: Added extensive FAQ section - General, workflow, and technical questions - Troubleshooting quick answers ## Key Benefits - Designers: Easier to understand what the skill does - Developers: Better automation and error handling - Teams: Comprehensive troubleshooting and validation guides - Everyone: Single command to run entire sync workflow Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Created report-templates.md with all three template examples - Updated SKILL.md to link to the new file - Added usage notes and customization tips to templates - Improves organization by keeping templates in main skill directory Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
10 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
New file: plugins/pf-react/skills/raw-colors-scan/SKILL.md
A Cursor/Agent Skill that scans code for raw color usage and recommends design tokens.
What the skill does
Role: Senior Design Systems Engineer focused on CSS refactoring and design token usage.
Goal: Find raw color values (HEX, RGB/RGBA, HSL/HSLA, and named colors like white, black, red, blue, transparent) used for styling, treat them as technical debt, and suggest replacing them with design tokens.
Scanning rules
Regex matching for HEX, RGB/RGBA, and HSL/HSLA.
Named colors: Flags the 148 CSS named colors, with emphasis on common ones (e.g. white, black, red, blue, transparent).
Property scope: Only considers values on real color-related properties (e.g. background-color, border, box-shadow).
Exceptions: Ignores colors that appear inside design token variable definitions (e.g. $blue-500: #007bff;).
Output
For each finding it reports: File name, File path, Line number, Property, Raw value, and a Recommendation to use a semantic or primitive design token (e.g. --color-brand-primary).