Applying Slds
If you're building on Salesforce and need to apply their design system correctly, this teaches Claude how to navigate SLDS v2's massive catalog of 1,732 icons, 1,147 utility classes, 523 styling hooks, and 85 blueprints. It's specifically updated for the modern token syntax, leaving behind the old lwc and slds modifier patterns. The companion validation skill only checks CSS, HTML, and JS files, so if you're working in JSX or TSX you'll need to eyeball some things yourself. Worth having if you're tired of hunting through SLDS docs or getting the markup wrong for Lightning components.
- skills.sh installs
- 1K
- GitHub stars
- 1.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add forcedotcom/sf-skills --skill applying-slds --agent claude-codeInstalls into .claude/skills of the current project.
Files
If you're building on Salesforce and need to apply their design system correctly, this teaches Claude how to navigate SLDS v2's massive catalog of 1,732 icons, 1,147 utility classes, 523 styling hooks, and 85 blueprints. It's specifically updated for the modern token syntax, leaving behind the old lwc and slds modifier patterns. The companion validation skill only checks CSS, HTML, and JS files, so if you're working in JSX or TSX you'll need to eyeball some things yourself. Worth having if you're tired of hunting through SLDS docs or getting the markup wrong for Lightning components.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/forcedotcom/sf-skills
- Categories
- Frontend Development, DevOps & CI/CD, Code Review & Quality
- First seen
- Jul 14, 2026
More from forcedotcom/sf-skills
All 158- Validating Slds987
- Investigating Agentforce Architecture903
- Investigating Agentforce D360889
- Managing Managed Event Subscription887
- Platform Apex Generate7.4K
- Platform Apex Test Generate7.4K
- Platform Apex Test Run7.2K
- Platform Apex Logs Debug7.1K
- Platform Soql Query7.1K
- Platform Metadata Deploy7K
- Platform Metadata Retrieve6.9K
- Platform Custom Field Generate6.8K
- Platform Docs Get6.8K
- Platform Permission Set Generate6.8K
- Dx Code Analyzer Run6.7K
- Platform Custom Object Generate6.6K
- Automation Flow Generate6.5K
- Experience Lwc Generate6.4K
- Platform Validation Rule Generate6.3K
- Platform Data Manage6.3K
- Dx Org Manage6.2K
- Platform Flexipage Generate6.2K
- Platform Metadata Api Context Get6.2K
- Platform Sharing Rules Generate6.2K
Recommended
More Frontend Development
swiss-designzeke/swiss-design-skillApply a Swiss International Style design system using Tailwind CSS. Use when asked to style a webpage, clean up a UI, apply a design system, make something look999skills.sh installs
a11y-auditalirezarezvani/claude-skillsAccessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML cod998skills.sh installs
server-side-renderingpatternsdev/skillsTeaches server-side rendering (SSR) for React applications. Use when you need faster initial page loads, better SEO, or dynamic per-request HTML generation.997skills.sh installs
tailwindcss-developmentlaravel/boostAlways invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids992skills.sh installs
d3-vizchrisvoncsefalvay/claude-d3js-skillCreating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations987skills.sh installs