skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

building-ui-bundle-frontend

Enforce routing, styling, and module restrictions for Salesforce UI bundle frontend modifications.

803|289|Updated Nov 7, 2025
Search Tags:#typescript#react#routing#shadcn/ui#tailwind#ui bundle
One-click install
npx skills add https://github.com/forcedotcom/sf-skills --skill building-ui-bundle-frontend-forcedotcom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-ui-bundle-frontend
Source: https://github.com/forcedotcom/sf-skills/tree/main/skills/building-ui-bundle-frontend
Command: npx skills add https://github.com/forcedotcom/sf-skills --skill building-ui-bundle-frontend-forcedotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents broken imports, wrong routing, and inconsistent UI patterns when you need to change pages, components, navigation, or styling in an existing UI bundle app.

Core Features & Use Cases

  • Project-specific frontend conventions: Ensures generated code follows appLayout.tsx shell, shadcn/ui usage, Tailwind design tokens, and Salesforce base-path routing.
  • Correct routing and path handling: Guides you to derive basename from the <base href> tag and use absolute router navigation while keeping asset URLs dot-relative.
  • Safe module boundaries: Prevents importing platform-only modules (like lightning/* or @wire) inside React UI bundles, and routes data access through the proper UI-bundle data skill.
  • Implementation verification: Requires lint/build success to confirm the app remains functional after UI changes.

Quick Start

Activate this skill when you are editing uiBundles/*/src for an existing UI bundle so the router, imports, styling, and module rules match that app’s conventions.

Frequently Asked Questions about building-ui-bundle-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I edit an existing Salesforce UI bundle without breaking routing?▼

To edit a Salesforce UI bundle without breaking routing, enforce app-specific React Router conventions by deriving the basename from the <base href> tag and using absolute router navigation for pages and components.

How do I apply styling changes to a React UI bundle using Tailwind and shadcn/ui?▼

Apply styling changes to a React UI bundle by using shadcn/ui components alongside Tailwind design tokens exclusively. This ensures visual updates match the existing appLayout.tsx shell and global.css conventions without introducing conflicting style frameworks.

Can I use lightning components or @wire inside a React UI bundle?▼

You cannot safely import platform-only modules like lightning/* or @wire inside React UI bundles. Route data access through the proper UI-bundle data skill to maintain safe module boundaries and prevent broken imports.

How do I verify TypeScript and lint checks pass after modifying UI bundle pages?▼

Verify TypeScript and lint checks by running lint and build commands directly from the UI bundle directory. This confirms the app remains functional and safe TypeScript practices were followed after visual UI changes.

What are the limitations when modifying navigation in an existing UI bundle?▼

Limitations when modifying navigation include avoiding platform-only modules and adhering to Salesforce base-path routing. Keep asset URLs dot-relative while using absolute router navigation to prevent broken imports and inconsistent UI patterns.

Related Skills

Explore More Software Engineering Skills→
cchrisvcchrisv

building-ui-bundle-frontend

Enforce project-specific conventions when editing existing UI bundle frontends.

Community
Advanced
GolferGeekGolferGeek

Quality Gates

Run npm lint, format, test, and build before commits.

Community
Advanced
TheOrcDevTheOrcDev
2.0k

bundle-barrel-imports

Replace barrel exports with direct source imports in React projects.

Community
Basic
angryracoonangryracoon

experience-ui-bundle-frontend-generate

Generate compliant frontend changes for Salesforce Experience UI bundle apps.

Community
Advanced