Color Audit
rome-os/rome
Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…
Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report.
Install Design Systems Slds Validate
$ npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install forcedotcom/sf-skills design-systems-slds-validate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-systems-slds-validate .claude/skills/design-systems-slds-validate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-systems-slds-validate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validate into .claude/skills/design-systems-slds-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-systems-slds-validate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install forcedotcom/sf-skills design-systems-slds-validate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-systems-slds-validate .agents/skills/design-systems-slds-validate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-systems-slds-validate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validate into .agents/skills/design-systems-slds-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-systems-slds-validate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install forcedotcom/sf-skills design-systems-slds-validate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-systems-slds-validate .cursor/skills/design-systems-slds-validate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-systems-slds-validate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validate into .cursor/skills/design-systems-slds-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-systems-slds-validate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/forcedotcom/sf-skills.git --path skills/design-systems-slds-validate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install forcedotcom/sf-skills design-systems-slds-validate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-systems-slds-validate .gemini/skills/design-systems-slds-validate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-systems-slds-validate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validate into .gemini/skills/design-systems-slds-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-systems-slds-validate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install forcedotcom/sf-skills design-systems-slds-validateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-systems-slds-validate .github/skills/design-systems-slds-validate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-systems-slds-validate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validate into .github/skills/design-systems-slds-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-systems-slds-validate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install forcedotcom/sf-skills design-systems-slds-validate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/forcedotcom/sf-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-systems-slds-validate .opencode/skills/design-systems-slds-validate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-systems-slds-validate" agent skill from https://github.com/forcedotcom/sf-skills/tree/main/skills/design-systems-slds-validate into .opencode/skills/design-systems-slds-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-systems-slds-validate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-systems-slds-validate- GitHub stars
- 1.1k
- Token cost
- ~3.1k tokens
- SKILL.md length
- 1,181 words
- Files
- 4 (incl. scripts, references)
- Skills in repo
- 251
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report.
- Works in 5 steps: Run SLDS Linter → Run Supplementary Analysis → Agent Manual Review → …
- Asked to score my components SLDS
- SKILL.md covers Scope, Quality Validation Process, Step 1: Run SLDS Linter and Step 2: Run Supplementary…, plus 6 more sections
- Runs JavaScript scripts from its folder; calls npx and node
What it does
Design Systems Slds Validate is an agent skill from forcedotcom/sf-skills. Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report. Runs the SLDS linter and analyzes CSS for theming hook usage and pairing, scoring SLDS findings across categories into an overall grade. Use when asked to "score my component's SLDS", "SLDS scorecard", "SLDS quality report", "audit SLDS compliance", "how good is my SLDS", "check SLDS quality", "rate my SLDS styling", "evaluate my component's SLDS", "is this component's SLDS ready to ship?", "look at my LWC for…
Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts and reference files (for example `references/quality-checks.md` and `references/report-format.md`).
It sits in Frontend & Design, covering Design systems, Accessibility and Linting and formatting. It works with Salesforce. The repository describes itself as: Salesforce's curated collection of agent skills for building applications. Optimized for Agentforce Vibes, compatible with all AI tools. The licence is Apache-2.0.
When your agent uses it
- Asked to score my components SLDS
- SLDS quality report
- Audit SLDS compliance
- How good is my SLDS
Example prompts
- “score my component”
- “SLDS scorecard”
- “SLDS quality report”
- “/design-systems-slds-validate”
Requirements
- Node.js
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit e5164d9. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npxnode
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design Systems Slds Validate loads about 3.1k tokens when it runs, and up to ~8.5k if it reads all its reference files. Until then it costs about 232 tokens; SKILL.md has 1,181 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from forcedotcom/sf-skills at commit e5164d9, republished under its Apache-2.0 licence (© forcedotcom). 1,181 words, ~3,115 tokens.
Download SKILL.mdSave it as
.claude/skills/design-systems-slds-validate/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- design-systems-slds-validate
- description
- Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report. Runs the SLDS linter and analyzes CSS for theming hook usage and pairing, scoring SLDS findings across categories into an overall grade. Use when asked to "score my component's SLDS", "SLDS scorecard", "SLDS quality report", "audit SLDS compliance", "how good is my SLDS", "check SLDS quality", "rate my SLDS styling", "evaluate my component's SLDS", "is this component's SLDS ready to ship?", "look at my LWC for SLDS issues", "audit SLDS before I submit", "review my component's SLDS before code review", or any time a user wants an SLDS quality assessment or SLDS production-readiness check on an LWC. Not for fixing violations (use design-systems-slds2-migrate), building new components (use design-systems-slds-apply), or accessibility/WCAG/ARIA audits (use experience-accessibility-validate).
- metadata.version
- 1.0
- metadata.domains
- Design Systems
- metadata.relatedSkills
- design-systems-slds-apply, design-systems-slds2-migrate, experience-accessibility-validate
SLDS Quality Audit
Audit Lightning Web Components for SLDS compliance and produce an automated scorecard plus a required manual review gate. Combines SLDS linter output with supplementary static analysis to catch what the linter misses.
Scope
Also valid for: auditing SLDS compliance across a project or component set, and before/after quality comparison after making changes.
Not for:
- Fixing linter violations — use
design-systems-slds2-migrateinstead - Building new components — use
design-systems-slds-applyinstead - Just running the linter — run
npx @salesforce-ux/slds-linter@latest lint .directly - Full WCAG accessibility audit — this skill checks attribute presence only (labels, alt text, focus indicators), not contrast ratios, keyboard flows, or screen reader behavior
- Framework-specific template auditing beyond
.css,.html, and.jsfiles — JSX/TSX/Vue/Svelte outputs need additional manual review
Quality Validation Process
1. Run SLDS Linter → Collect violation counts (linter's job)
2. Run Analyze Script → Check what linter doesn't cover (supplementary)
3. Agent Review → Required manual review gate
4. Score & Grade → Compute automated score + final recommendation
5. Generate Report → Produce formatted scorecardStep 1: Run SLDS Linter
Run the linter to collect baseline violation data:
npx @salesforce-ux/slds-linter@latest lint <component-path> 2>&1Count violations by rule. These feed directly into the Linter Compliance score:
| Rule | Impact |
|---|---|
slds/class-override | Breaks theming, dark mode |
slds/lwc-token-to-slds-hook | SLDS 1 technical debt |
slds/no-hardcoded-values | Breaks theming, accessibility |
Linter Compliance Score = 100 - (total_violations × 10), minimum 0.
If the linter is unavailable (no Node.js, no network access, CI sandbox restrictions): skip this step, note "Linter not run" in the report header, mark Linter Compliance as N/A, and compute the Overall score using the remaining 4 categories renormalized to 100%:
Overall (linter unavailable) = (Theming × 0.29) + (Accessibility × 0.29)
+ (CodeQuality × 0.21) + (ComponentUsage × 0.21)Step 2: Run Supplementary Analysis
Run the analyze script to catch issues the linter doesn't cover. The bundled analyzer scans .css, .html, and .js files only:
node scripts/analyze-quality.cjs <component-path>The script outputs JSON with findings organized by severity. It checks:
CSS Checks (linter-complementary)
| Check | What It Catches | Severity |
|---|---|---|
| Missing fallbacks | var(--slds-g-*) without a fallback value | Critical |
| Invented hooks (T051) | --slds-g-* tokens not found in hooks-index.json (requires --hooks-index) | Critical |
| Hook pairing | Background hooks without matching foreground hooks | Warning |
!important | Specificity overrides | Warning |
| Magic pixel values | Hardcoded px not using spacing hooks | Warning |
| High z-index | z-index values > 99 | Warning |
| Outline removal | outline: none without alternative focus style | Warning |
JS Checks
| Check | What It Catches | Severity |
|---|---|---|
| Inline style assignment | .style.*= direct property assignment | Warning |
| SLDS class manipulation | Dynamic .classList.add('slds-*') manipulation | Warning |
HTML Checks
| Check | What It Catches | Severity |
|---|---|---|
| LBC input labels | <lightning-input> without label attribute | Critical |
| Icon alt text | <lightning-icon> without alternative-text | Critical |
| Image alt text | <img> without alt | Critical |
| Heading hierarchy | Skipped heading levels (h2 to h4) | Warning |
| Positive tabindex | tabindex values other than 0 or -1 | Warning |
| Clickable divs | <div onclick> instead of <button> | Warning |
| Inline styles | style="..." attributes | Warning |
| Native elements | <input>, <button>, <select> where LBC alternatives exist | Warning |
Hook Pairing Validation
The script checks that background/foreground hooks are semantically paired:
surface-* backgrounds → on-surface-* text
surface-container-* bg → on-surface-* text
accent-* backgrounds → on-accent-* text
accent-container-* bg → on-accent-* textLimitation: Hook pairing is checked at the file level, not per-selector. A file with
surface-1in.classAandon-accent-1in.classBwould pass because both surface and accent families are present. Review pairing correctness per-selector during manual review (Step 3).
Invented Hook Detection (T051)
The script cross-references every --slds-g-* token in CSS against hooks-index.json. Any hook not found in metadata is flagged as critical — this catches the most common agent mistake of inventing hooks from naming patterns.
Step 3: Agent Manual Review
These checks require understanding the component's purpose and cannot be automated reliably. Review each and classify findings as either:
- Blocking — incorrect blueprint structure, missing required states, or semantic/interaction issues that make the component not production-ready
- Advisory — worthwhile improvements that do not block shipping on their own
| Review Area | What to Look For |
|---|---|
| Loading states | Does the component show a spinner or skeleton when fetching data? |
| Error states | Are errors surfaced to the user with actionable messages? |
| Empty states | Is there a meaningful empty state when no data exists? |
| Disabled states | Do interactive elements visually and functionally handle disabled? |
| Semantic HTML | Are <nav>, <article>, <section> used where appropriate? |
| SLDS blueprint compliance | Do cards, modals, forms follow SLDS blueprint structure? |
Manual review findings are not automated, but they do affect the final recommendation. Do not report an automated grade as the only verdict.
Step 4: Calculate Automated Scores and Final Recommendation
Component Complexity
Before scoring, classify the component to give the score context:
| Complexity | Criteria | Report Note |
|---|---|---|
| Small | 1-2 files, < 100 total lines | Score is high-confidence (small surface area) |
| Medium | 3-6 files, 100-500 total lines | Score reflects typical component |
| Large | 7+ files, 500+ total lines | Score reflects absolute issue count — even well-built large components may score lower |
Include the complexity classification in the report header. This prevents misreading a "B" on a 1000-line component vs. a "B" on a 20-line component.
Show full SKILL.md (451 more words)Show less
Automated Scoring Formula
Category Score = 100 - (critical_issues × 10) - (warnings × 3) - (info × 1)
Minimum score: 0Categories and Weights
| Category | Weight | Source |
|---|---|---|
| Linter Compliance | 30% | SLDS linter output (Step 1) |
| Theming | 20% | Script: fallbacks, hook pairing (Step 2) |
| Accessibility | 20% | Script: labels, alt text, focus (Step 2) |
| Code Quality | 15% | Script: !important, inline styles, z-index (Step 2) |
| Component Usage | 15% | Script: native elements (Step 2) plus manual semantic/blueprint review (Step 3) |
Automated Overall Score
Overall = (Linter × 0.30) + (Theming × 0.20) + (Accessibility × 0.20)
+ (CodeQuality × 0.15) + (ComponentUsage × 0.15)Automated Grade Thresholds
| Score | Grade | Meaning |
|---|---|---|
| 90-100 | A | Excellent automated score |
| 80-89 | B | Good automated score |
| 70-79 | C | Acceptable automated score |
| 60-69 | D | Weak automated score |
| 0-59 | F | Failing automated score |
Manual Review Gate
After computing the automated score, apply the manual review outcome:
| Gate | When to use it | Effect on final recommendation |
|---|---|---|
| Pass | No manual findings | Final recommendation can follow the automated score |
| Advisory | Only non-blocking manual findings | Final recommendation can be "Ready with follow-ups" at best |
| Blocking | One or more blocking manual findings | Final recommendation is not ready for production, regardless of automated grade |
Final Recommendation Rules
Use both the automated score and the manual review gate:
| Final Recommendation | Conditions |
|---|---|
| Ready for production | Automated grade A/B, no critical findings, manual gate = Pass |
| Ready with follow-ups | Automated grade A/B, no critical findings, manual gate = Advisory |
| Needs work | Any critical findings, automated grade C/D, or manual gate = Blocking |
| Failing | Automated grade F |
Step 5: Generate Quality Report
Use the template in report-format.md to produce the final report. Default to the compact format for initial output and expand sections on request.
The report includes:
- Executive summary with automated grade and final recommendation
- Manual review gate outcome (
Pass,Advisory, orBlocking) - Scores by category with visual indicators
- Detailed findings organized by severity
- Specific code locations and recommendations
- Checklist of required actions
Quick Validation Mode
For a rapid quality check without full analysis:
- Run linter:
npx @salesforce-ux/slds-linter@latest lint <path> - Count violations by type
- Report summary only
Quick Quality Check: <component-name>
─────────────────────────────────────
Linter Violations:
• Class Override: 0
• Deprecated Tokens: 3
• Hardcoded Values: 5
Quick Automated Grade: C (estimated)
Run full validation for detailed report.Edge Cases and False Positives
| Situation | Guidance |
|---|---|
| Headless components (JS-only, no HTML) | Skip HTML checks; score only CSS + linter categories |
| Wrapper/container components | May legitimately have minimal CSS; don't penalize low hook usage |
| Intentional native elements | <button> inside custom SLDS blueprints is correct; suppress C002 if inside an slds-* blueprint structure |
| Components outside LEX | LWR/Experience Cloud components may not use Lightning Base Components; note context in report |
| Test/demo components | Lower the bar — note in report but don't block on warnings |
If a check produces a false positive, note it in the report as "suppressed" with justification rather than silently dropping it.
References
- Quality Checks - Complete list of all quality checks with detection patterns
- Report Format - Quality report template and formatting guide
- Analyze Script - Automated analysis for linter-complementary checks
- design-systems-slds2-migrate skill - How to fix linter violations
- design-systems-slds-apply skill - Guide for building new components with correct patterns
© forcedotcom, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files (scripts, references) in skills/design-systems-slds-validate of forcedotcom/sf-skills.
- SKILL.md
- references/quality-checks.md
- references/report-format.md
- scripts/analyze-quality.cjs
Open the folder on GitHubat commit e5164d9
Compare with similar skills
Design Systems Slds Validate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Systems Slds Validate this skillforcedotcom/sf-skills | 1.1k | — | ~3.1k | Automated safety check: Pass | Apache-2.0 | |
| Color Auditrome-os/rome | 737 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill | 135 | — | ~3k | Automated safety check: Pass | MIT | |
| UI Design Systemtry-works/role-model | 118 | — | ~5k | Automated safety check: Pass | MIT | |
| Apply Aestheticplugin87/ux-ui-agent-skills | 1.6k | — | ~597 | Automated safety check: Pass | MIT | |
| Brand Kit Design Tokensplugin87/ux-ui-agent-skills | 1.6k | — | ~809 | Automated safety check: Pass | MIT |
Similar skills
Material Design 3 UI/UX Guide
skydashnet/material-design-3-ui-skill
Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
Apply Aesthetic
plugin87/ux-ui-agent-skills
Applies a chosen visual direction, an archetype or one of 138 named design systems, by remapping design tokens, then checks contrast before it finishes.
Brand Kit Design Tokens
plugin87/ux-ui-agent-skills
Builds a from-scratch brand design system as three-tier DTCG tokens plus one theme.css with light and dark modes, checked against WCAG contrast rules.
Design System Alignment
Owl-Listener/designpowers
A skill your agent uses when working with or building design systems — tokens, components, naming conventions, theming, or pattern libraries — ensures consistency, accessibility compliance, and…
More from forcedotcom/sf-skills
All 251 skills in this repoAgentforce Architecture Analyze
forcedotcom/sf-skills
Declared architecture snapshot for one Agentforce agent: planner, topics, actions, flows, Apex, prompt templates, and NGA plugins.
Agentforce D360 Analyze
forcedotcom/sf-skills
Data Cloud 360° view of a single Agentforce session. An agent skill from forcedotcom/sf-skills.
Automation Sandbox Post Copy Configure
forcedotcom/sf-skills
Apply a Salesforce sandbox post-copy automation JSON config against a target org.
Automation Sandbox Post Copy Configure
forcedotcom/sf-skills
Apply a Salesforce sandbox post-copy automation JSON config against a target org.
Design Systems Slds Apply
forcedotcom/sf-skills
Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons.
Experience Lwc Generate
forcedotcom/sf-skills
Lightning Web Components with PICKLES methodology and 165-point scoring.
Related
Works with
Categories
Questions about Design Systems Slds Validate
What does Design Systems Slds Validate do?
Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report. Design Systems Slds Validate is an agent skill from forcedotcom/sf-skills. Audit Lightning Web Components for SLDS design-system compliance and produce a scored quality report.
When should I use Design Systems Slds Validate?
Design Systems Slds Validate fits situations like: asked to score my components SLDS; SLDS quality report; audit SLDS compliance; how good is my SLDS.
How do I install Design Systems Slds Validate in Claude Code?
Run `npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a claude-code`. Or copy the skill folder (skills/design-systems-slds-validate in forcedotcom/sf-skills) into .claude/skills/design-systems-slds-validate in your project. Claude Code loads it when a task matches its description.
How do I install Design Systems Slds Validate in Codex?
Run `npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a codex`. Or copy the skill folder (skills/design-systems-slds-validate in forcedotcom/sf-skills) into .agents/skills/design-systems-slds-validate in your project. Codex loads it when a task matches its description.
Can I use Design Systems Slds Validate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add forcedotcom/sf-skills --skill design-systems-slds-validate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-systems-slds-validate, .gemini/skills/design-systems-slds-validate, .github/skills/design-systems-slds-validate and .opencode/skills/design-systems-slds-validate in your project.
What does Design Systems Slds Validate need to run?
Going by SKILL.md and its folder, Design Systems Slds Validate needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx and node). Our summary lists: Node.js.
Does Design Systems Slds Validate access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Design Systems Slds Validate safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Design Systems Slds Validate use?
Design Systems Slds Validate is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design Systems Slds Validate use?
About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.4k tokens, read only when the agent opens those files.
What are the alternatives to Design Systems Slds Validate?
Skills that share tags, products or a category with Design Systems Slds Validate: Color Audit (rome-os/rome, 737 stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 135 stars), UI Design System (try-works/role-model, 118 stars) and Apply Aesthetic (plugin87/ux-ui-agent-skills, 1.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Systems Slds Validate?
forcedotcom (a GitHub organization) maintains it in forcedotcom/sf-skills, which has 1,065 GitHub stars. The repository holds 251 skills in this directory. The repository was last updated on October 7, 2026.
Source: forcedotcom/sf-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.