feat(skill): pf design token check skill#108
Open
jcmill wants to merge 1 commit into
Open
Conversation
Contributor
|
Too much diff to scan? Review this PR in Change Stack to start with the highest-impact changes. 📝 WalkthroughWalkthroughThis PR adds comprehensive documentation for the Changespf-design-token-check Skill Documentation
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsLinked repositories: Your configuration references 1 linked repositories, but your current plan allows 0. Analyzed ``, skipped Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (5)
plugins/react/skills/pf-design-token-check/SKILL.md (3)
3-3: ⚡ Quick winNitpick: Align skill description with required “Use when …” formula.
The description starts correctly with an action verb, but it should include an explicit trigger-context sentence beginning with “Use when …” to match repo skill-discovery rules.
As per coding guidelines, “description includes trigger contexts in a ‘Use when’ clause.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/react/skills/pf-design-token-check/SKILL.md` at line 3, Update the skill description in SKILL.md to follow the repo's "Use when …" formula by appending a trigger-context sentence that begins with "Use when …" and describes when the checker should run (e.g., when reviewing CSS/SCSS/CSS-in-JS or inline styles for hardcoded color, spacing, typography, or shadow values that have PF token equivalents); keep the existing action-verb lead and ensure the new sentence clearly states the trigger context for the skill.
139-139: ⚡ Quick winNitpick: Fix malformed token filename example.
Line 139 lists
tokens-.scss, which looks like a typo and can mislead token-file search behavior in usage docs.
As per coding guidelines, skill instructions should be clear and outcome-oriented; malformed references reduce reliability.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/react/skills/pf-design-token-check/SKILL.md` at line 139, Replace the malformed token filename example `tokens-.scss` with the correct dark-theme filename (e.g., `tokens-dark.scss`) in SKILL.md; search for other occurrences of `tokens-.scss` in the file and update them to `tokens-dark.scss` (or the actual dark-theme token filename used by the project) so documentation and token-file search examples are accurate and consistent.
210-210: ⚡ Quick winNitpick: Add language tags to fenced code blocks (MD040).
These fences are missing language identifiers; adding
text,css, ormd(as appropriate) resolves the current markdownlint warnings.Also applies to: 224-224, 229-229, 250-250, 266-266
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/react/skills/pf-design-token-check/SKILL.md` at line 210, In SKILL.md update each fenced code block that currently has plain triple backticks to include an appropriate language tag (e.g., text, css, md) to satisfy MD040; locate the example/code fences around the token examples and replace ``` with language-tagged fences like ```text or ```css as appropriate so markdownlint stops flagging them (apply this change to all similar fences noted in the comment).plugins/react/skills/pf-design-token-check/reference/comparison.md (1)
42-42: ⚡ Quick winNitpick: Add language identifiers to code fences (MD040).
These blocks should include a language label to satisfy markdownlint and improve rendering clarity.
Also applies to: 52-52, 73-73
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/react/skills/pf-design-token-check/reference/comparison.md` at line 42, The markdown contains bare code fences ("```") in comparison.md that trigger MD040; update each triple-backtick block (the fences shown as "```" at the example code blocks) to include the appropriate language identifier (for example ```json, ```css, ```js as applicable) so each code fence is labeled and markdownlint passes.plugins/react/skills/pf-design-token-check/README.md (1)
83-83: ⚡ Quick winNitpick: Specify languages for fenced code blocks (MD040).
Please add fence languages (
text,bash, etc.) to clear markdownlint warnings and keep docs consistent.Also applies to: 112-112, 120-120
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/react/skills/pf-design-token-check/README.md` at line 83, Update the fenced code blocks in the README.md that currently use bare ``` by adding explicit languages (for example change ``` to ```bash for shell/CLI examples and to ```text for plain output/snippets) so markdownlint MD040 is satisfied; locate the anonymous fences around the CLI examples and output/examples and add the appropriate language token after the opening backticks.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@plugins/react/skills/pf-design-token-check/README.md`:
- Line 83: Update the fenced code blocks in the README.md that currently use
bare ``` by adding explicit languages (for example change ``` to ```bash for
shell/CLI examples and to ```text for plain output/snippets) so markdownlint
MD040 is satisfied; locate the anonymous fences around the CLI examples and
output/examples and add the appropriate language token after the opening
backticks.
In `@plugins/react/skills/pf-design-token-check/reference/comparison.md`:
- Line 42: The markdown contains bare code fences ("```") in comparison.md that
trigger MD040; update each triple-backtick block (the fences shown as "```" at
the example code blocks) to include the appropriate language identifier (for
example ```json, ```css, ```js as applicable) so each code fence is labeled and
markdownlint passes.
In `@plugins/react/skills/pf-design-token-check/SKILL.md`:
- Line 3: Update the skill description in SKILL.md to follow the repo's "Use
when …" formula by appending a trigger-context sentence that begins with "Use
when …" and describes when the checker should run (e.g., when reviewing
CSS/SCSS/CSS-in-JS or inline styles for hardcoded color, spacing, typography, or
shadow values that have PF token equivalents); keep the existing action-verb
lead and ensure the new sentence clearly states the trigger context for the
skill.
- Line 139: Replace the malformed token filename example `tokens-.scss` with the
correct dark-theme filename (e.g., `tokens-dark.scss`) in SKILL.md; search for
other occurrences of `tokens-.scss` in the file and update them to
`tokens-dark.scss` (or the actual dark-theme token filename used by the project)
so documentation and token-file search examples are accurate and consistent.
- Line 210: In SKILL.md update each fenced code block that currently has plain
triple backticks to include an appropriate language tag (e.g., text, css, md) to
satisfy MD040; locate the example/code fences around the token examples and
replace ``` with language-tagged fences like ```text or ```css as appropriate so
markdownlint stops flagging them (apply this change to all similar fences noted
in the comment).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: acdde748-1ec4-48be-aa10-a3c1099a4b03
📒 Files selected for processing (4)
plugins/react/skills/pf-design-token-check/README.mdplugins/react/skills/pf-design-token-check/SKILL.mdplugins/react/skills/pf-design-token-check/reference/comparison.mdplugins/react/skills/pf-design-token-check/reference/example-violations.md
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
1 participant
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.
resolves: #101
This skill detects hardcoded css values that should use a PatternFly design token. Works across CSS, SCSS, CSS in JS, React and inline styles.
Summary by CodeRabbit