UI bundles are a way to create custom apps inside Salesforce. You can build a frontend using React and then host it as an internal app or a public site. This skill helps you set up the metadata and configuration files needed for the bundle to work.
Start by running the sf template generate ui-bundle command with the --template reactbasic flag. The bundle name must be alphanumeric only. After scaffolding, replace all placeholder content with real page content.
The most important step is to set a hosting target in the .uibundle-meta.xml file. Without a target, the bundle will not appear anywhere. Use generating-ui-bundle-site for external sites or generating-ui-bundle-custom-app for internal apps.
Global
mkdir -p ~/.claude/skills/generating-ui-bundle-metadataProject
mkdir -p .claude/skills/generating-ui-bundle-metadataSource Repository
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density