Loop Skills MCP

Loop's design & brand skills, served as an MCP 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

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

Smoke test:

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.