5.3 KiB
| name | description |
|---|---|
| salesforce-web-app-feature | Use this skill when users need to add features to Salesforce React web applications. Trigger when users mention adding authentication, search, charts, GraphQL, ShadCN components, Agentforce conversation client, or any feature packages. Also use when users want to install npm packages, copy-then-adjust workflow, or integrate official feature packages. This is the PRIMARY skill for web app features - always prefer official packages listed here. |
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/orsrc/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:
npm i && npm run build && npm run dev