/experience-lwc-generate

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:
  cliTools:
    - tool: ["node"]
      semver: ">=18.0.0"
    - tool: ["npm"]
      semver: ">=9.0.0"
    - tool: ["npx"]
      semver: ">=9.0.0"
    - tool: ["python3"]
      semver: ">=3.9.0"
    - tool: ["sf"]
      semver: ">=2.0.0"
  relatedSkills:
    - "agentforce-generate"
    - "automation-flow-generate"
    - "integration-connectivity-generate"
    - "platform-apex-generate"
    - "platform-apex-test-run"
    - "platform-metadata-deploy"
  version: "1.1"

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:

• writing Apex controllers or business logic first → [platform-apex-generate](../platform-apex-generate/SKILL.md)
• building Flow XML rather than an LWC screen component → [automation-flow-generate](../automation-flow-generate/SKILL.md)
• deploying metadata → [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md)

---

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:

• [platform-apex-generate](../platform-apex-generate/SKILL.md) for controllers / services
• [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md) for deployment
• [platform-apex-test-run](../platform-apex-test-run/SKILL.md) only for Apex-side test loops, not Jest

---

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

| Need | Delegate to | Reason | |---|---|---| | Apex controller or service | [platform-apex-generate](../platform-apex-generate/SKILL.md) | backend logic | | embed in Flow screens | [automation-flow-generate](../automation-flow-generate/SKILL.md) | declarative orchestration | | deploy component bundle | [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md) | org rollout | | create supporting metadata (message channels, objects) | [platform-metadata-deploy](../platform-metadata-deploy/SKILL.md) | metadata deployment |

---

Reference File Index

Start here

• [references/component-patterns.md](references/component-patterns.md) — component architecture patterns and bundle design
• [references/slds-design-guide.md](references/slds-design-guide.md) — SLDS 2 styling, dark mode, CSS hooks
• [references/lwc-best-practices.md](references/lwc-best-practices.md) — high-signal rules and anti-patterns
• [references/scoring-and-testing.md](references/scoring-and-testing.md) — 165-point scoring rubric across 8 ca