# Loop Skills MCP

Loop's design & brand **skills**, served as an [MCP](https://modelcontextprotocol.io) server so anyone
at Loop can use them from any MCP client — Nexus, Claude (claude.ai / Claude Code / Desktop), Cursor, etc.

A *skill* is a markdown playbook (plus supporting files and brand assets) that teaches an AI agent how
to do a Loop task the right way: on-brand, grounded in real components/assets, with verification steps.

## Skills served

| Skill | Use for |
|---|---|
| `loop-brand-deck` | Client-facing sales/marketing decks (.pptx) grounded in the real brand system |
| `loop-marketing-subpage` | New bankonloop.com sub-page prototypes (HTML, pre-Webflow) |
| `generate-loop-ui` | Product UI screens/components in next-app using real components |
| `prototype-loop-ui` | Sandboxed, throwaway product-UI prototypes (never touches real code) |
| `loop-email-template` | Transactional email templates (MJML → SendGrid) |
| `reconcile-loop-design-system` | Audit code vs design tokens; document components into Figma |

## How agents use it

1. `list_skills` — catalog of skills + when to use each
2. `get_skill(name)` — the full SKILL.md instructions + a manifest of supporting files
3. `get_skill_file(skill, path)` — supporting text files (docs, build scripts, specs)
4. Binary assets (logos, fonts, backgrounds, product shots) are plain HTTPS URLs under
   `/skills/<skill>/…` — agents download what the instructions reference.

## Connecting a client

- **Endpoint:** `https://<deployment>/mcp` (Streamable HTTP; SSE at `/sse` needs `REDIS_URL`)
- **Auth:** set the `MCP_AUTH_TOKEN` env var on Vercel, then clients send
  `Authorization: Bearer <token>`. If the env var is unset the server is open — fine for local
  dev, not for the deployed instance (brand assets are proprietary).

Nexus: add an MCP server with the URL above and the bearer token, same as the payments MCP.

Claude Code: `claude mcp add --transport http loop-skills https://<deployment>/mcp --header "Authorization: Bearer <token>"`

## Adding or updating a skill

1. Drop a folder into `skills/<skill-name>/` containing a `SKILL.md` with YAML frontmatter
   (`name:` and `description:` — the description is what tells agents *when* to use it).
2. Put supporting docs/scripts/assets anywhere inside the folder; reference them by relative
   path from the SKILL.md.
3. Push. Vercel rebuilds; `scripts/build-manifest.mjs` picks the skill up automatically
   (it runs on every build — no server code changes needed).

Editing a skill = editing its files and pushing. The manifest and asset URLs regenerate on build.

## Local dev

```bash
npm install
npm run dev          # manifest is generated automatically, then http://localhost:3000
```

Smoke test:

```bash
curl -s http://localhost:3000/mcp -X POST \
  -H 'content-type: application/json' -H 'accept: application/json, text/event-stream' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'
```

## Deploying (Vercel)

1. Import this repo into Vercel (framework preset: Next.js — no special settings).
2. Add env var `MCP_AUTH_TOKEN` (generate one: `openssl rand -hex 24`).
3. Optionally `PUBLIC_BASE_URL=https://<your-domain>` if serving behind a custom domain,
   so asset URLs in tool responses point at the right host.
4. Register the URL + token in Nexus.

## Repo layout

```
skills/                  ← the skills themselves (source of truth; add here)
scripts/build-manifest.mjs  ← scans skills/ → lib/skills-manifest.json + public/skills/
app/[transport]/route.ts    ← the MCP server (mcp-handler): list_skills / get_skill / get_skill_file
app/page.tsx             ← human-readable landing page listing the skills
```

Internal to Loop Financial — brand assets are proprietary; keep the repo private and the
deployment token-protected.