magicpatterns

magicpatterns/agent-plugins

Plugin Claude Code

Magic Patterns plugin for Claude Code.

magicpatterns/agent-plugins

Plugin Claude Code

Use Magic Patterns (magicpatterns.com) from your coding agent: prototype ideas, generate UI inspiration, upload local UI, and integrate Magic Patterns designs into your codebase.

magicpatterns/agent-plugins

MCP server Claude CodeCodexCursor

MCP server "magic-patterns", hosted remotely at mcp.magicpatterns.com, as configured in magicpatterns/agent-plugins.

magicpatterns/agent-plugins

Skill Claude CodeCodex

Explore several distinct UI design directions for a screen or component in Magic Patterns (magicpatterns.com). First recreates the current UI as a faithful baseline, then creates a shareable magicpatterns.com/inspiration/ document and streams in four self-contained HTML concepts tuned to the kind of exploration wanted…

magicpatterns/agent-plugins

Skill Claude CodeCodex

Adapt code generated by Magic Patterns (magicpatterns.com) into an existing codebase. Use when the user shares a Magic Patterns design, prototype, exported zip, "Copy Code as Prompt" output, or a magicpatterns.com URL and wants it implemented, integrated, or productionized in their project. Treats the Magic Patterns…

magicpatterns/agent-plugins

Skill Claude CodeCodex

Prototype an idea in Magic Patterns (magicpatterns.com) starting from your local UI. Use when the user gives a prompt for something they want to prototype or explore and wants an iterable Magic Patterns design grounded in their existing code. Seeds a design by recreating the relevant local UI (recreate-as-react) and…

magicpatterns/agent-plugins

Skill Claude CodeCodex

Recreate a component, screen, or pasted code from any codebase as a single self-contained raw HTML file (Tailwind Play CDN + web fonts) that faithfully reproduces its styling, colors, spacing, and fonts. Use when the user asks for a "raw HTML recreation", an "HTML version" of a component, "make an HTML copy of X", or…

magicpatterns/agent-plugins

Skill Claude CodeCodex

Recreate a component, screen, or pasted code from any codebase as a self-contained React + TypeScript + Tailwind prototype (App.tsx / index.tsx / index.css, named exports, one component per file) that renders in the Magic Patterns prototype environment and faithfully reproduces the original's styling, colors, spacing…

magicpatterns/agent-plugins

Skill Claude CodeCodex

Upload UI you are building locally into Magic Patterns (magicpatterns.com) and return the editor link. Use when the user wants to push a component/screen they are working on in their codebase into Magic Patterns as a design — for review, stakeholder sign-off, or further iteration. Requires the Magic Patterns MCP…