Claude Marketplaces
SkillsMCP serversMarketplacesDigestTools

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP servers by category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control
Claude Marketplaces

An independent directory of skills, plugins and MCP servers for Claude Code. Not affiliated with Anthropic.

Browse

  • Skills
  • MCP servers
  • Marketplaces
  • Weekly digest
  • Skill index
  • MCP index
  • Marketplace index

Site

  • About
  • Tools
  • Feedback
  • Privacy
  • llms.txt
  • Plugins reference

Maker

  • Agent Caffeine
  • knobs
  • attention awareness
  • mertbuilds.com
Made by mertbuilds.com
Skills/Frontend Development
forcedotcom avatar

Building Ui Bundle Frontend

forcedotcom/sf-skills

Activate this before touching anything in an existing UI bundle's src directory.

installs
3.7K
GitHub stars
803
last updated
Aug 21, 2026
View on GitHubSave

Install

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

Installs into .claude/skills of the current project.

Sponsors

CodeRabbitSponsoredTry For FreeLid closed, agents workingDownload freeGranola, the best AI meeting recorderSponsoredDownload for freeDevtools for design engineersTry it livebelt - the only tool your agent needsSponsoredone prompt installOpen StepsSponsoredDownload for freeAppSignalSponsoredStart Free TrialBlock distraction from your iPhoneBlock now (100% free)

What it does

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.

Files

Select a file.

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
  • Generating Ui Bundle Features3.7K
  • Design Systems Slds2 Migrate3.7K
  • Agentforce Observe3.7K
  • Deploying Ui Bundle3.7K
  • Dx Org Permission Set Assign3.7K
  • Dx Org Switch3.7K
  • Generating Ui Bundle Site3.7K
  • Testing Agentforce3.7K
  • Observing Agentforce3.7K
  • Uplifting Components To Slds23.7K
  • Searching Media3.6K
  • Integration Connectivity Connected App Configure3.6K
  • Using Ui Bundle Salesforce Data3.6K
  • Implementing Ui Bundle File Upload3.6K
  • Integration Connectivity Generate3.6K
  • External Diagram Mermaid Generate3.6K
  • Implementing Ui Bundle Agentforce Conversation Client3.6K
  • Platform Tracing Configure3.6K
  • Agentforce D360 Analyze3.5K
  • Platform Tracing Agentforce Configure3.5K
  • Platform Trust Archive Manage3.5K
  • Experience Ui Bundle Frontend Generate3.5K
  • Dx App Analytics Query3.5K
  • Integration Eventing Subscription Configure3.5K

Recommended

More Frontend Development
1forcedotcom avatarexperience-ui-bundle-frontend-generateforcedotcom/sf-skillsMUST activate before editing ANY file under uiBundles/*/src/ (or the bundle's index.html) for visual or UI changes to an EXISTING app — pages, components, secti3.5Kinstalls
2jezweb 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.7Kinstalls
3vercel-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 cata846installs
4laguagu 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. Al736installs
5dauquangthanh avatarfrontend-ui-ux-designdauquangthanh/hanoi-rainbowCreates comprehensive frontend UI/UX designs including user interfaces, design systems, component libraries, responsive layouts, and accessibility implementatio512installs
6mattbx 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 us486installs