UI Bundle UI
Identify the Task
Determine which category the request falls into:
Category
Examples
Implementation Guide
Page
New routed page (contacts, dashboard, settings)
implementation/page.md
Header / Footer
Site-wide nav bar, footer, branding
implementation/header-footer.md
Component
Widget, card, table, form, dialog
implementation/component.md
Layout and Navigation
appLayout.tsx
is the source of truth for navigation and layout. Every page shares this shell.
When making any change that affects navigation, header, footer, sidebar, theme, or layout:
Edit
src/appLayout.tsx
— the layout used by
routes.tsx
Replace all default/template nav items and labels with app-specific links and names
Replace placeholder app name everywhere: header, nav brand, footer,
<title>
in
index.html
Before finishing, confirm: Did I update
appLayout.tsx
with real nav items and branding?
What
Where
Layout, nav, branding
src/appLayout.tsx
Document title
index.html
Root page content
Component at root route in
routes.tsx
React and TypeScript Standards
Routing
Use a single router package. With
createBrowserRouter
/
RouterProvider
, all imports must come from
react-router
(not
react-router-dom
).
If the app uses a client-side router (React Router, Remix Router, Vue Router, etc.), always derive basename / basepath / base from the document's
<base href>
tag at runtime. Never hardcode the basename:
const
basename
=
document
.
querySelector
(
'base'
)
?
new
URL
(
document
.
querySelector
(
'base'
)
.
href
)
.
pathname
.
replace
(
/
\/
$
/
,
''
)
:
'/'
;
const
router
=
createBrowserRouter
(
routes
,
{
basename
}
)
;
Component Library and Styling
shadcn/ui
for components:
import { Button } from '@/components/ui/button';
Tailwind CSS
utility classes
URL and Path Handling
Apps run behind dynamic base paths. Router navigation (
<Link to>
,
navigate()
) uses absolute paths (
/x
). Non-router attributes (
![]()
) use dot-relative (
./x
). Prefer Vite
import
for static assets.
TypeScript
Never use
any
— use proper types, generics, or
unknown
with type guards
Event handlers:
(event: React.FormEvent): void
State:
useState(null)
— always provide the type parameter
No unsafe assertions (
obj as User
) — use type guards instead
Module Restrictions
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.
Design Thinking
Before coding, commit to a bold aesthetic direction:
Purpose:
What problem does this interface solve? Who uses it?
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.
Differentiation:
What makes this unforgettable? What's the one thing someone will remember?
Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Frontend Aesthetics
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.
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.
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.
Spatial Composition:
Unexpected layouts — asymmetry, overlap, diagonal flow, grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Depth:
Create atmosphere rather than defaulting to solid colors. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
Mobile Responsiveness:
All generated UI MUST be mobile-responsive. Use Tailwind responsive prefixes (
sm:
,
md:
,
lg:
) to adapt layouts across breakpoints. Stack columns on small screens, use flexible grids, and ensure touch targets are at least 44px. Test that navigation, typography, and spacing work on mobile viewports.
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.
Clarifying Questions
Ask one question at a time and stop when you have enough context.
For a Page
Name and purpose?
URL path?
Should it appear in navigation?
Access control? (public, authenticated via
PrivateRoute
, or unauthenticated via
AuthenticationRoute
)
Content sections? (list, form, table, detail view)
Data fetching needs?
For a Header / Footer
Header, footer, or both?
Contents? (logo, nav links, user avatar, copyright, social icons)
Sticky header?
Color scheme or style direction?
For a Component
What should it do?
Which page does it belong to?
Shared/reusable or specific to one feature?
Data or props needed?
Internal state? (loading, toggle, form state)
Specific shadcn components to use?
Verification
Before completing, run lint and build from the UI bundle directory. Lint must result in 0 errors and build must succeed.