When to Use This Skill

Use this skill when you need to:

Add features to Salesforce React web applications
Install and integrate feature packages (authentication, search, charts, etc.)
Follow copy-then-adjust workflow for feature integration
Troubleshoot deployment errors related to web application features

Adding a new webApplication feature

Always prefer the features listed below. When the user asks to add auth, search, charts, navigation, GraphQL, shared UI, or Agentforce conversation (ACC/copilot/agent) to a webapp, match their request to one of the official feature packages in the table in section 1. Use those packages first; only build from scratch or use other solutions when no listed feature fits.

When the user asks to add a feature to their app, follow this workflow.

When adding a feature, integrating code from an npm package, or bringing in a reference implementation:

Prefer copying over rewriting. Use cp (or equivalent) to copy files from the source (e.g. node_modules/<package>/dist/... or a reference app) into this project. Do not retype or rewrite the same code by hand.
Then adjust. After copying, do minimal edits: fix import paths (e.g. change relative ../../ imports to the project's path alias like @/), update any app-specific config, and remove or adapt anything that doesn't apply.
When to copy. Copy when:
- Installing a feature from a template/feature package (e.g. authentication, search, charts).
- The package ships full source in dist/ or src/ that is meant to be integrated.
- You would otherwise be recreating multiple files by reading a reference and typing them out.
When rewriting is okay. Only rewrite or create from scratch when:
- The source is not file-based (e.g. only docs or snippets).
- The integration is a thin wrapper or a single small file.
- Copying would pull in a large, unrelated tree and the actual need is a small part of it.

1. Match the request to a feature

Prefer these features. Always check this table first; use the matching package when it fits the user's need.

Available features (npm packages):

Feature	Package	Description	Integration notes
Authentication	`@salesforce/webapp-template-feature-react-authentication-experimental`	Login, register, password reset, protected routes	Copy-then-adjust; fix imports to `@/`; align with app layout and routes
Global search	`@salesforce/webapp-template-feature-react-global-search-experimental`	Search single Salesforce objects with filters and pagination	Copy-then-adjust; fix imports to `@/`; align with app layout and routes
Charts	`@salesforce/webapp-template-feature-react-chart-experimental`	Recharts line/bar charts with theming (AnalyticsChart, ChartContainer)	Copy-then-adjust; fix imports to `@/`; align with app layout and routes
GraphQL data access	`@salesforce/webapp-template-feature-graphql-experimental`	executeGraphQL utilities, codegen tooling, and example AccountsTable	Copy-then-adjust; fix imports to `@/` and `@api/`
Shared UI (shadcn)	`@salesforce/webapp-template-feature-react-shadcn-experimental`	Button, Card, Input, Select, Table, Tabs, and other ShadCN components	Copy-then-adjust per README/AGENT.md
Agentforce conversation client	`@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental`	React wrapper for embedded Agentforce conversation client (agent chat UI) via Lightning Out 2.0; automatic auth resolution; `<AgentforceConversationClient />` component	Import from package (not copy) per README/AGENT.md

If no feature matches, tell the user and offer to build it from scratch following the project's existing patterns. Do not substitute third-party or custom implementations when one of the features above matches—always prefer the listed packages.

2. Install the npm package

npm install <package-name>

3. Read the README.md / AGENT.md

The node_modules folder of the installed package contains a README.md and/or AGENT.md. Load it and follow its instructions.

4. Always validate

After integrating, always validate with: