feat(skills): Add figma-changes skill to pf-figma plugin#25
Merged
Conversation
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>
kaylachumley
changed the title
kaylachumley
changed the title
jpuzz0
approved these changes
Mar 20, 2026
Collaborator
jpuzz0
left a comment
jpuzz0
left a comment
There was a problem hiding this comment.
Just 1 non-blocking suggestion. If you want to leave as-is, let me know and we can merge. Otherwise I'll wait till the comment is addressed.
| @@ -0,0 +1,265 @@ | |||
| --- | |||
Collaborator
There was a problem hiding this comment.
nit: At 265 lines, the three report templates are the main source of length. Could these be moved to examples/ or references/? You already have examples/sample-output.md which demonstrates the format well.
Contributor
Author
There was a problem hiding this comment.
yes they can be moved! not sure how to do that though @jpuzz0 Sorry for the late response, I was on PTO
Collaborator
There was a problem hiding this comment.
No worries! Here's a prompt you can give Claude or Cursor in the repo to do it for you:
In plugins/pf-figma/skills/figma-changes/SKILL.md, extract the three report templates into a separate file called `report-templates.md` in the same directory. Replace them in SKILL.md with a link to the new file.
jpuzz0
reviewed
Mar 23, 2026
| @@ -0,0 +1,267 @@ | |||
| #!/usr/bin/env node | |||
Collaborator
There was a problem hiding this comment.
Not all users will have Node.js installed, and if they don't, this will fail silently with command not found. Adding a runtime check at the top would help — something like:
#!/bin/bash
command -v node >/dev/null 2>&1 || { echo "Error: This skill requires Node.js." >&2; exit 1; }Or you could wrap the Node call in the bash extract script that already exists. I'll be updating CONTRIBUTING-SKILLS.md separately to clarify our policy on scripts in skills.
- 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>
Contributor
Author
|
I made those updates! @jpuzz0 can you take a look to make sure its working? |
…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>
jpuzz0
approved these changes
Mar 24, 2026
jpuzz0
reviewed
Mar 24, 2026
| --- | ||
| name: figma-changes | ||
| description: Identify Figma design changes and generate code update checklists. Use when the user asks to "check Figma updates", "track design changes", "what changed in Figma", "create changelog from Figma", or "what code needs updating based on Figma". | ||
| version: 3.1.0 |
Collaborator
There was a problem hiding this comment.
I don't see a harm in this, but I do wonder if this is something cursor or claude code added as a means of keeping track of local changes that doesn't necessarily make sense committing to the skill itself. But you can tell me. Either way, I don't consider this to be a blocking comment, so we can merge as-is.
- 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>
jcmill
pushed a commit
that referenced
this pull request
Mar 24, 2026
- 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>
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
2 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.
Adds a comprehensive skill for tracking Figma design updates and generating code update checklists. The skill:
This skill helps PatternFly maintainers keep code in sync with Figma design updates.