experience-ui-bundle-frontend-generate

Name: experience-ui-bundle-frontend-generate
Author: forcedotcom

1.7kinstalls272forks

How to install experience-ui-bundle-frontend-generate?

forcedotcom/sf-skills/experience-ui-bundle-frontend-generate

$npx -y skills add forcedotcom/sf-skills --skill experience-ui-bundle-frontend-generate

Installs into the current project.

Summary

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, st

Files · 1

View on GitHub

SKILL.md

1	# UI Bundle UI
2
3	## Identify the Task
4
5	Determine which category the request falls into:
6
7	\| Category \| Examples \| Implementation Guide \|
8	\|----------\|----------\|---------------------\|
9	\| Page \| New routed page (contacts, dashboard, settings) \| `references/page.md` \|
10	\| Header / Footer \| Site-wide nav bar, footer, branding \| `references/header-footer.md` \|
11	\| Component \| Widget, card, table, form, dialog \| `references/component.md` \|
12
13	---
14
15	## Layout and Navigation
16
17	`appLayout.tsx` is the source of truth for navigation and layout. Every page shares this shell.
18
19	When making any change that affects navigation, header, footer, sidebar, theme, or layout:
20
21	1. Edit `src/appLayout.tsx` — the layout used by `routes.tsx`
22	2. Replace all default/template nav items and labels with app-specific links and names
23	3. Replace placeholder app name everywhere: header, nav brand, footer, `<title>` in `index.html`
24
25	Before finishing, confirm: Did I update `appLayout.tsx` with real nav items and branding?
26
27	\| What \| Where \|
28	\|------\|-------\|
29	\| Layout, nav, branding \| `src/appLayout.tsx` \|
30	\| Document title \| `index.html` \|
31	\| Root page content \| Component at root route in `routes.tsx` \|
32
33	---
34
35	## React and TypeScript Standards
36
37	### Routing
38
39	Use a single router package. With `createBrowserRouter` / `RouterProvider`, all imports must come from `react-router` (not `react-router-dom`).
40
41	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:
42
43	```js
44	const basename = document.querySelector('base')
45	? new URL(document.querySelector('base').href).pathname.replace(/\/$/, '')
46	: '/';
47	const router = createBrowserRouter(routes, { basename });
48	```
49
50	### Component Library and Styling
51
52	- shadcn/ui for components: `import { Button } from '@/components/ui/button';`
53	- Tailwind CSS utility classes
54
55	### URL and Path Handling
56
57	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.
58
59	### TypeScript
60
61	- Never use `any` — use proper types, generics, or `unknown` with type guards
62	- Event handlers: `(event: React.FormEvent<HTMLFormElement>): void`
63	- State: `useState<User \| null>(null)` — always provide the type parameter
64	- No unsafe assertions (`obj as User`) — use type guards instead
65
66	### Module Restrictions
67
68	React UI bundles must not import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only). For data access, use the `experience-ui-bundle-salesforce-data-access` skill.
69
70	---
71
72	## Design Thinking
73
74	Before coding, commit to a bold aesthetic direction:
75
76	- Purpose: What problem does this interface solve? Who uses it?
77	- 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.
78	- Differentiation: What makes this unforgettable? What's the one thing someone will remember?
79
80	Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
81
82	---
83
84	## Frontend Aesthetics
85
86	- 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.
87	- 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.
88	- 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.
89	- Spatial Composition: Unexpected layou

People who liked this also viewed

6 picks

Type

experience-ui-bundle-frontend-generate

1.7kinstalls272forks

View on GitHub

How to install experience-ui-bundle-frontend-generate?

forcedotcom/sf-skills/experience-ui-bundle-frontend-generate

$npx -y skills add forcedotcom/sf-skills --skill experience-ui-bundle-frontend-generate

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# UI Bundle UI
2
3	## Identify the Task
4
5	Determine which category the request falls into:
6
7	\| Category \| Examples \| Implementation Guide \|
8	\|----------\|----------\|---------------------\|
9	\| Page \| New routed page (contacts, dashboard, settings) \| `references/page.md` \|
10	\| Header / Footer \| Site-wide nav bar, footer, branding \| `references/header-footer.md` \|
11	\| Component \| Widget, card, table, form, dialog \| `references/component.md` \|
12
13	---
14
15	## Layout and Navigation
16
17	`appLayout.tsx` is the source of truth for navigation and layout. Every page shares this shell.
18
19	When making any change that affects navigation, header, footer, sidebar, theme, or layout:
20
21	1. Edit `src/appLayout.tsx` — the layout used by `routes.tsx`
22	2. Replace all default/template nav items and labels with app-specific links and names
23	3. Replace placeholder app name everywhere: header, nav brand, footer, `<title>` in `index.html`
24
25	Before finishing, confirm: Did I update `appLayout.tsx` with real nav items and branding?
26
27	\| What \| Where \|
28	\|------\|-------\|
29	\| Layout, nav, branding \| `src/appLayout.tsx` \|
30	\| Document title \| `index.html` \|
31	\| Root page content \| Component at root route in `routes.tsx` \|
32
33	---
34
35	## React and TypeScript Standards
36
37	### Routing
38
39	Use a single router package. With `createBrowserRouter` / `RouterProvider`, all imports must come from `react-router` (not `react-router-dom`).
40
41	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:
42
43	```js
44	const basename = document.querySelector('base')
45	? new URL(document.querySelector('base').href).pathname.replace(/\/$/, '')
46	: '/';
47	const router = createBrowserRouter(routes, { basename });
48	```
49
50	### Component Library and Styling
51
52	- shadcn/ui for components: `import { Button } from '@/components/ui/button';`
53	- Tailwind CSS utility classes
54
55	### URL and Path Handling
56
57	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.
58
59	### TypeScript
60
61	- Never use `any` — use proper types, generics, or `unknown` with type guards
62	- Event handlers: `(event: React.FormEvent<HTMLFormElement>): void`
63	- State: `useState<User \| null>(null)` — always provide the type parameter
64	- No unsafe assertions (`obj as User`) — use type guards instead
65
66	### Module Restrictions
67
68	React UI bundles must not import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only). For data access, use the `experience-ui-bundle-salesforce-data-access` skill.
69
70	---
71
72	## Design Thinking
73
74	Before coding, commit to a bold aesthetic direction:
75
76	- Purpose: What problem does this interface solve? Who uses it?
77	- 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.
78	- Differentiation: What makes this unforgettable? What's the one thing someone will remember?
79
80	Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
81
82	---
83
84	## Frontend Aesthetics
85
86	- 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.
87	- 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.
88	- 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.
89	- Spatial Composition: Unexpected layou

People who liked this also viewed

6 picks

Type