Skip to content
experience-lwc-generate logo

Experience Lwc Generate

experience-lwc-generate

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.

forcedotcom/sf-skills5.9Kinstalls1.1Kstars

SKILL.md

Full skill instructions

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

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

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:

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.


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

More skills from forcedotcom

platform-apex-logs-debug logo
forcedotcom/sf-skills

platform-apex-logs-debug

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 platform-apex-test-run), generating or fixing Apex code (use platform-apex-generate), or Agentforce session tracing (use agentforce-observe).

1.1K 6.4K
View
platform-soql-query logo
forcedotcom/sf-skills

platform-soql-query

SOQL query generation, optimization, and analysis with 100-point scoring. Use this skill when the user needs SOQL/SOSL authoring or optimization: natural-language-to-query generation, relationship queries, aggregates, query-plan analysis, and performance or safety improvements for Salesforce queries. 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 platform-data-manage), Apex DML logic (use platform-apex-generate), or report/dashboard queries.

1.1K 6.3K
View
platform-metadata-deploy logo
forcedotcom/sf-skills

platform-metadata-deploy

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 code (use platform-apex-generate), building LWC components (use experience-lwc-generate), creating metadata definitions (use platform-custom-object-generate or platform-custom-field-generate), or querying org data (use platform-data-manage).

1.1K 6.3K
View
platform-metadata-retrieve logo
forcedotcom/sf-skills

platform-metadata-retrieve

ALWAYS USE THIS SKILL to retrieve metadata from an org to your local project using the sf project retrieve start command. Supports multiple retrieval modes: retrieve all remote changes, retrieve by source directory, retrieve by metadata type with wildcards, retrieve by manifest (package.xml), or retrieve by package name. Use when the user asks to retrieve, pull, sync, or download metadata, Apex classes, custom objects, or org changes. Supports source format (default) or metadata format (ZIP). DO NOT TRIGGER for deploying metadata (use platform-metadata-deploy skill), listing metadata, or generating package.xml. NEVER use MCP tools - always use this skill and the Bash tool with sf project retrieve start.

1.1K 6.3K
View
platform-custom-field-generate logo
forcedotcom/sf-skills

platform-custom-field-generate

Use this skill when users need to create, generate, or validate Salesforce Custom Field metadata. Trigger when users mention custom fields, field types, Roll-up Summary fields, Master-Detail relationships, Lookup relationships, formula fields, picklists, dependent (controlling) picklists, referencing a value set from a field, or scoping/limiting picklist values for a specific record type. Also use when users encounter field deployment errors, especially around Roll-up Summary format, Master-Detail constraints, formula issues, or a record type that won't deploy without a business process. Use this skill for custom field metadata work, field generation, and field troubleshooting. DO NOT TRIGGER for creating or customizing the value set itself — defining a new GlobalValueSet, or modifying a StandardValueSet catalog like Industry or Lead Source — use platform-value-set-generate instead; this skill covers the field that references a value set, not the value set definition.

1.1K 6.2K
View

Generates correct, deployable Salesforce permission set metadata (PermissionSet XML) with object, field, user, and app permissions. Use this skill when creating or editing permission set metadata, object permissions, field-level security (FLS), tab visibility, or deploying permission sets.

1.1K 6.1K
View
dx-code-analyzer-run logo
forcedotcom/sf-skills

dx-code-analyzer-run

Run Salesforce Code Analyzer to scan code for security, performance, best practice, and code style violations. Supports all engines (PMD, ESLint, CPD, RetireJS, Flow, SFGE, ApexGuru), targets (files, folders, git diff), categories, and severities. Also handles post-scan exploration: filtering results by engine/severity/category/file, and explaining what rules mean. TRIGGER when: user says 'scan my code', 'check security issues', 'run PMD/ESLint', 'find duplicates', 'analyze Flows', 'check vulnerable libraries', 'AppExchange review', 'lint my LWC', 'static analysis', 'code quality', 'show security violations', 'what is this rule', 'explain ApexCRUDViolation', 'filter results', or mentions engines/file types (.cls, .trigger, .js, .flow-meta.xml). Use this skill for scanning, exploring results, and listing rules. DO NOT TRIGGER when: user asks only about installation/configuration (use dx-code-analyzer-configure), or wants to create a custom rule (use dx-code-analyzer-custom-rule-create).

1.1K 6.1K
View
automation-flow-generate logo
forcedotcom/sf-skills

automation-flow-generate

Generate Salesforce Flows using the MCP tool execute_metadata_action. Use when the user asks to create, build, or generate a flow — including Screen, Autolaunched, Record-Triggered (before/after-save), Scheduled. Also trigger for flow-like requests such as "when a record is created", "trigger daily at", "send an email when", "update the field when", "automate", "workflow", or "flow XML/metadata". This is the only skill for Salesforce Flow generation.

1.1K 6K
View
platform-custom-object-generate logo
forcedotcom/sf-skills

platform-custom-object-generate

Use this skill when users need to create, generate, or validate Salesforce Custom Object metadata. Trigger when users mention custom objects, creating objects, object metadata, .object files, sharing models, name fields, or validation rules on objects. Also use when users say things like "create a custom object", "generate object metadata", "set up an object for...", or when they're troubleshooting object deployment errors especially around sharing models and Master-Detail relationships. Always use this skill for any custom object metadata work, including enriching and keeping the object's description current whenever its fields or validation rules change. Do NOT use this skill for non-Custom-Object metadata (Apex, Flows, LWC, Permission Sets, Custom Metadata Types) or for standard Salesforce objects.

1.1K 6K
View
platform-data-manage logo
forcedotcom/sf-skills

platform-data-manage

Salesforce data operations with 130-point scoring. Use this skill to create, update, delete, bulk import/export, generate test data, and clean up org records using sf CLI and anonymous Apex. TRIGGER when: user creates test data, performs bulk import/export, uses sf data CLI commands, needs data factory patterns for Apex tests, or needs to seed/clean records in a Salesforce org. DO NOT TRIGGER when: SOQL query writing only (use platform-soql-query), Apex test execution (use platform-apex-test-run), or metadata deployment (use platform-metadata-deploy).

1.1K 5.9K
View
design-systems-slds-apply logo
forcedotcom/sf-skills

design-systems-slds-apply

Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spacing, or selecting icons. Triggers include "build a modal", "create a form", "data table", "SLDS styling", "style with hooks", "add an icon".

1.1K 5.8K
View

REQUIRED companion for Salesforce metadata generation — load this schema/API-context skill in the SAME turn as ANY metadata generation skill; if you load a generator, you ALSO load this. Use it whenever you create, generate, add, edit, or author metadata or a *-meta.xml file: custom object, custom field, formula field, picklist, lookup, master-detail, validation rule, permission set, profile, custom tab, lightning record page, flexipage, list view, custom application, flow, layout, record type, sharing rules, report, and 604 Metadata API types. It provides the authoritative schema, fields, field properties, required flags, allowed enum values, and XML structure so generated *-meta.xml deploys cleanly — skipping it causes hallucinated element names and deploy failures. Trigger on *-meta.xml, metadata schema, api context, 'Salesforce metadata', or 'sfdx project'. DO NOT use for SOQL, DML, runtime sObject access, or Tooling API records.

1.1K 5.8K
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View