---
name: get-started
description: Use when the user asks what they can do, what skills are available, how to get started, or wants an overview of the humand-frontend-sandbox plugin capabilities.
metadata:
  category: Meta
---

# Humand Frontend Sandbox — Plugin Guide

This plugin supports the full lifecycle of a frontend sandbox project built with `humand-create-app`.

## Available Skills

> **Maintainer note:** This list is hardcoded — skills are NOT auto-discovered. When adding a new skill, update this section and the workflow below. See `skills/CLAUDE.md`.

### Setup & Environment
- **`/setup-sandbox`** — Sets up the local dev environment (nvm, Node, bun, git). Run once per machine.
- **`/cleanup-sandbox`** — Uninstalls tools that `/setup-sandbox` installed on this machine.
- **`/setup-supabase`** — Creates a Supabase project for the current sandbox and wires it up securely (proxy-only, RLS by default, typed).
- **`/sync-vercel-env`** — Pushes non-`VITE_` variables from `.env.local` to the Vercel project so serverless functions (`api/`) can read them.
- **`/add-json-server`** — Installs json-server and concurrently, creates `mock/db.json`, and adds the `dev:vite` script to `package.json`.

### Project Creation
- **`/bootstrap-react-project`** — Creates a new Humand React sandbox project with the production stack.
- **`/humandify-project`** — Adapts an existing React project to Humand's visual standards.
- **`/plan-project`** — Creates a Notion page with the project plan before writing any code.
- **`/document-project`** — Reverse-engineers an existing project: scans `src/`, detects screens, and creates the Notion page + features database. Equivalent to `/plan-project` for already-written projects.
- **`/publish-to-github`** — Publishes the project to a private repo in the `Humand-CX` GitHub org: creates the repo (or reuses an existing one), swaps `origin`, and pushes the current branch.

### Feature Definition
- **`/fetch-feature-spec`** — Fetches a feature record from the Notion Features database.
- **`/refine-feature`** — Decomposes a planned screen into implementable features with components and validation criteria.
- **`/document-feature`** — Reads the code of a feature from an existing project and fills its Notion entry. Supports `--all` for batch. Equivalent to `/refine-feature` for existing code.

### Implementation
- **`/build-feature`** — Scaffolds a complete feature (module + route + nav item).
- **`/connect-service`** — Connects an external service (Supabase, HubSpot, Sheets) via a secure Vercel API proxy.
- **`/add-super-admin-login`** — Adds Google SSO login (OAuth2 PKCE via Janus) to protect routes.
- **`/add-login`** — Adds a Humand community login (Janus `cx-login`, HttpOnly JWT cookie). Alternative to `add-super-admin-login`. Community-scoped.
- **`/connect-to-humand-api`** — Connects the project to `humand-api` via a server-side M2M proxy + typed client. Run **after** `/add-login` for revenue projects.

### Security & Maintenance
- **`/audit-secrets`** — Scans the project for leaked credentials or hardcoded secrets before deploying.
- **`/audit-secrets-diff`** — Scans only staged git changes for secrets before committing.

### Handoff
- **`/commit-feature`** — Commits feature changes and updates its Notion state (Estado → ✅ Listo).
- **`/handoff-feature`** — Generates a `.handoff/` document capturing files changed, decisions, and next feature.
- **`/deploy-to-vercel`** — Deploys the project to Vercel production and reports the URL.

### Quality
- **`/verify-feature`** — Runs mechanical + semantic post-build checks (security, styling, types, architecture).

## Typical Workflows

```
# New project:
/setup-sandbox             ← once per machine
/bootstrap-react-project
/plan-project
/refine-feature            ← per screen
/build-feature             ← per screen
/connect-service           ← if external APIs needed
/audit-secrets-diff        ← before each commit
/audit-secrets             ← before deploying to Vercel
/deploy-to-vercel

# Existing project (alternative to bootstrap):
/setup-sandbox             ← once per machine
/humandify-project         ← adapt existing project to Humand standards
/document-project          ← reverse-engineer overview into Notion
/document-feature          ← per existing screen (or --all)
/build-feature             ← for new screens going forward
/audit-secrets-diff        ← before each commit
/audit-secrets             ← before deploying to Vercel
/deploy-to-vercel
```