Claude MarketplacesSubmit
forcedotcom avatar

Building Ui Bundle Frontend

forcedotcom/sf-skills

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.

skills.sh installs
3.7K
GitHub stars
1.2K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add forcedotcom/sf-skills --skill building-ui-bundle-frontend --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/forcedotcom/sf-skills
Categories
Frontend Development, Sales & Marketing, Design & UI/UX, CLI & Terminal
First seen
Jun 3, 2026

More from forcedotcom/sf-skills

All 158

Recommended

More Frontend Development
1jezweb avatartailwind-v4-shadcnjezweb/claude-skillsSet up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, au2.7Kskills.sh installs
2vercel-labs avatarshadcn-sveltevercel-labs/json-renderPre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte cata1.2Kskills.sh installs
3laguagu avatarnextjs-shadcnlaguagu/claude-code-nextjs-skillsCreates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Al845skills.sh installs
4mattbx avatarshadcn-component-reviewmattbx/shadcn-skillsReview custom components and layouts against shadcn design patterns, visual style conventions (Vega, Nova, Maia, Lyra, Mira), composition rules, design token us664skills.sh installs
5dauquangthanh avatarfrontend-ui-ux-designdauquangthanh/hanoi-rainbowCreates comprehensive frontend UI/UX designs including user interfaces, design systems, component libraries, responsive layouts, and accessibility implementatio541skills.sh installs
6pproenca avatartailwind-responsive-uipproenca/dot-skillsResponsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multip470skills.sh installs