mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 11:43:26 +08:00

feat: syncing webapp skills sync to afv @W-21338965@ (#57 )

* feat: removing old webapp skills

* feat: adding sync of skills from webapps to afv

* feat: adding the first iteration of skills

* feat: pin template deps to latest npm versions and flatten skill folders

- Add pin-template-deps.js to resolve "*" deps to exact npm versions
- Integrate pinning into sync-template-skills npm script
- Remove check-template-skills-versions.js (no longer needed)
- Simplify workflow to single sync step
- Flatten skill output: one folder per skill with cleaned names

Made-with: Cursor

* fix: resolve skill validation errors

- Move .template-versions.json from skills/ to root
- Shorten skill names to meet 64-char limit:
  - salesforce-webapp-feature-micro-frontend-generating-micro-frontend-lwc → salesforce-webapp-micro-frontend-lwc
  - salesforce-webapp-feature-react-agentforce-conversation-client-integrating-agentforce-conversation-client → salesforce-webapp-agentforce-conversation-client
  - salesforce-webapp-feature-react-file-upload-implementing-file-upload → salesforce-webapp-react-file-upload
- Expand descriptions to meet 20-word minimum with trigger context

* Add webapp skills from template, sync script updates

- Rename skill folders from salesforce-webapp-* to *-webapp-* convention
- Update sync-template-skills.js: set SKILL.md front matter name to dest folder
- Remove sync-template-skills workflow and pin-template-deps script
- Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill
- Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux

Made-with: Cursor

* Align SKILL.md front matter name with folder for all webapp skills

Made-with: Cursor

* Fix skill validation: description length and trigger context for configuring-webapp-metadata, creating-webapp

Made-with: Cursor

* Rename sync script to sync-webapp-skills, drop manifest file

- Rename sync-template-skills.js to sync-webapp-skills.js
- Update package.json script to sync-webapp-skills
- Remove .synced-template-skills.json creation and add to .gitignore

Made-with: Cursor

* Revert sync-react-b2e-sample and sync-react-b2x-sample to upstream version

Made-with: Cursor

* Sync script: pin b2e and b2x to latest, sync skills from template

- Pin both template packages to latest in sync-webapp-skills.js
- Update package.json / package-lock.json (b2x 1.109.0)
- Sync skills: managing-webapp-agentforce-conversation-client, bar-line-chart,
  remove building-webapp-analytics-charts and integrating-webapp-agentforce-conversation-client
- Minor skill content updates

Made-with: Cursor

* Remove interactive map, weather widget, and Unsplash skills (no longer in template)

Made-with: Cursor

---------

Co-authored-by: Hemant Singh Bisht <hsinghbisht@salesforce.com>

2026-03-19 22:46:27 +05:30

2.3 KiB

Raw Blame History

name	description
building-webapp-data-visualization	Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.

Data Visualization

When to Use

Use this skill when:

Adding charts (donut, pie, bar, line, area) to a dashboard or analytics page
Displaying KPI/metric stat cards with trend indicators
Building a dashboard layout with mixed chart types and summary cards

Step 1 — Determine the visualization type

Identify what the user needs:

Donut / pie chart — categorical breakdown (e.g. issue types, status distribution)
Bar chart — comparison across categories or time periods
Line / area chart — trends over time
Stat card — single KPI metric with optional trend indicator
Combined dashboard — stat cards + one or more charts

If unclear, ask:

"What data should the chart display, and would a donut chart, bar chart, line chart, or stat cards work best?"

Step 2 — Install dependencies

All chart types in this skill use recharts. Install once from the web app directory:

npm install recharts

Recharts is built on D3 and provides declarative React components. No additional CSS is needed.

Step 3 — Choose implementation path

Read the corresponding guide:

Bar chart — read implementation/bar-line-chart.md (categorical data)
Line / area chart — read implementation/bar-line-chart.md (time-series data)
Donut / pie chart — read implementation/donut-chart.md
Stat card with trend — read implementation/stat-card.md
Dashboard layout — read implementation/dashboard-layout.md

Verification

Before completing:

Chart renders with correct data and colors.
Chart is responsive (resizes with container).
Legend labels match the data categories.
Stat card trends display correct positive/negative indicators.
Run from the web app directory:

cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build

Lint: MUST result in 0 errors.
Build: MUST succeed.

2.3 KiB Raw Blame History