Agent skill

Experience Lwc Generate

by forcedotcom in forcedotcom/sf-skills

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

Apache-2.0Auto-check passedTesting & QA

Install Experience Lwc Generate

skills CLI
$ npx skills add forcedotcom/sf-skills --skill experience-lwc-generate -a claude-code

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

GitHub CLI
$ gh skill install forcedotcom/sf-skills experience-lwc-generate --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/forcedotcom/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/experience-lwc-generate .claude/skills/experience-lwc-generate && 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/

Facts

Skill name
experience-lwc-generate
GitHub stars
1.1k
Token cost
~2.4k tokens
SKILL.md length
713 words
Files
71 (incl. scripts, references, assets)
Skills in repo
251
Repo updated
First seen
Licence
Apache-2.0

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 → …
  • The user creates
  • 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

What it does

Experience Lwc Generate is an agent skill from forcedotcom/sf-skills. Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. 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 platform-apex-generate), Aura components, or Visualforce.

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

It sits in Testing & QA, covering Unit testing. It works with Salesforce, Jest and GraphQL. 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

  • The user creates
  • Edits LWC components
  • Builds wire service patterns
  • Writes Jest tests for LWC

Example prompts

  • “/experience-lwc-generate”

Requirements

  • Node.js

Workflow steps

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

  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

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, from the files we listed), which the agent can run.

    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

Experience Lwc Generate loads about 2.4k tokens when it runs, and up to ~277k if it reads all its reference files. Until then it costs about 118 tokens; SKILL.md has 713 words of instructions outside code blocks.

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

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). 713 words, ~2,434 tokens.

Download SKILL.mdSave it as .claude/skills/experience-lwc-generate/SKILL.md (or your agent's skills folder). This skill also uses 70 other files; get the full folder from GitHub.
name
experience-lwc-generate
description
Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. 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 platform-apex-generate), Aura components, or Visualforce.
metadata.version
1.1
metadata.domains
Experience
metadata.minApiVersion
66.0
metadata.relatedSkills
agentforce-generate, automation-flow-generate, integration-connectivity-generate, platform-apex-generate, platform-apex-test-run, platform-metadata-deploy

experience-lwc-generate: 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 experience-lwc-generate 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:


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

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
NeedDefault pattern
single-record UILDS / getRecord
simple CRUD formbase record form components
complex server queryApex @AuraEnabled(cacheable=true)
related graph dataGraphQL wire adapter
cross-DOM communicationLightning 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:


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:

  1. Component(s) created or updated
  2. Data access pattern chosen
  3. Files changed
  4. Accessibility / styling / testing notes
  5. 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. Run the commands in scripts/local-dev-preview.sh to start a local dev session for a component, app, or Experience Cloud site.

Local Dev commands install just-in-time on first run. 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.


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

Cross-Skill Integration

NeedDelegate toReason
Apex controller or serviceplatform-apex-generatebackend logic
embed in Flow screensautomation-flow-generatedeclarative orchestration
deploy component bundleplatform-metadata-deployorg rollout
create supporting metadata (message channels, objects)platform-metadata-deploymetadata deployment

Reference File Index

Start here
Accessibility / performance / state
Integration / advanced features
Asset templates
Scripts

Score Guide

ScoreMeaning
150+production-ready LWC bundle
125–149strong component with minor polish left
100–124functional but review recommended
< 100needs significant improvement

© 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 70 other files (scripts, references, assets) in skills/experience-lwc-generate of forcedotcom/sf-skills.

  • SKILL.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
  • assets/form-component/formComponent.js
  • … and 56 more

Open the folder on GitHubat commit e5164d9

Compare with similar skills

Experience Lwc Generate 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.

Experience Lwc Generate compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Experience Lwc Generate this skillforcedotcom/sf-skills1.1k—~2.4kAutomated safety check: PassApache-2.0
Sf LwcJaganpro/sf-skills424—~1.6kAutomated safety check: PassMIT
Jest Testing PatternsChrisWiles/claude-code-showcase6.1k7 repos~1.5kAutomated safety check: PassNone
Handsontable Unit Testinghandsontable/handsontable22k—~1.2kAutomated safety check: PassCustom licence
Workflows Management Jest Testingelastic/kibana21k—~1.3kAutomated safety check: PassCustom licence
React Testingaffaan-m/ECC276k1 repos~3.3kAutomated safety check: PassMIT

Similar skills

  • Sf Lwc

    Jaganpro/sf-skills

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

    424 GitHub stars~1.6k tokensUpdated 5 mo 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
  • 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
  • Official

    Use the shared TestProvider in workflowsmanagement Jest tests instead of hand-wiring KibanaContextProvider, QueryClientProvider, WorkflowsContextProvider, MemoryRouter, I18nProvider, and the Redux…

    21k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed
  • React Testing

    affaan-m/ECC

    React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…

    276k GitHub starsUsed in 1 repo~3.3k tokens
    Testing & QAAuto-check passed
  • Official

    A skill your agent uses when writing a Storybook story for a component gated on a feature flag — boolean flags or multivariate/experiment-arm variants.

    40k GitHub stars~1.1k tokensUpdated today
    Testing & QAAuto-check passed

More from forcedotcom/sf-skills

All 251 skills in this repo
  • Agentforce Architecture Analyze

    forcedotcom/sf-skills

    Declared architecture snapshot for one Agentforce agent: planner, topics, actions, flows, Apex, prompt templates, and NGA plugins.

    1.1k GitHub stars~4.5k tokensUpdated yesterday
    Auto-check passed
  • Agentforce D360 Analyze

    forcedotcom/sf-skills

    Data Cloud 360° view of a single Agentforce session. An agent skill from forcedotcom/sf-skills.

    1.1k GitHub stars~3.4k tokensUpdated yesterday
    Auto-check passed
  • Apply a Salesforce sandbox post-copy automation JSON config against a target org.

    1.1k GitHub stars~5.3k tokensUpdated yesterday
    Auto-check: notes
  • Apply a Salesforce sandbox post-copy automation JSON config against a target org.

    1.1k GitHub stars~5.4k tokensUpdated yesterday
    Auto-check: notes
  • Design Systems Slds Apply

    forcedotcom/sf-skills

    Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons.

    1.1k GitHub stars~3.7k tokensUpdated yesterday
    Auto-check passed
  • Experience Lwc Legacy Migrate

    forcedotcom/sf-skills

    Migrate legacy Salesforce UI stacks onto modern LWC — Aura → LWC conversion completeness verification and Lightning Out Beta → Lightning Out 2.0 host-page migration.

    1.1k GitHub stars~2.6k tokensUpdated yesterday
    Auto-check passed

Questions about Experience Lwc Generate

What does Experience Lwc Generate do?

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

When should I use Experience Lwc Generate?

Experience Lwc Generate fits situations like: the user creates; edits LWC components; builds wire service patterns; writes Jest tests for LWC.

How do I install Experience Lwc Generate in Claude Code?

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

How do I install Experience Lwc Generate in Codex?

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

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

What does Experience Lwc Generate need to run?

Going by SKILL.md and its folder, Experience Lwc Generate needs JavaScript for the scripts in its folder. Our summary lists: Node.js.

Does Experience Lwc Generate 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 Experience Lwc Generate 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 Experience Lwc Generate use?

Experience Lwc Generate 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 Experience Lwc Generate use?

About 2.4k tokens (SKILL.md is roughly 9.7k 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 Experience Lwc Generate?

Skills that share tags, products or a category with Experience Lwc Generate: Sf Lwc (Jaganpro/sf-skills, 424 stars), Jest Testing Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), Handsontable Unit Testing (handsontable/handsontable, 22k stars) and Workflows Management Jest Testing (elastic/kibana, 21k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Experience Lwc Generate?

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.