diff --git a/skills/building-ui-bundle-app/SKILL.md b/skills/building-ui-bundle-app/SKILL.md index 336c4bc..c4ab1be 100644 --- a/skills/building-ui-bundle-app/SKILL.md +++ b/skills/building-ui-bundle-app/SKILL.md @@ -1,9 +1,9 @@ --- name: building-ui-bundle-app -description: "MUST activate when the project contains a uiBundles/*/src/ directory or sfdx-project.json and the prompt says create, build, construct, or generate a new app, site, or page from scratch — even if the prompt also describes visual styling. MUST also activate when the task spans more than one ui-bundle skill. Use this skill when building a complete app end-to-end. This is the orchestrator that coordinates scaffolding, features, data access, frontend UI, integrations, and deployment in the correct dependency order. Without it, phases execute out of order and the app breaks. Do NOT use for Lightning Experience apps with custom objects (use generating-lightning-app). Do NOT use for single-concern edits to an existing page (use building-ui-bundle-frontend)." +description: "MUST activate when the project contains a uiBundles/*/src/ directory or sfdx-project.json and the prompt says create, build, construct, or generate a new app, site, or page from scratch — even if the prompt also describes visual styling. MUST also activate when the task spans more than one ui-bundle skill. Use this skill when building a complete app end-to-end. This is the orchestrator that coordinates scaffolding, features, data access, frontend UI, integrations, and deployment in the correct dependency order. Without it, phases execute out of order and the app breaks. Do NOT use for Lightning Experience apps with custom objects (use generating-lightning-app). Do NOT use for single-concern edits to an existing page (use editing-ui-bundle-frontend)." metadata: version: "1.0" - 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 + related-skills: generating-ui-bundle-metadata, generating-ui-bundle-features, using-ui-bundle-salesforce-data, editing-ui-bundle-frontend, implementing-ui-bundle-agentforce-conversation-client, implementing-ui-bundle-file-upload, deploying-ui-bundle, generating-experience-react-site --- # Building a UI Bundle App @@ -29,7 +29,7 @@ Build a complete, deployable Salesforce React UI bundle application from a natur **Do NOT use when:** -- Creating a single page or component (use `building-ui-bundle-frontend`) +- Creating a single page or component (use `editing-ui-bundle-frontend`) - Only installing a feature (use `generating-ui-bundle-features`) - Only setting up data access (use `using-ui-bundle-salesforce-data`) - Only deploying an existing app (use `deploying-ui-bundle`) @@ -190,7 +190,7 @@ SKILL LOAD ORDER: 1. generating-ui-bundle-metadata 2. generating-ui-bundle-features (if features needed) 3. using-ui-bundle-salesforce-data (if data access needed) -4. building-ui-bundle-frontend +4. editing-ui-bundle-frontend 5a. implementing-ui-bundle-agentforce-conversation-client (if chat requested) 5b. implementing-ui-bundle-file-upload (if file upload requested) 6. deploying-ui-bundle @@ -231,7 +231,7 @@ Execute each phase sequentially. Complete all steps within a phase before moving - 4. Checkpoint: Data layer ready -- proceed to Phase 4 **Phase 4 -- UI** -- 1. Load skill: Invoke `building-ui-bundle-frontend` +- 1. Load skill: Invoke `editing-ui-bundle-frontend` - 2. Execute: Build layout, pages, components, navigation. Replace all boilerplate. - 3. Verify: Run lint and build -- 0 errors required - 4. Checkpoint: UI complete -- proceed to Phase 5 @@ -322,4 +322,4 @@ Every generated app must feel purpose-built. Replace "React App" titles, "Vite + ### 3. Design with Intent -Follow the design thinking and frontend aesthetics guidance from `building-ui-bundle-frontend`. Every app should have a clear visual direction -- not generic defaults. +Follow the design thinking and frontend aesthetics guidance from `editing-ui-bundle-frontend`. Every app should have a clear visual direction -- not generic defaults. diff --git a/skills/building-ui-bundle-frontend/SKILL.md b/skills/editing-ui-bundle-frontend/SKILL.md similarity index 84% rename from skills/building-ui-bundle-frontend/SKILL.md rename to skills/editing-ui-bundle-frontend/SKILL.md index 372da9c..a78f70b 100644 --- a/skills/building-ui-bundle-frontend/SKILL.md +++ b/skills/editing-ui-bundle-frontend/SKILL.md @@ -1,6 +1,6 @@ --- -name: building-ui-bundle-frontend -description: "MUST activate before editing ANY file under uiBundles/*/src/ for visual or UI changes to an EXISTING app — pages, components, sections, layout, styling, colors, fonts, navigation, animations, or any look-and-feel change. Use this skill when modifying pages, components, layout, styling, or navigation in an existing UI bundle app. Activate when the project contains appLayout.tsx, routes.tsx, src/pages/, src/components/, or global.css. This skill contains critical project-specific conventions (appLayout.tsx shell, shadcn/ui components, Tailwind CSS, Salesforce base-path routing, module restrictions) that override general knowledge. Without this skill, generated code will use wrong imports, break routing, or ignore project structure. Do NOT use when creating a new app from scratch (use building-ui-bundle-app instead)." +name: editing-ui-bundle-frontend +description: "MUST activate before editing, modifying, updating, or adding to ANY file under uiBundles/*/src/ for an EXISTING app — adding pages, editing components, changing sections, updating layout, modifying styling, adjusting colors, switching fonts, fixing navigation, adding animations, or any look-and-feel change. Use this skill when the user wants to add a page, edit a page, modify a component, change styling, update navigation, add a form, customize layout, adjust theme, or tweak UI in an existing UI bundle app. Activate when the project already contains appLayout.tsx, routes.tsx, src/pages/, src/components/, or global.css. This skill contains critical project-specific conventions (appLayout.tsx shell, shadcn/ui components, Tailwind CSS, Salesforce base-path routing, module restrictions) that override general knowledge. Without this skill, generated code will use wrong imports, break routing, or ignore project structure. Do NOT use when creating a brand-new app from scratch (use building-ui-bundle-app instead)." --- # UI Bundle UI diff --git a/skills/building-ui-bundle-frontend/implementation/component.md b/skills/editing-ui-bundle-frontend/implementation/component.md similarity index 100% rename from skills/building-ui-bundle-frontend/implementation/component.md rename to skills/editing-ui-bundle-frontend/implementation/component.md diff --git a/skills/building-ui-bundle-frontend/implementation/header-footer.md b/skills/editing-ui-bundle-frontend/implementation/header-footer.md similarity index 100% rename from skills/building-ui-bundle-frontend/implementation/header-footer.md rename to skills/editing-ui-bundle-frontend/implementation/header-footer.md diff --git a/skills/building-ui-bundle-frontend/implementation/page.md b/skills/editing-ui-bundle-frontend/implementation/page.md similarity index 100% rename from skills/building-ui-bundle-frontend/implementation/page.md rename to skills/editing-ui-bundle-frontend/implementation/page.md diff --git a/skills/generating-ui-bundle-metadata/SKILL.md b/skills/generating-ui-bundle-metadata/SKILL.md index 591dd28..daea4eb 100644 --- a/skills/generating-ui-bundle-metadata/SKILL.md +++ b/skills/generating-ui-bundle-metadata/SKILL.md @@ -21,7 +21,7 @@ sf template generate ui-bundle -n CoffeeBoutique --template reactbasic After generation: 1. Replace all default boilerplate — "React App", "Vite + React", default ``, placeholder text 2. Populate the home page with real content (landing section, banners, hero, navigation) -3. Update navigation and placeholders (see the `building-ui-bundle-frontend` skill) +3. Update navigation and placeholders (see the `editing-ui-bundle-frontend` skill) Always install dependencies before running any scripts in the UI bundle directory.