Summary
Activate this before touching anything in an existing UI bundle's src directory. It enforces project-specific conventions that general Claude knowledge gets wrong: shadcn/ui imports, Tailwind styling, dynamic base path routing from the `<base>` tag, and treating appLayout.tsx as the single source of truth for navigation. Without it, you'll generate broken imports and hardcoded paths that fail in Salesforce deployments. The design guidance is refreshingly opinionated, pushing you to commit to a bold aesthetic direction instead of defaulting to generic purple gradients and Inter font. It also includes a decision matrix for whether you're building a page, component, or header, which saves clarifying questions upfront.
Install to Claude Code
npx -y skills add forcedotcom/sf-skills --skill building-ui-bundle-frontend --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
