Loop Skills MCP

generate-loop-ui

Use when generating a UI screen or component for next-app from a spec, a rough idea, or a design — a new onboarding step, form, sign-in/sign-up flow, review screen, or page-level UI. Works even with no written spec: it gathers context, drafts a spec, confirms it, then generates code that uses Loop's REAL components, passes type-check, and actually renders — not plausible-but-fake markup.

5 files

loop-brand-deck

Generate on-brand Loop sales/marketing collateral — customer presentation decks, one-pagers, and (phase 2) social posts — as editable .pptx grounded in the real Loop Design System. Use whenever someone at Loop (sales, growth, recruiting, CX) needs a client-facing deck or one-pager that must look like Loop's hand-designed Figma collateral, not a generic AI slide. Triggers: "make a deck for [client]", "one-pager for [client]", "pitch slides", "customer presentation", "Loop deck".

47 files

loop-email-template

Use to build ANY on-brand Loop email as email-safe, inline-CSS HTML, ready to wire into SendGrid as a dynamic template. Covers the full range at varying visual complexity: OTP / verification codes, transaction receipts, statement and account notifications (utility & transactional); welcome / onboarding and direct team outreach / info-requests (lifecycle); and feature-release and marketing campaigns (rich). One reusable block system — a base shell plus composable partials — so every Loop email looks consistent and an agent edits by filling slots, not redesigning. Grounded in Loop's real brand assets and design tokens.

29 files

loop-marketing-subpage

Use to prototype a NEW sub-page for the Loop marketing site (bankonloop.com) — e.g. a new product, solution, or campaign page. Produces an on-brand, clickable HTML prototype grounded in the real marketing site's structure and brand assets, for stakeholder review before it's rebuilt in Webflow. NOT for the product app (that's generate-loop-ui) — the marketing site is a separate Webflow system with its own visual language.

8 files

prototype-loop-ui

Use to build a throwaway, sandboxed PROTOTYPE in next-app using real components: mock a new button/feature onto an existing screen, one-shot a multi-step flow, or faithfully replicate a production screen to experiment on. Output is always a sandbox copy — this skill NEVER edits real product code. For real changes / PRs, that is a separate, guarded workflow (not this skill).

1 file

rebrand-to-loop

Use to take an EXISTING vibecoded / AI-generated web page (a v0 / Lovable / Figma-Make / Bolt export, hand-written HTML+CSS, a React/JSX file, or a live URL) and rebrand it into Loop's product design system — real Loop components, brand colours, and typography — pulled straight from the Storybook MCP. Output is one portable, self-contained HTML file. NO next-app checkout, tsc, or yarn required, so non-engineers can run it. For building net-new product UI from a spec, use generate-loop-ui; for the bankonloop.com marketing site, use loop-marketing-subpage.

1 file

reconcile-loop-design-system

Use to reconcile Loop's design system: read the REAL current components from next-app / the Storybook MCP, detect discrepancies (colors outside the semantic token set, rogue fonts, inconsistent radii/spacing for same-purpose elements), and build documentation for each element into the Loop Design System Figma file in the Untitled UI format — placed NEXT TO existing content, never replacing it.

1 file