HubSpot Developer Platform patterns for building apps with app cards, settings components, and marketplace submission workflows.
From opspal-hubspotnpx claudepluginhub revpalsfdc/opspal-commercial --plugin opspal-hubspotThis skill uses the workspace's default tool permissions.
app-cards.mdmarketplace-submission.mdproject-commands.mdsettings-components.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.
Comprehensive knowledge base for building HubSpot apps using the Developer Platform.
| Document | Purpose |
|---|---|
app-cards.md | App card development patterns and UI components |
settings-components.md | Settings page creation and form patterns |
project-commands.md | HubSpot CLI project commands reference |
marketplace-submission.md | Marketplace requirements and submission process |
| Task | Route To |
|---|---|
| Full app development orchestration | hubspot-app-developer |
| Creating CRM record cards | hubspot-app-card-builder |
| Creating preview panel cards | hubspot-app-card-builder |
| Creating settings pages | hubspot-settings-builder |
| Serverless functions | hubspot-cms-theme-manager |
| OAuth and webhooks | hubspot-api |
| Task | Use CLI | Use API |
|---|---|---|
| Create new project | hs project create | - |
| Add app card | hs project add | - |
| Local development | hs project dev | - |
| Deploy to portal | hs project upload | - |
| Validate for marketplace | hs project validate | - |
| Read CRM data | - | HubSpot APIs |
| Write CRM data | - | HubSpot APIs |
| Manage workflows | - | HubSpot APIs |
# Required: HubSpot CLI 2025.2+
npm install -g @hubspot/cli
# Verify version
hs --version
# Authenticate
hs auth
my-hubspot-app/
├── hubspot.config.yml # CLI config (gitignored)
├── app.json # App manifest
├── src/
│ ├── app/
│ │ ├── extensions/ # App cards
│ │ └── settings/ # Settings pages
│ └── functions/ # Serverless functions
├── package.json
└── tsconfig.json
Custom UI components displayed within HubSpot:
React-based configuration pages:
Backend logic for apps:
Authentication for app access:
User Action → App Card → Serverless Function → HubSpot API → Response → UI Update
User Opens Settings → Load from Storage → Edit Form → Save to Storage → Confirmation
try {
const result = await runServerlessFunction('getData');
setData(result.response);
} catch (error) {
setError('Failed to load data');
console.error(error);
}
skills/hubspot-cli-patterns/ - CMS CLI operationsskills/hubspot-agent-standards/ - API patternsskills/hubspot-workflow-patterns/ - Workflow automation