Agent skill

Sf Lwc

Lightning Web Components with PICKLES methodology and 165-point scoring.

MITAuto-check passedTesting & QA

Install Sf Lwc

skills CLI

$ npx skills add Jaganpro/sf-skills --skill sf-lwc -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install Jaganpro/sf-skills sf-lwc --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/sf-lwc .claude/skills/sf-lwc && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "sf-lwc" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc into .claude/skills/sf-lwc/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-lwc", 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

$skill-installer install https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc

Type 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.

skills CLI

$ npx skills add Jaganpro/sf-skills --skill sf-lwc -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Jaganpro/sf-skills sf-lwc --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/sf-lwc .agents/skills/sf-lwc && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "sf-lwc" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc into .agents/skills/sf-lwc/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-lwc", 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.

skills CLI

$ npx skills add Jaganpro/sf-skills --skill sf-lwc -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Jaganpro/sf-skills sf-lwc --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/sf-lwc .cursor/skills/sf-lwc && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "sf-lwc" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc into .cursor/skills/sf-lwc/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-lwc", 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

$ gemini skills install https://github.com/Jaganpro/sf-skills.git --path skills/sf-lwc

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Jaganpro/sf-skills --skill sf-lwc -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Jaganpro/sf-skills sf-lwc --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/sf-lwc .gemini/skills/sf-lwc && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "sf-lwc" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc into .gemini/skills/sf-lwc/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-lwc", 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.

GitHub CLI

$ gh skill install Jaganpro/sf-skills sf-lwc

Installs 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).

skills CLI

$ npx skills add Jaganpro/sf-skills --skill sf-lwc -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/sf-lwc .github/skills/sf-lwc && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "sf-lwc" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc into .github/skills/sf-lwc/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-lwc", 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.

skills CLI

$ npx skills add Jaganpro/sf-skills --skill sf-lwc -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Jaganpro/sf-skills sf-lwc --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/sf-lwc .opencode/skills/sf-lwc && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "sf-lwc" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-lwc into .opencode/skills/sf-lwc/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-lwc", 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: sf-lwc
GitHub stars: 424
Token cost: ~1.6k tokens
SKILL.md length: 515 words
Files: 72 (incl. references, assets)
Skills in repo: 36
Repo updated: Apr 27, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Lightning Web Components with PICKLES methodology and 165-point scoring.

Works in 5 steps: Choose the right architecture → Choose the right data access pattern → Start from an asset when useful → …
: user creates/edits LWC components
SKILL.md covers When This Skill Owns the Task, Required Context to Gather First, Recommended Workflow and High-Signal Rules, plus 5 more sections
Runs JavaScript scripts from its folder; calls sf

What it does

Sf Lwc is an agent skill from Jaganpro/sf-skills. 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.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 77 other files, including reference files and assets (for example `CREDITS.md`, `README.md` and `assets/basic-component/basicComponent.js`).

It sits in Testing & QA, covering Unit testing. It works with Salesforce, Jest and GraphQL. The repository describes itself as: [ARCHIVED — migrated to forcedotcom/afv-library] Salesforce Skills for Agentic Coding Tools — Apex, Flow, LWC, SOQL, Agentforce, Data Cloud, OmniStudio. Read-only archive; active… The licence is MIT.

When your agent uses it

: user creates/edits LWC components
Touches lwc//.js
.js-meta.xml files
Asks about wire service

Example prompts

“/sf-lwc”

Requirements

Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Choose the right architecture
Choose the right data access pattern
Start from an asset when useful
Validate for frontend quality
Hand off supporting backend or deploy work

What it can do on your machine

Read from SKILL.md and the folder at commit 53c9956. 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 script files (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
- sf
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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

Sf Lwc loads about 1.6k tokens when it runs, and up to ~276k if it reads all its reference files. Until then it costs about 79 tokens; SKILL.md has 515 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~79
When it runs · the whole SKILL.md, loaded when a task matches: ~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~276k

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from Jaganpro/sf-skills at commit 53c9956, republished under its MIT licence (© Jaganpro). 515 words, ~1,560 tokens.

Download SKILL.mdSave it as .claude/skills/sf-lwc/SKILL.md (or your agent's skills folder). This skill also uses 71 other files; get the full folder from GitHub.

name: sf-lwc
description: 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.
license: MIT
metadata.version: 2.1.0
metadata.author: Jag Valaiyapathy
metadata.scoring: 165 points across 8 categories (SLDS 2 + Dark Mode compliant)

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

Show full SKILL.md (229 more words)Show less

High-Signal Rules

prefer platform base components over reinventing controls
use @wire for 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:

text

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:

bash

# 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

Accessibility / performance / state

Integration / advanced features

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

Files

SKILL.md and 71 other files (references, assets) in skills/sf-lwc of Jaganpro/sf-skills.

SKILL.md
CREDITS.md
README.md
assets/apex-controller/LwcController.cls
assets/basic-component/basicComponent.css
assets/basic-component/basicComponent.html
assets/basic-component/basicComponent.js
assets/basic-component/basicComponent.js-meta.xml
assets/datatable-component/datatableComponent.html
assets/datatable-component/datatableComponent.js
assets/flow-screen-component/flowScreenComponent.css
assets/flow-screen-component/flowScreenComponent.html
assets/flow-screen-component/flowScreenComponent.js
assets/flow-screen-component/flowScreenComponent.js-meta.xml
assets/form-component/formComponent.html
… and 57 more

Open the folder on GitHubat commit 53c9956

Compare with similar skills

Sf Lwc 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.

Sf Lwc compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Sf Lwc this skillJaganpro/sf-skills	424	—	~1.6k	Automated safety check: Pass	MIT	5 mo ago
Experience Lwc Generateforcedotcom/sf-skills	1.1k	—	~2.4k	Automated safety check: Pass	Apache-2.0	2 days ago
Experience Lwc Accessibility Jest Runforcedotcom/sf-skills	1.1k	—	~1.5k	Automated safety check: Pass	Apache-2.0	2 days ago
Jest Testing PatternsChrisWiles/claude-code-showcase	6.1k	7 repos	~1.5k	Automated safety check: Pass	None	9 mo ago
Platform Apex Test Runforcedotcom/sf-skills	1.1k	—	~1.9k	Automated safety check: Pass	Apache-2.0	2 days ago
Experience Lwc Typescript Migrateforcedotcom/sf-skills	1.1k	—	~2.1k	Automated safety check: Pass	Apache-2.0	2 days ago

Similar skills

Experience Lwc Generate
forcedotcom/sf-skills
Lightning Web Components with PICKLES methodology and 165-point scoring.
1.1k GitHub stars~2.4k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Experience Lwc Accessibility Jest Run
forcedotcom/sf-skills
Use ALWAYS when running Sa11y accessibility Jest tests for an LWC — locally before pushing, producing the command(s), running one file vs a suite, selecting tests by naming convention, saving…
1.1k GitHub stars~1.5k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Jest Testing Patterns
ChrisWiles/claude-code-showcase
Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.
6.1k GitHub starsUsed in 7 repos~1.5k tokens
Testing & QAAuto-check passed
Platform Apex Test Run
forcedotcom/sf-skills
Apex test execution, coverage analysis, and test-fix loops with 120-point scoring.
1.1k GitHub stars~1.9k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Experience Lwc Typescript Migrate
forcedotcom/sf-skills
A skill your agent uses when converting an existing JavaScript Lightning Web Component (.js, .html, .css) to TypeScript with full type annotations and a matching .d.ts file that exposes only the…
1.1k GitHub stars~2.1k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Handsontable Unit Testing
handsontable/handsontable
Conventions for Handsontable's Jest unit and TypeScript type tests: where files go, how to run them, mocking limits and when to write an E2E test instead.
22k GitHub stars~1.2k tokensUpdated today
Testing & QAAuto-check passed

Questions about Sf Lwc

What does Sf Lwc do?

Lightning Web Components with PICKLES methodology and 165-point scoring. Sf Lwc is an agent skill from Jaganpro/sf-skills. Lightning Web Components with PICKLES methodology and 165-point scoring.

When should I use Sf Lwc?

Sf Lwc fits situations like: : user creates/edits LWC components; touches lwc//.js; .js-meta.xml files; asks about wire service.

How do I install Sf Lwc in Claude Code?

Run `npx skills add Jaganpro/sf-skills --skill sf-lwc -a claude-code`. Or copy the skill folder (skills/sf-lwc in Jaganpro/sf-skills) into .claude/skills/sf-lwc in your project. Claude Code loads it when a task matches its description.

How do I install Sf Lwc in Codex?

Run `npx skills add Jaganpro/sf-skills --skill sf-lwc -a codex`. Or copy the skill folder (skills/sf-lwc in Jaganpro/sf-skills) into .agents/skills/sf-lwc in your project. Codex loads it when a task matches its description.

Can I use Sf Lwc 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 Jaganpro/sf-skills --skill sf-lwc -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sf-lwc, .gemini/skills/sf-lwc, .github/skills/sf-lwc and .opencode/skills/sf-lwc in your project.

What does Sf Lwc need to run?

Going by SKILL.md and its folder, Sf Lwc needs JavaScript for the scripts in its folder and the command-line tools its instructions call (sf). Our summary lists: Node.js.

Does Sf Lwc access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Sf Lwc 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. Review the folder before installing.

What licence does Sf Lwc use?

Sf Lwc is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Sf Lwc use?

About 1.6k tokens (SKILL.md is roughly 6.2k 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 275k tokens, read only when the agent opens those files.

What are the alternatives to Sf Lwc?

Skills that share tags, products or a category with Sf Lwc: Experience Lwc Generate (forcedotcom/sf-skills, 1.1k stars), Experience Lwc Accessibility Jest Run (forcedotcom/sf-skills, 1.1k stars), Jest Testing Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and Platform Apex Test Run (forcedotcom/sf-skills, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sf Lwc?

Jaganpro (a GitHub user) maintains it in Jaganpro/sf-skills, which has 424 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on April 27, 2026.

Source: Jaganpro/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.

Install Sf Lwc

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

sf-lwc: Lightning Web Components Development

When This Skill Owns the Task

Required Context to Gather First

Recommended Workflow

1. Choose the right architecture

2. Choose the right data access pattern

3. Start from an asset when useful

4. Validate for frontend quality

5. Hand off supporting backend or deploy work

High-Signal Rules

Output Format

Local Development Server

Cross-Skill Integration

Reference Map

Start here

Accessibility / performance / state

Integration / advanced features

Score Guide

Files

Compare with similar skills

Similar skills

More from Jaganpro/sf-skills

Related

Questions about Sf Lwc