Generating Ui Bundle Features
Install pre-built Salesforce UI bundle features for login, protected routes, and global search instead of hand-rolling auth and search in uiBundles apps.
Install
npx skills add https://github.com/forcedotcom/sf-skills --skill generating-ui-bundle-featuresWhat is this skill?
- Mandatory when adding authentication or search to any project with uiBundles/*/src/
- 4-step workflow: audit src/, list/describe features via npx CLI, then install into a named ui-bundle-dir
- Pre-built packages cover session management, protected routes, and cross-page search—not generic UI from scratch
- Supports keyword filter (--search), verbose listings, and describe for components, deps, and copy operations
- Explicitly replaces one-off auth/search implementations with tested Salesforce UI bundle features
Adoption & trust: 671 installs on skills.sh; 513 GitHub stars; 2/3 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Primary fit
Canonical shelf is Build because the skill gates on a uiBundles/*/src/ tree and drives the @salesforce/ui-bundle-features install workflow into that bundle. Integrations fits the CLI-driven feature packages (auth, search, shadcn/ui, GraphQL, Agentforce) merged into an existing UI bundle codebase.
Common Questions / FAQ
Is Generating Ui Bundle Features safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Generating Ui Bundle Features
# UI Bundle Features ## Installing Pre-built Features Always check for an existing feature before building something from scratch. The features CLI installs pre-built, tested packages into Salesforce UI bundles — from foundational UI libraries (shadcn/ui) to full-stack capabilities (authentication, search, navigation, GraphQL, Agentforce AI). ### Workflow 1. **Search project code first** — check `src/` for existing implementations before installing anything. Scope searches to `src/` to avoid matching `node_modules/` or `dist/`. 2. **Search available features** — use `npx @salesforce/ui-bundle-features list` with `--search <query>` to filter by keyword. Use `--verbose` for full descriptions. 3. **Describe a feature** — use `npx @salesforce/ui-bundle-features describe <feature>` to see components, dependencies, copy operations, and example files. 4. **Install** — use `npx @salesforce/ui-bundle-features install <feature> --ui-bundle-dir <name>`. Key options: - `--dry-run` to preview changes - `--yes` for non-interactive mode (skips conflicts) - `--on-conflict error` to detect conflicts, then `--conflict-resolution <file>` to resolve them If no matching feature is found, ask the user before building a custom implementation — a relevant feature may exist under a different name. ### Conflict Handling In non-interactive environments, use the two-pass approach: first run with `--on-conflict error` to detect conflicts, then create a resolution JSON file (`{ "path": "skip" | "overwrite" }`) and re-run with `--conflict-resolution`. ### Post-install: Integrating Example Files Features may include `__example__` files showing integration patterns. For each: 1. Read the example file to understand the pattern 2. Read the target file (shown in `describe` output) 3. Apply the pattern from the example into the target 4. Delete the example file after successful integration ### Hint Placeholders Some copy paths use `<descriptive-name>` placeholders (e.g., `<desired-page-with-search-input>`) that the CLI does not resolve. After installation, rename or relocate these files to the intended target, or integrate their patterns into an existing file.