sf-lwc
Lightning Web Components with PICKLES methodology and 165-point scoring. TRIGGER when: user creates/edits LWC components, touches lwc//.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use sf-apex), Aura components, or Visualforce.
- Installs
- 1.5K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/jaganpro/sf-skills --skill sf-lwc- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads sf-lwc automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
sf-lwc: Lightning Web Components Development
Use this skill when the user needs Lightning Web Components: LWC bundles, wire patterns, Apex/GraphQL integration, SLDS 2 styling, accessibility, performance work, or Jest unit tests.
When This Skill Owns the Task
Use sf-lwc when the work involves:
lwc/**/*.js,.html,.css,.js-meta.xml- component scaffolding and bundle design
- wire service, Apex integration, GraphQL integration
- SLDS 2, dark mode, and accessibility work
- Jest unit tests for LWC
Delegate elsewhere when the user is:
- writing Apex controllers or business logic first → sf-apex
- building Flow XML rather than an LWC screen component → sf-flow
- deploying metadata → sf-deploy
Required Context to Gather First
Ask for or infer:
- component purpose and target surface
- data source: LDS, Apex, GraphQL, LMS, or external system via Apex
- whether the user needs tests
- whether the component must run in Flow, App Builder, Experience Cloud, or dashboard contexts
- accessibility and styling expectations
Recommended Workflow
1. Choose the right architecture
Use the PICKLES mindset:
- prototype
- integrate the right data source
- compose component boundaries
- define interaction model
- use platform libraries
- optimize execution
- enforce security
2. Choose the right data access pattern
| Need | Default pattern |
|---|---|
| single-record UI | LDS / getRecord |
| simple CRUD form | base record form components |
| complex server query | Apex @AuraEnabled(cacheable=true) |
| related graph data | GraphQL wire adapter |
| cross-DOM communication | Lightning Message Service |
3. Start from an asset when useful
Use provided assets for:
- basic component bundles
- datatables
- modal patterns
- Flow screen components
- GraphQL components
- LMS message channels
- Jest tests
- TypeScript-enabled components
4. Validate for frontend quality
Check:
- accessibility
- SLDS 2 / dark mode compliance
- event contracts
- performance / rerender safety
- Jest coverage when required
5. Hand off supporting backend or deploy work
Use:
- sf-apex for controllers / services
- sf-deploy for deployment
- sf-testing only for Apex-side test loops, not Jest
High-Signal Rules
- prefer platform base components over reinventing controls
- use
@wirefor reactive read-only use cases; imperative calls for explicit actions and DML paths - do not introduce inaccessible custom UI
- avoid hardcoded colors; use SLDS 2-compatible styling hooks / variables
- avoid rerender loops in
renderedCallback() - keep component communication patterns explicit and minimal
Output Format
When finishing, report in this order:
- Component(s) created or updated
- Data access pattern chosen
- Files changed
- Accessibility / styling / testing notes
- Next implementation or deploy step
Suggested shape:
LWC work: <summary>
Pattern: <wire / apex / graphql / lms / flow-screen>
Files: <paths>
Quality: <a11y, SLDS2, dark mode, Jest>
Next step: <deploy, add controller, or run tests>
Local Development Server
Preview LWC components locally with hot reload — no deployment needed:
# Preview LWC components in isolation
sf lightning dev component --target-org <alias>
# Preview a Lightning Experience app locally
sf lightning dev app --target-org <alias>
# Preview an Experience Cloud site locally
sf lightning dev site --target-org <alias>
In current SF CLI releases, these Local Dev commands are installed just-in-time the first time you run them. They are long-running processes that open a browser with live preview. Changes to .js, .html, and .css files auto-reload instantly. Requires an active org connection for data and Apex callouts.
Cross-Skill Integration
| Need | Delegate to | Reason |
|---|---|---|
| Apex controller or service | sf-apex | backend logic |
| embed in Flow screens | sf-flow | declarative orchestration |
| deploy component bundle | sf-deploy | org rollout |
| create metadata like message channels | sf-metadata | supporting metadata |
Reference Map
Start here
- references/component-patterns.md
- references/slds-design-guide.md
- references/lwc-best-practices.md
- references/scoring-and-testing.md
- references/jest-testing.md
Accessibility / performance / state
- references/accessibility-guide.md
- references/performance-guide.md
- references/state-management.md
- references/template-anti-patterns.md
Integration / advanced features
- references/lms-guide.md
- references/flow-integration-guide.md
- references/advanced-features.md
- references/async-notification-patterns.md
- references/triangle-pattern.md
- assets/
Score Guide
| Score | Meaning |
|---|---|
| 150+ | production-ready LWC bundle |
| 125–149 | strong component with minor polish left |
| 100–124 | functional but review recommended |
| < 100 | needs significant improvement |
FAQ
What does the sf-lwc skill do?
Lightning Web Components with PICKLES methodology and 165-point scoring. TRIGGER when: user creates/edits LWC components, touches lwc//.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use sf-apex), Aura components, or Visualforce.
How do I install sf-lwc?
Run npx skills add https://github.com/jaganpro/sf-skills --skill sf-lwc in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sf-lwc/ (personal) or .claude/skills/sf-lwc/ (project).
Which AI agents can use sf-lwc?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is sf-lwc safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains sf-lwc?
It is published by jaganpro in jaganpro/sf-skills. It has 1,543 recorded installs.
More from jaganpro/sf-skills
sf-apex
jaganpro/sf-skills
Generates and reviews Salesforce Apex code with 150-point scoring. TRIGGER when: user writes, reviews, or fixes Apex classes, triggers, test classes, batch/queueable/schedulable jobs, or touches .cls/.trigger files. DO NOT TRIGGER when: LWC JavaScript (use sf-lwc), Flow XML (use sf-flow), SOQL-only queries (use sf-soql), or non-Salesforce code.
sf-flow
jaganpro/sf-skills
Creates and validates Salesforce Flows with 110-point scoring. TRIGGER when: user builds or edits record-triggered, screen, autolaunched, or scheduled flows, or touches .flow-meta.xml files. DO NOT TRIGGER when: Apex automation (use sf-apex), process builder migration questions only, or non-Flow declarative config (use sf-metadata).
sf-metadata
jaganpro/sf-skills
Salesforce metadata generation and querying with 120-point scoring. TRIGGER when: user creates custom objects, fields, validation rules, or touches .object-meta.xml, .field-meta.xml, .profile-meta.xml files. DO NOT TRIGGER when: permission set analysis (use sf-permissions), deploying metadata (use sf-deploy), or Flow XML (use sf-flow).
sf-soql
jaganpro/sf-skills
SOQL query generation, optimization, and analysis with 100-point scoring. TRIGGER when: user writes, optimizes, or debugs SOQL/SOSL queries, touches .soql files, or asks about relationship queries, aggregates, or query performance. DO NOT TRIGGER when: bulk data operations (use sf-data), Apex DML logic (use sf-apex), or report/dashboard queries.
sf-debug
jaganpro/sf-skills
Salesforce debug log analysis and troubleshooting with 100-point scoring. TRIGGER when: user analyzes debug logs, hits governor limits, reads stack traces, or touches .log files from Salesforce orgs. DO NOT TRIGGER when: running Apex tests (use sf-testing), fixing Apex code (use sf-apex), or Agentforce session tracing (use sf-ai-agentforce-observability).
sf-deploy
jaganpro/sf-skills
Salesforce DevOps automation using sf CLI v2. TRIGGER when: user deploys metadata, creates/manages scratch orgs or sandboxes, sets up CI/CD pipelines, or troubleshoots deployment errors with sf project deploy. DO NOT TRIGGER when: writing Apex/LWC code (use sf-apex/sf-lwc), creating metadata XML (use sf-metadata), or querying org data (use sf-data).
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.