experience-lwc-generate
installsforks
How to install experience-lwc-generate?
forcedotcom/sf-skills/experience-lwc-generate
$npx -y skills add forcedotcom/sf-skills --skill experience-lwc-generateLightning 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, .j
SKILL.md
| 1 | # experience-lwc-generate: Lightning Web Components Development |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## When This Skill Owns the Task |
| 6 | |
| 7 | Use `experience-lwc-generate` when the work involves: |
| 8 | - `lwc/**/*.js`, `.html`, `.css`, `.js-meta.xml` |
| 9 | - component scaffolding and bundle design |
| 10 | - wire service, Apex integration, GraphQL integration |
| 11 | - SLDS 2, dark mode, and accessibility work |
| 12 | - Jest unit tests for LWC |
| 13 | |
| 14 | Delegate elsewhere when the user is: |
| 15 | - writing Apex controllers or business logic first → [platform-apex-generate](../platform-apex-generate/SKILL.md) |
| 16 | - building Flow XML rather than an LWC screen component → [automation-flow-generate](../automation-flow-generate/SKILL.md) |
| 17 | - deploying metadata → [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md) |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## Required Context to Gather First |
| 22 | |
| 23 | Ask for or infer: |
| 24 | - component purpose and target surface |
| 25 | - data source: LDS, Apex, GraphQL, LMS, or external system via Apex |
| 26 | - whether the user needs tests |
| 27 | - whether the component must run in Flow, App Builder, Experience Cloud, or dashboard contexts |
| 28 | - accessibility and styling expectations |
| 29 | |
| 30 | --- |
| 31 | |
| 32 | ## Recommended Workflow |
| 33 | |
| 34 | ### 1. Choose the right architecture |
| 35 | Use the **PICKLES** mindset: |
| 36 | - prototype |
| 37 | - integrate the right data source |
| 38 | - compose component boundaries |
| 39 | - define interaction model |
| 40 | - use platform libraries |
| 41 | - optimize execution |
| 42 | - enforce security |
| 43 | |
| 44 | ### 2. Choose the right data access pattern |
| 45 | | Need | Default pattern | |
| 46 | |---|---| |
| 47 | | single-record UI | LDS / `getRecord` | |
| 48 | | simple CRUD form | base record form components | |
| 49 | | complex server query | Apex `@AuraEnabled(cacheable=true)` | |
| 50 | | related graph data | GraphQL wire adapter | |
| 51 | | cross-DOM communication | Lightning Message Service | |
| 52 | |
| 53 | ### 3. Start from an asset when useful |
| 54 | Use provided assets for: |
| 55 | - basic component bundles |
| 56 | - datatables |
| 57 | - modal patterns |
| 58 | - Flow screen components |
| 59 | - GraphQL components |
| 60 | - LMS message channels |
| 61 | - Jest tests |
| 62 | - TypeScript-enabled components |
| 63 | |
| 64 | ### 4. Validate for frontend quality |
| 65 | Check: |
| 66 | - accessibility |
| 67 | - SLDS 2 / dark mode compliance |
| 68 | - event contracts |
| 69 | - performance / rerender safety |
| 70 | - Jest coverage when required |
| 71 | |
| 72 | ### 5. Hand off supporting backend or deploy work |
| 73 | Use: |
| 74 | - [platform-apex-generate](../platform-apex-generate/SKILL.md) for controllers / services |
| 75 | - [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md) for deployment |
| 76 | - [platform-apex-test-run](../platform-apex-test-run/SKILL.md) only for Apex-side test loops, not Jest |
| 77 | |
| 78 | --- |
| 79 | |
| 80 | ## High-Signal Rules |
| 81 | |
| 82 | - prefer platform base components over reinventing controls |
| 83 | - use `@wire` for reactive read-only use cases; imperative calls for explicit actions and DML paths |
| 84 | - do not introduce inaccessible custom UI |
| 85 | - avoid hardcoded colors; use SLDS 2-compatible styling hooks / variables |
| 86 | - avoid rerender loops in `renderedCallback()` |
| 87 | - keep component communication patterns explicit and minimal |
| 88 | |
| 89 | --- |
| 90 | |
| 91 | ## Output Format |
| 92 | |
| 93 | When finishing, report in this order: |
| 94 | 1. **Component(s) created or updated** |
| 95 | 2. **Data access pattern chosen** |
| 96 | 3. **Files changed** |
| 97 | 4. **Accessibility / styling / testing notes** |
| 98 | 5. **Next implementation or deploy step** |
| 99 | |
| 100 | Suggested shape: |
| 101 | |
| 102 | ```text |
| 103 | LWC work: <summary> |
| 104 | Pattern: <wire / apex / graphql / lms / flow-screen> |
| 105 | Files: <paths> |
| 106 | Quality: <a11y, SLDS2, dark mode, Jest> |
| 107 | Next step: <deploy, add controller, or run tests> |
| 108 | ``` |
| 109 | |
| 110 | --- |
| 111 | |
| 112 | ## Local Development Server |
| 113 | |
| 114 | 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. |
| 115 | |
| 116 | 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. |
| 117 | |
| 118 | --- |
| 119 | |
| 120 | ## Cross-Skill Integration |
| 121 | |
| 122 | | Need | Delegate to | Reason | |
| 123 | |---|---|---| |
| 124 | | Apex controller or service | [platform-apex-generate](../platform-apex-generate/SKILL.md) | backend logic | |
| 125 | | embed in Flow screens | [automation-flow-generate](../automation-flow-generate/SKILL.md) | declarative orchestration | |
| 126 | | deploy component bundle | [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md) | org rollout | |
| 127 | | create supporting metadata (message channels, objects) | [platform-metadata-deploy](../platform |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
