PaperclipOrg
Claude Agent Skill · by Jaganpro

Sf Lwc

Install Sf Lwc skill for Claude Code from jaganpro/sf-skills.

Works with Paperclip

How Sf Lwc fits into a Paperclip company.

Sf Lwc drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md188 lines
Expand
---name: sf-lwcdescription: >  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: MITmetadata:  version: "2.1.0"  author: "Jag Valaiyapathy"  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](../sf-apex/SKILL.md)- building Flow XML rather than an LWC screen component → [sf-flow](../sf-flow/SKILL.md)- deploying metadata → [sf-deploy](../sf-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 architectureUse 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 usefulUse 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 qualityCheck:- accessibility- SLDS 2 / dark mode compliance- event contracts- performance / rerender safety- Jest coverage when required ### 5. Hand off supporting backend or deploy workUse:- [sf-apex](../sf-apex/SKILL.md) for controllers / services- [sf-deploy](../sf-deploy/SKILL.md) for deployment- [sf-testing](../sf-testing/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: ```textLWC 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 isolationsf lightning dev component --target-org <alias> # Preview a Lightning Experience app locallysf lightning dev app --target-org <alias> # Preview an Experience Cloud site locallysf 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](../sf-apex/SKILL.md) | backend logic || embed in Flow screens | [sf-flow](../sf-flow/SKILL.md) | declarative orchestration || deploy component bundle | [sf-deploy](../sf-deploy/SKILL.md) | org rollout || create metadata like message channels | [sf-metadata](../sf-metadata/SKILL.md) | supporting metadata | --- ## Reference Map ### Start here- [references/component-patterns.md](references/component-patterns.md)- [references/slds-design-guide.md](references/slds-design-guide.md)- [references/lwc-best-practices.md](references/lwc-best-practices.md)- [references/scoring-and-testing.md](references/scoring-and-testing.md)- [references/jest-testing.md](references/jest-testing.md) ### Accessibility / performance / state- [references/accessibility-guide.md](references/accessibility-guide.md)- [references/performance-guide.md](references/performance-guide.md)- [references/state-management.md](references/state-management.md)- [references/template-anti-patterns.md](references/template-anti-patterns.md) ### Integration / advanced features- [references/lms-guide.md](references/lms-guide.md)- [references/flow-integration-guide.md](references/flow-integration-guide.md)- [references/advanced-features.md](references/advanced-features.md)- [references/async-notification-patterns.md](references/async-notification-patterns.md)- [references/triangle-pattern.md](references/triangle-pattern.md)- [assets/](assets/) --- ## 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 |