Magic Patterns
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.
Created by Magic PatternsView Source
Skills6
inspirationExplore several bold, meaningfully-different 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/<id> document and streams in four self-contained HTML concepts tuned to the kind of exploration wanted (entrypoint/discoverability, information architecture/navigation, or visual display). The hosted comparison link is the deliverable. Use when the user wants design inspiration, alternative directions, layout options, variations, or a "show me a few approaches" exploration before committing to an implementation.
integrate-magic-patterns-designAdapt 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 code as a design spec, not as code to copy verbatim.
prototypePrototype 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 uploading it, then prompts Magic Patterns to design the new idea, returns the editor link, and opens it in the browser. Requires the Magic Patterns MCP server.
recreate-as-raw-htmlRecreate 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 references a component/screen by name (e.g. "Take the <ComponentName> and give me raw HTML").
recreate-as-reactRecreate 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, and fonts. Use when the user asks for a "React recreation", a "React version" of a component, "recreate X as React", or as the porting engine for the upload-to-magic-patterns and prototype skills.
Related plugins
OneSignal
Connect Cursor to OneSignal through the OneSignal MCP server.
Apollo.io
Prospect, enrich leads, load outreach sequences, and query sales analytics with Apollo.io — one-click MCP server integration.
Forge
Forge — Work order management, developer activity tracking, and project context for AI-assisted development workflows.
Databricks
Databricks skills for the CLI, Apps, Lakebase, Model Serving, Lakeflow Jobs, Spark Declarative Pipelines, Declarative Automation Bundles (DABs), and classic-to-serverless migration.
Port
Port MCP Server Gives Cursor's AI agent full engineering context. Port is your system of record for every service, team, dependency, and standard - connect it to Cursor so the agent understands not just your code, but who owns it, what depends on it, and what actions are available to take.
Microsoft Dataverse
Microsoft Dataverse plugin for coding agents — powering CRUD, bulk data operations, advanced queries, schema lifecycle, and environment management through intelligent skills that unify MCP, CLI, and SDK workflows.