@salesforce/afv-skills 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +16 -415
  2. package/package.json +5 -3
  3. package/skills/building-ui-bundle-app/SKILL.md +325 -0
  4. package/skills/building-ui-bundle-frontend/SKILL.md +122 -0
  5. package/skills/{building-webapp-react-components → building-ui-bundle-frontend}/implementation/component.md +1 -1
  6. package/skills/creating-b2b-commerce-store/SKILL.md +169 -0
  7. package/skills/creating-b2b-commerce-store/references/store-vs-storefront.md +169 -0
  8. package/skills/deploying-ui-bundle/SKILL.md +77 -0
  9. package/skills/generating-apex/CREDITS.md +30 -0
  10. package/skills/generating-apex/SKILL.md +399 -0
  11. package/skills/generating-apex/assets/abstract.cls +132 -0
  12. package/skills/generating-apex/assets/batch.cls +125 -0
  13. package/skills/generating-apex/assets/domain.cls +102 -0
  14. package/skills/generating-apex/assets/dto.cls +108 -0
  15. package/skills/generating-apex/assets/exception.cls +51 -0
  16. package/skills/generating-apex/assets/interface.cls +25 -0
  17. package/skills/generating-apex/assets/invocable.cls +115 -0
  18. package/skills/generating-apex/assets/queueable.cls +92 -0
  19. package/skills/generating-apex/assets/rest-resource.cls +300 -0
  20. package/skills/generating-apex/assets/schedulable.cls +75 -0
  21. package/skills/generating-apex/assets/selector.cls +92 -0
  22. package/skills/generating-apex/assets/service.cls +69 -0
  23. package/skills/generating-apex/assets/trigger.cls +45 -0
  24. package/skills/generating-apex/assets/utility.cls +97 -0
  25. package/skills/generating-apex/references/AccountDeduplicationBatch.cls +148 -0
  26. package/skills/generating-apex/references/AccountSelector.cls +193 -0
  27. package/skills/generating-apex/references/AccountService.cls +201 -0
  28. package/skills/generating-apex-test/CREDITS.md +30 -0
  29. package/skills/generating-apex-test/SKILL.md +199 -0
  30. package/skills/generating-apex-test/assets/test-class-template.cls +93 -0
  31. package/skills/generating-apex-test/assets/test-data-factory-template.cls +111 -0
  32. package/skills/generating-apex-test/references/assertion-patterns.md +108 -0
  33. package/skills/generating-apex-test/references/async-testing.md +193 -0
  34. package/skills/generating-apex-test/references/mocking-patterns.md +220 -0
  35. package/skills/generating-apex-test/references/test-data-factory.md +75 -0
  36. package/skills/generating-experience-react-site/SKILL.md +20 -9
  37. package/skills/generating-experience-react-site/docs/configure-metadata-digital-experience.md +1 -1
  38. package/skills/generating-flexipage/SKILL.md +58 -60
  39. package/skills/generating-ui-bundle-features/SKILL.md +45 -0
  40. package/skills/generating-ui-bundle-metadata/SKILL.md +106 -0
  41. package/skills/{managing-webapp-agentforce-conversation-client → implementing-ui-bundle-agentforce-conversation-client}/SKILL.md +5 -5
  42. package/skills/{managing-webapp-agentforce-conversation-client → implementing-ui-bundle-agentforce-conversation-client}/references/constraints.md +2 -2
  43. package/skills/{managing-webapp-agentforce-conversation-client → implementing-ui-bundle-agentforce-conversation-client}/references/examples.md +1 -1
  44. package/skills/{implementing-webapp-file-upload → implementing-ui-bundle-file-upload}/SKILL.md +11 -11
  45. package/skills/searching-media/SKILL.md +342 -0
  46. package/skills/{using-webapp-salesforce-data → using-ui-bundle-salesforce-data}/SKILL.md +52 -25
  47. package/skills/using-ui-bundle-salesforce-data/references/mutation-query-generation.md +140 -0
  48. package/skills/using-ui-bundle-salesforce-data/references/query-testing.md +78 -0
  49. package/skills/using-ui-bundle-salesforce-data/references/read-query-generation.md +307 -0
  50. package/skills/using-ui-bundle-salesforce-data/references/schema-introspection.md +53 -0
  51. package/skills/using-ui-bundle-salesforce-data/references/ui-bundle-integration.md +221 -0
  52. package/skills/{using-webapp-salesforce-data → using-ui-bundle-salesforce-data/scripts}/graphql-search.sh +75 -23
  53. package/skills/building-webapp-data-visualization/SKILL.md +0 -72
  54. package/skills/building-webapp-data-visualization/implementation/bar-line-chart.md +0 -316
  55. package/skills/building-webapp-data-visualization/implementation/dashboard-layout.md +0 -189
  56. package/skills/building-webapp-data-visualization/implementation/donut-chart.md +0 -181
  57. package/skills/building-webapp-data-visualization/implementation/stat-card.md +0 -150
  58. package/skills/building-webapp-react-components/SKILL.md +0 -96
  59. package/skills/configuring-webapp-csp-trusted-sites/SKILL.md +0 -90
  60. package/skills/configuring-webapp-metadata/SKILL.md +0 -158
  61. package/skills/creating-webapp/SKILL.md +0 -140
  62. package/skills/deploying-webapp-to-salesforce/SKILL.md +0 -226
  63. package/skills/installing-webapp-features/SKILL.md +0 -210
  64. /package/skills/{building-webapp-react-components → building-ui-bundle-frontend}/implementation/header-footer.md +0 -0
  65. /package/skills/{building-webapp-react-components → building-ui-bundle-frontend}/implementation/page.md +0 -0
  66. /package/skills/{configuring-webapp-csp-trusted-sites/implementation/metadata-format.md → generating-ui-bundle-metadata/implementation/csp-metadata-format.md} +0 -0
  67. /package/skills/{managing-webapp-agentforce-conversation-client → implementing-ui-bundle-agentforce-conversation-client}/references/style-tokens.md +0 -0
  68. /package/skills/{managing-webapp-agentforce-conversation-client → implementing-ui-bundle-agentforce-conversation-client}/references/troubleshooting.md +0 -0
@@ -0,0 +1,325 @@
1
+ ---
2
+ name: building-ui-bundle-app
3
+ description: "Build complete Salesforce React UI bundle applications from natural language descriptions. Use this skill when a user requests a full React app, UI bundle app, web app on Salesforce, or describes a scenario requiring scaffolding, features, data access, UI pages, and deployment of a React application hosted on Salesforce. Orchestrates all UI bundle skills in proper dependency order to produce a deployable application. Triggers on: build a React app, create a UI bundle, build me an app, full-stack Salesforce React app, create a web app on Salesforce."
4
+ metadata:
5
+ version: "1.0"
6
+ related-skills: generating-ui-bundle-metadata, generating-ui-bundle-features, using-ui-bundle-salesforce-data, building-ui-bundle-frontend, implementing-ui-bundle-agentforce-conversation-client, implementing-ui-bundle-file-upload, deploying-ui-bundle, generating-experience-react-site
7
+ ---
8
+
9
+ # Building a UI Bundle App
10
+
11
+ ## Overview
12
+
13
+ Build a complete, deployable Salesforce React UI bundle application from a natural language description by orchestrating specialized UI bundle skills in correct dependency order. Each skill **MUST** be explicitly loaded before executing its phase.
14
+
15
+ ## When to Use This Skill
16
+
17
+ **Use when:**
18
+
19
+ - User requests a "React app", "UI bundle", "web app", or "full-stack app" on Salesforce
20
+ - User says "build an app", "create an application" and the context implies a non-LWC based frontend (e.g. React)
21
+ - The work produces a complete UI bundle with scaffolding, features, data access, and UI -- not a single component in isolation
22
+
23
+ **Examples that should trigger this skill:**
24
+
25
+ - "Build a React app for managing customer cases with Salesforce data"
26
+ - "Create a UI bundle for an employee directory with search and navigation"
27
+ - "I need a full-stack React app with authentication, data tables, and file uploads"
28
+ - "Build a coffee shop ordering app on Salesforce"
29
+
30
+ **Do NOT use when:**
31
+
32
+ - Creating a single page or component (use `building-ui-bundle-frontend`)
33
+ - Only installing a feature (use `generating-ui-bundle-features`)
34
+ - Only setting up data access (use `using-ui-bundle-salesforce-data`)
35
+ - Only deploying an existing app (use `deploying-ui-bundle`)
36
+ - Building a Lightning Experience app with custom objects and metadata (use `generating-lightning-app`)
37
+ - Troubleshooting or debugging an existing UI bundle
38
+
39
+ ---
40
+
41
+ ## Dependency Graph & Build Order
42
+
43
+ ### Phase 1: Scaffolding (Foundation)
44
+
45
+ ```
46
+ UI Bundle scaffold (sf ui-bundle generate)
47
+ v
48
+ Install dependencies (npm install)
49
+ v
50
+ Bundle metadata (uibundle-meta.xml, ui-bundle.json)
51
+ v
52
+ CSP Trusted Sites (if external domains needed)
53
+ ```
54
+
55
+ Creates the UI bundle directory structure, meta XML, and optional routing/headers config. All subsequent phases require the scaffold to exist.
56
+
57
+ ### Phase 2: Features (Optional)
58
+
59
+ ```
60
+ Search project code (src/) for existing implementations
61
+ v
62
+ Install dependencies (npm install)
63
+ v
64
+ Search, describe, and install features (auth, shadcn, search, navigation, GraphQL)
65
+ v
66
+ Resolve conflicts (two-pass: --on-conflict error, then --conflict-resolution)
67
+ v
68
+ Integrate __example__ files into target files, then delete them
69
+ ```
70
+
71
+ Installs pre-built, tested feature packages. Skip if the app requires no pre-built features. Always check for an existing feature before building from scratch. Features provide the foundation that UI components build on top of.
72
+
73
+ ### Phase 3: Data Access (Backend Wiring)
74
+
75
+ ```
76
+ Acquire schema (npm run graphql:schema)
77
+ v
78
+ Look up entity schema (graphql-search.sh, max 2 runs)
79
+ v
80
+ Generate queries/mutations (use verified field names, @optional on all record fields)
81
+ v
82
+ Validate and test (npx eslint, ask user before testing mutations)
83
+ ```
84
+
85
+ Sets up the data layer using `@salesforce/sdk-data`. GraphQL is preferred for record operations; REST for Connect, Apex, or UI API endpoints.
86
+
87
+ ### Phase 4: UI (Frontend)
88
+
89
+ ```
90
+ Layout, navigation, header, and footer (appLayout.tsx)
91
+ v
92
+ Pages (routed views)
93
+ v
94
+ Components (widgets, forms, tables)
95
+ ```
96
+
97
+ Builds the React UI. References the data layer from Phase 3 and the features from Phase 2. Must replace all boilerplate and placeholder content.
98
+
99
+ ### Phase 5: Integrations (Optional)
100
+
101
+ ```
102
+ Agentforce chat widget (if requested)
103
+ File upload API (if requested)
104
+ ```
105
+
106
+ These are independent and can be executed in parallel if both are needed.
107
+
108
+ ### Phase 6: Deployment
109
+
110
+ ```
111
+ Org authentication
112
+ v
113
+ Pre-deploy UI bundle build (npm install + npm run build)
114
+ v
115
+ Deploy metadata
116
+ v
117
+ Post-deploy configuration (permissions, profiles, named credentials, connected apps, custom settings, flow activation)
118
+ v
119
+ Import data (if data plan exists)
120
+ v
121
+ Fetch GraphQL schema and run codegen
122
+ *(Re-fetches schema from the deployed org -- required because the remote schema may differ from the local one used in Phase 3)*
123
+ v
124
+ Final UI bundle build (rebuilds with the deployed schema)
125
+ ```
126
+
127
+ Follows the canonical 7-step deployment sequence. Must deploy metadata before fetching schema. Must assign permissions before schema fetch.
128
+
129
+ ### Phase 7: Experience Site (Optional)
130
+
131
+ ```
132
+ Resolve site properties (siteName, appDevName, etc.)
133
+ v
134
+ Generate site metadata (Network, CustomSite, DigitalExperience)
135
+ v
136
+ Deploy site infrastructure
137
+ ```
138
+
139
+ Creates the Digital Experience site that hosts the UI bundle. Only needed when the user wants a public-facing or authenticated site URL.
140
+
141
+ ---
142
+
143
+ ## Execution Workflow
144
+
145
+ ### STEP 1: Requirements Analysis & Planning
146
+
147
+ **Actions:**
148
+
149
+ 1. Parse the user's natural language request
150
+ 2. Identify the app name and purpose
151
+ 3. Extract pages and navigation structure
152
+ 4. Identify data entities and Salesforce objects needed
153
+ 5. Detect feature requirements (authentication, search, file upload, chat)
154
+ 6. Determine if an Experience Site is needed
155
+ 7. Identify external domains for CSP registration
156
+
157
+ **Output: Build Plan**
158
+
159
+ ```
160
+ UI Bundle App Build Plan: [App Name]
161
+
162
+ SCAFFOLDING:
163
+ - App name: [PascalCase name]
164
+ - Routing: [SPA rewrites, trailing slash config]
165
+ - External domains: [domains needing CSP registration]
166
+
167
+ FEATURES:
168
+ - [list of features to install: auth, shadcn, search, navigation, etc.]
169
+
170
+ DATA ACCESS:
171
+ - Objects: [Salesforce objects to query/mutate]
172
+ - Queries: [list of GraphQL queries needed]
173
+ - REST endpoints: [Apex REST or Connect API calls, if any]
174
+
175
+ UI:
176
+ - Layout: [description of app shell/navigation]
177
+ - Pages: [list of pages with routes]
178
+ - Components: [key components per page]
179
+ - Design direction: [aesthetic/style intent]
180
+
181
+ INTEGRATIONS (if applicable):
182
+ - Agentforce chat: [yes/no, agent ID if known]
183
+ - File upload: [yes/no, record linking pattern]
184
+
185
+ DEPLOYMENT:
186
+ - Target org: [org alias if known]
187
+ - Experience Site: [yes/no, site name if applicable]
188
+
189
+ SKILL LOAD ORDER:
190
+ 1. generating-ui-bundle-metadata
191
+ 2. generating-ui-bundle-features (if features needed)
192
+ 3. using-ui-bundle-salesforce-data (if data access needed)
193
+ 4. building-ui-bundle-frontend
194
+ 5a. implementing-ui-bundle-agentforce-conversation-client (if chat requested)
195
+ 5b. implementing-ui-bundle-file-upload (if file upload requested)
196
+ 6. deploying-ui-bundle
197
+ 7. generating-experience-react-site (if site requested)
198
+ ```
199
+
200
+ ### STEP 2: Per-Phase Execution
201
+
202
+ Execute each phase sequentially. Complete all steps within a phase before moving to the next. For each phase:
203
+
204
+ | Step | What to do | Why |
205
+ |------|-----------|-----|
206
+ | **1. Load skill** | Invoke the skill (e.g., via the Skill tool) for this phase | Gives you the current rules, patterns, constraints, and implementation guides |
207
+ | **2. Execute** | Follow the loaded skill's workflow to generate code/config | The skill defines HOW to do the work correctly |
208
+ | **3. Verify** | Run lint and build from the UI bundle directory | Catch errors before moving to the next phase |
209
+ | **4. Checkpoint** | Confirm phase completion before proceeding | Ensures dependencies are satisfied for the next phase |
210
+
211
+ **Do NOT skip step 1 (loading the skill).** Even if you remember the skill's content, skills evolve. Always load the current version.
212
+
213
+ ---
214
+
215
+ **Phase 1 -- Scaffolding**
216
+ - 1. Load skill: Invoke `generating-ui-bundle-metadata`
217
+ - 2. Execute: Run `sf ui-bundle generate`, install dependencies (`npm install`), configure meta XML, ui-bundle.json, and CSP trusted sites
218
+ - 3. Verify: Confirm directory structure and metadata files exist
219
+ - 4. Checkpoint: UI bundle scaffold is ready -- proceed to Phase 2
220
+
221
+ **Phase 2 -- Features** (skip if no pre-built features needed)
222
+ - 1. Load skill: Invoke `generating-ui-bundle-features`
223
+ - 2. Execute: Install dependencies, search and install features, integrate example files
224
+ - 3. Verify: Run `npm run build` to confirm features integrate cleanly
225
+ - 4. Checkpoint: Features installed -- proceed to Phase 3
226
+
227
+ **Phase 3 -- Data Access** (skip if no Salesforce data needed)
228
+ - 1. Load skill: Invoke `using-ui-bundle-salesforce-data`
229
+ - 2. Execute: Fetch schema, look up entities, generate queries/mutations, wire into components
230
+ - 3. Verify: Run `npx eslint` on files with GraphQL queries
231
+ - 4. Checkpoint: Data layer ready -- proceed to Phase 4
232
+
233
+ **Phase 4 -- UI**
234
+ - 1. Load skill: Invoke `building-ui-bundle-frontend`
235
+ - 2. Execute: Build layout, pages, components, navigation. Replace all boilerplate.
236
+ - 3. Verify: Run lint and build -- 0 errors required
237
+ - 4. Checkpoint: UI complete -- proceed to Phase 5
238
+
239
+ **Phase 5 -- Integrations** (skip if not requested)
240
+ - 1. Load skill(s): Invoke `implementing-ui-bundle-agentforce-conversation-client` (5a) and/or `implementing-ui-bundle-file-upload` (5b). If both are needed, they are independent and can be executed in parallel.
241
+ - 2. Execute: Follow each skill's workflow to add the integration
242
+ - 3. Verify: Run lint and build
243
+ - 4. Checkpoint: Integrations complete -- proceed to Phase 6
244
+
245
+ **Phase 6 -- Deployment**
246
+ - 1. Load skill: Invoke `deploying-ui-bundle`
247
+ - 2. Execute: Follow the 7-step deployment sequence (auth, build, deploy, permissions, data, schema, final build)
248
+ - 3. Verify: Confirm deployment succeeds and app is accessible
249
+ - 4. Checkpoint: App deployed -- proceed to Phase 7 if needed
250
+
251
+ **Phase 7 -- Experience Site** (skip if not requested)
252
+ - 1. Load skill: Invoke `generating-experience-react-site`
253
+ - 2. Execute: Resolve properties, generate site metadata, deploy
254
+ - 3. Verify: Confirm site URL is accessible
255
+ - 4. Checkpoint: Site live -- build complete
256
+
257
+ ### STEP 3: Final Summary
258
+
259
+ After all phases complete, present a build summary:
260
+
261
+ ```
262
+ UI Bundle App Build Complete: [App Name]
263
+
264
+ PHASES COMPLETED:
265
+ [x] Phase 1: Scaffolding -- [app name] UI bundle created
266
+ [x] Phase 2: Features -- [list of features installed, or "skipped"]
267
+ [x] Phase 3: Data Access -- [list of entities wired up]
268
+ [x] Phase 4: UI -- [count] pages, [count] components
269
+ [x] Phase 5: Integrations -- [list or "none"]
270
+ [x] Phase 6: Deployment -- deployed to [org]
271
+ [x] Phase 7: Experience Site -- [site URL or "skipped"]
272
+
273
+ FILES GENERATED:
274
+ [list key files and their paths]
275
+
276
+ NEXT STEPS:
277
+ [any manual steps the user should take]
278
+ ```
279
+
280
+ ---
281
+
282
+ ## Validation
283
+
284
+ Before presenting the build as complete, verify:
285
+
286
+ - [ ] **Scaffold exists**: UI bundle directory with valid meta XML and ui-bundle.json
287
+ - [ ] **Dependencies installed**: `node_modules/` exists and `package.json` has expected packages
288
+ - [ ] **Build passes**: `npm run build` produces `dist/` with no errors
289
+ - [ ] **Lint passes**: `npx eslint src/` reports 0 errors
290
+ - [ ] **No boilerplate**: All placeholder text, default titles, and template content has been replaced
291
+ - [ ] **Navigation works**: `appLayout.tsx` has real nav items matching created pages
292
+ - [ ] **Data layer wired**: Components use `@salesforce/sdk-data` (if data access phase was executed)
293
+ - [ ] **CSP registered**: All external domains have CSP Trusted Site metadata (if applicable)
294
+
295
+ ---
296
+
297
+ ## Error Handling
298
+
299
+ ### Category 1: Stop and Ask User
300
+
301
+ - App purpose is too vague to determine pages or data needs
302
+ - User wants features that conflict (e.g., "no authentication" + "show user-specific data")
303
+ - Target org is unknown and deployment is requested
304
+
305
+ ### Category 2: Log Warning, Continue
306
+
307
+ - A feature install has minor conflicts (resolve and continue)
308
+ - Optional integration setup encounters non-blocking issues
309
+ - Build has non-error warnings
310
+
311
+ ---
312
+
313
+ ## Best Practices
314
+
315
+ ### 1. Always Follow Phase Order
316
+
317
+ Never build UI before installing features. Never deploy before building. Dependencies are strict.
318
+
319
+ ### 2. Replace All Boilerplate
320
+
321
+ Every generated app must feel purpose-built. Replace "React App" titles, "Vite + React" placeholders, and all default content with real app-specific text and branding.
322
+
323
+ ### 3. Design with Intent
324
+
325
+ Follow the design thinking and frontend aesthetics guidance from `building-ui-bundle-frontend`. Every app should have a clear visual direction -- not generic defaults.
@@ -0,0 +1,122 @@
1
+ ---
2
+ name: building-ui-bundle-frontend
3
+ description: "Build and modify React UI for Salesforce UI bundles — pages, components, layout, navigation, and headers/footers. Use whenever creating or editing TSX/JSX files or making visual/layout changes. Triggers on: add page, add component, header, footer, navigation, layout, styling, Tailwind, shadcn, React component, appLayout."
4
+ ---
5
+
6
+ # UI Bundle UI
7
+
8
+ ## Identify the Task
9
+
10
+ Determine which category the request falls into:
11
+
12
+ | Category | Examples | Implementation Guide |
13
+ |----------|----------|---------------------|
14
+ | **Page** | New routed page (contacts, dashboard, settings) | `implementation/page.md` |
15
+ | **Header / Footer** | Site-wide nav bar, footer, branding | `implementation/header-footer.md` |
16
+ | **Component** | Widget, card, table, form, dialog | `implementation/component.md` |
17
+
18
+ ---
19
+
20
+ ## Layout and Navigation
21
+
22
+ `appLayout.tsx` is the source of truth for navigation and layout. Every page shares this shell.
23
+
24
+ When making any change that affects navigation, header, footer, sidebar, theme, or layout:
25
+
26
+ 1. Edit `src/appLayout.tsx` — the layout used by `routes.tsx`
27
+ 2. Replace all default/template nav items and labels with app-specific links and names
28
+ 3. Replace placeholder app name everywhere: header, nav brand, footer, `<title>` in `index.html`
29
+
30
+ Before finishing, confirm: Did I update `appLayout.tsx` with real nav items and branding?
31
+
32
+ | What | Where |
33
+ |------|-------|
34
+ | Layout, nav, branding | `src/appLayout.tsx` |
35
+ | Document title | `index.html` |
36
+ | Root page content | Component at root route in `routes.tsx` |
37
+
38
+ ---
39
+
40
+ ## React and TypeScript Standards
41
+
42
+ ### Routing
43
+
44
+ Use a single router package. With `createBrowserRouter` / `RouterProvider`, all imports must come from `react-router` (not `react-router-dom`).
45
+
46
+ ### Component Library and Styling
47
+
48
+ - **shadcn/ui** for components: `import { Button } from '@/components/ui/button';`
49
+ - **Tailwind CSS** utility classes
50
+
51
+ ### URL and Path Handling
52
+
53
+ Apps run behind dynamic base paths. Router navigation (`<Link to>`, `navigate()`) uses absolute paths (`/x`). Non-router attributes (`<img src>`) use dot-relative (`./x`). Prefer Vite `import` for static assets.
54
+
55
+ ### TypeScript
56
+
57
+ - Never use `any` — use proper types, generics, or `unknown` with type guards
58
+ - Event handlers: `(event: React.FormEvent<HTMLFormElement>): void`
59
+ - State: `useState<User | null>(null)` — always provide the type parameter
60
+ - No unsafe assertions (`obj as User`) — use type guards instead
61
+
62
+ ### Module Restrictions
63
+
64
+ React UI bundles must not import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only). For data access, use the `using-ui-bundle-salesforce-data` skill.
65
+
66
+ ---
67
+
68
+ ## Design Thinking
69
+
70
+ Before coding, commit to a bold aesthetic direction:
71
+
72
+ - **Purpose:** What problem does this interface solve? Who uses it?
73
+ - **Tone:** Pick a clear direction — brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial. Use these as inspiration but design one true to the context.
74
+ - **Differentiation:** What makes this unforgettable? What's the one thing someone will remember?
75
+
76
+ Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
77
+
78
+ ---
79
+
80
+ ## Frontend Aesthetics
81
+
82
+ - **Typography:** Choose distinctive, characterful fonts. Pair a display font with a refined body font. Never default to Inter, Roboto, Arial, Space Grotesk, or system fonts.
83
+ - **Color:** Commit to a cohesive palette using CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Avoid cliched purple gradients on white.
84
+ - **Motion:** Focus on high-impact moments — one well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise. Prefer CSS-only solutions; use Motion library for React when available.
85
+ - **Spatial Composition:** Unexpected layouts — asymmetry, overlap, diagonal flow, grid-breaking elements. Generous negative space OR controlled density.
86
+ - **Backgrounds & Depth:** Create atmosphere rather than defaulting to solid colors. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
87
+
88
+ Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful spacing/typography. No two designs should look the same — vary themes, fonts, and aesthetics across generations.
89
+
90
+ ---
91
+
92
+ ## Clarifying Questions
93
+
94
+ Ask one question at a time and stop when you have enough context.
95
+
96
+ ### For a Page
97
+ 1. Name and purpose?
98
+ 2. URL path?
99
+ 3. Should it appear in navigation?
100
+ 4. Access control? (public, authenticated via `PrivateRoute`, or unauthenticated via `AuthenticationRoute`)
101
+ 5. Content sections? (list, form, table, detail view)
102
+ 6. Data fetching needs?
103
+
104
+ ### For a Header / Footer
105
+ 1. Header, footer, or both?
106
+ 2. Contents? (logo, nav links, user avatar, copyright, social icons)
107
+ 3. Sticky header?
108
+ 4. Color scheme or style direction?
109
+
110
+ ### For a Component
111
+ 1. What should it do?
112
+ 2. Which page does it belong to?
113
+ 3. Shared/reusable or specific to one feature?
114
+ 4. Data or props needed?
115
+ 5. Internal state? (loading, toggle, form state)
116
+ 6. Specific shadcn components to use?
117
+
118
+ ---
119
+
120
+ ## Verification
121
+
122
+ Before completing, run lint and build from the UI bundle directory. Lint must result in 0 errors and build must succeed.
@@ -64,7 +64,7 @@ export default function HomePage() {
64
64
 
65
65
  ### Useful Patterns — Component
66
66
 
67
- - **Programmatic navigation:** use `useNavigate` from `react-router`; call `navigate(path)` — consistent with GlobalSearchInput, SearchResultCard, MaintenanceTable, and other components in the web application.
67
+ - **Programmatic navigation:** use `useNavigate` from `react-router`; call `navigate(path)` — consistent with GlobalSearchInput, SearchResultCard, MaintenanceTable, and other components in the UI bundle.
68
68
  - **Page container:** `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12`
69
69
  - **Icons:** `lucide-react`; add `aria-hidden="true"` on decorative icons
70
70
  - **Focus styles:** use `focus-visible:` variants
@@ -0,0 +1,169 @@
1
+ ---
2
+ name: creating-b2b-commerce-store
3
+ description: "Interactive workflow to create Commerce B2B Stores and retrieve storefront metadata. Use when users want to: create B2B Commerce stores, build Commerce storefronts, set up B2B stores from Vibes, retrieve Commerce metadata, deploy Commerce experiences, work with DigitalExperienceBundle for Commerce."
4
+ Critical: "Agents must follow the interactive flow and NEVER create storefront metadata from scratch."
5
+ license: Apache-2.0
6
+ compatibility: "Requires Commerce licenses, Experience Cloud, Salesforce CLI"
7
+ metadata:
8
+ version: "1.0"
9
+ category: "commerce"
10
+ ---
11
+
12
+ # Commerce B2B Storefront Creation
13
+
14
+ Interactive workflow to create a Commerce B2B Store in Salesforce and retrieve the auto-generated storefront metadata to your repository.
15
+
16
+ ## Critical Concepts
17
+
18
+ Commerce B2B = Store (backend data) + Storefront (frontend metadata). **Store must be created first** in the org to auto-generate the Storefront. Never create storefront metadata manually.
19
+
20
+ > See [Store vs Storefront Reference](references/store-vs-storefront.md)
21
+
22
+ ## When to Use This Skill
23
+
24
+ Trigger when users request:
25
+ - "Create a B2B Commerce store"
26
+ - "Build a Commerce storefront"
27
+ - "Set up Commerce B2B"
28
+ - "Create B2B Commerce"
29
+ - "Retrieve Commerce storefront metadata"
30
+ - "Deploy B2B storefront"
31
+
32
+ ## Rules That Always Apply
33
+
34
+ 1. **Always follow the interactive flow.** Do NOT skip steps. Each step requires user confirmation before proceeding.
35
+
36
+ 2. **Never create storefront metadata manually.** The Commerce setup wizard generates hundreds of configuration values. Manual creation will fail.
37
+
38
+ 3. **Always list sites before retrieval.** Store names get underscores and number suffixes (e.g., "My B2B Store" → "My_B2B_Store1"). Let the user select from the actual list.
39
+
40
+ 4. **Always use `--json` flag.** Include `--json` on all Salesforce CLI commands for parseable output.
41
+
42
+ ## Interactive Workflow: 7 Steps
43
+
44
+ ### Step 1: Explain Commerce B2B Concept
45
+
46
+ **Agent explains:** Commerce has Store (data) + Storefront (metadata). Store must be created first.
47
+
48
+ > See: [Store vs Storefront Reference](references/store-vs-storefront.md)
49
+
50
+ ---
51
+
52
+ ### Step 2: Guide User to Create B2B Store
53
+
54
+ **Agent provides these steps:**
55
+
56
+ 1. Navigate to **Setup → Commerce → Stores**
57
+ - Or: **App Launcher → Commerce → Create Store**
58
+
59
+ 2. Click **"Create Store"** or **"Setup New Store"**
60
+
61
+ 3. Select **"Commerce Store"** as the store type
62
+
63
+ 4. Follow the wizard:
64
+ - **Store Name**: Choose descriptive name (e.g., "My B2B Store")
65
+ - Important: Spaces become underscores in folder names
66
+ - **Site URL**: Unique URL name for the site
67
+
68
+ 5. Complete wizard - it creates:
69
+ - WebStore record
70
+ - Default buyer group and entitlement policies
71
+ - Associated Digital Experience (LWR site)
72
+
73
+ 6. Optional: Configure payment gateway, tax provider, shipping
74
+
75
+ **Agent then asks:**
76
+ "Have you completed creating the B2B Store in your org? Reply 'yes' when ready and provide the store name you used."
77
+
78
+ ---
79
+
80
+ ### Step 3: Get User Confirmation
81
+
82
+ **Agent waits for:** User confirmation and store name
83
+
84
+ **Agent validates:** Store name format (no special characters, spaces will appear as underscores)
85
+
86
+ **Agent acknowledges:** "Great! Let me list the available storefronts in your org..."
87
+
88
+ ---
89
+
90
+ ### Step 4: List Available LWR Sites
91
+
92
+ **Agent executes:**
93
+ ```bash
94
+ sf org list metadata --metadata-type DigitalExperienceConfig --json
95
+ ```
96
+
97
+ **Agent should:**
98
+ - Parse JSON output to extract site names
99
+ - Display as numbered list
100
+ - Explain naming (underscores, number suffixes)
101
+
102
+ **Example output:**
103
+ ```
104
+ Available Digital Experience sites:
105
+ 1. My_B2B_Store1
106
+ 2. Partner_Portal
107
+ 3. Customer_Community
108
+ ```
109
+
110
+ ---
111
+
112
+ ### Step 5: Let User Select Storefront
113
+
114
+ **Agent asks:**
115
+ "Which site corresponds to your B2B Store? Select the site name:"
116
+
117
+ **Agent validates:** Selection matches available sites
118
+
119
+ **Agent confirms:** "Got it! I'll retrieve metadata for [site-name]..."
120
+
121
+ ---
122
+
123
+ ### Step 6: Retrieve Storefront Metadata
124
+
125
+ **Agent executes:**
126
+ ```bash
127
+ sf project retrieve start -m DigitalExperienceBundle:site/<selected-store-name> --json
128
+ ```
129
+
130
+ **Agent should:**
131
+ - Show retrieval progress
132
+ - Confirm successful retrieval
133
+ - List retrieved directory structure
134
+
135
+ **Expected output:**
136
+ ```
137
+ Retrieved: force-app/main/default/digitalExperiences/site/My_B2B_Store1/
138
+ ├── My_B2B_Store1.digitalExperience-meta.xml
139
+ ├── sfdc_cms__view/ (home, current_cart, detail_*, list_*, etc.)
140
+ ├── sfdc_cms__site/
141
+ ├── sfdc_cms__route/
142
+ └── [other sfdc_cms__* directories]
143
+ ```
144
+
145
+ ---
146
+
147
+ ### Step 7: Provide Next Steps
148
+
149
+ **Agent provides:**
150
+
151
+ ✅ **Metadata retrieved successfully!**
152
+
153
+ **Next steps:**
154
+ - Customize with custom LWCs or branding changes
155
+ - Deploy: `sf project deploy start --source-dir force-app/main/default/digitalExperiences/site/My_B2B_Store1/ --json`
156
+
157
+ **Resources:** [DigitalExperienceBundle Docs](https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_digitalexperiencebundle.htm), [B2B Commerce Guide](https://developer.salesforce.com/docs/atlas.en-us.b2b_commerce_dev_guide.meta/b2b_commerce_dev_guide/)
158
+
159
+ ---
160
+
161
+ ## Reference
162
+
163
+ - **[store-vs-storefront.md](references/store-vs-storefront.md)** - Technical details on Store vs Storefront, source control, and why manual creation fails
164
+
165
+ ---
166
+
167
+ ## Remember
168
+
169
+ **Store first (creates storefront) → Retrieve → Customize**