2025-08-05 13:59:17 +02:00
|
|
|
# Magic MCP Server
|
|
|
|
|
|
2025-08-15 16:01:09 +02:00
|
|
|
**Purpose**: Modern UI component generation from 21st.dev patterns with design system integration
|
|
|
|
|
|
|
|
|
|
## Triggers
|
|
|
|
|
- UI component requests: button, form, modal, card, table, nav
|
|
|
|
|
- Design system implementation needs
|
|
|
|
|
- `/ui` or `/21` commands
|
|
|
|
|
- Frontend-specific keywords: responsive, accessible, interactive
|
|
|
|
|
- Component enhancement or refinement requests
|
|
|
|
|
|
|
|
|
|
## Choose When
|
|
|
|
|
- **For UI components**: Use Magic, not native HTML/CSS generation
|
|
|
|
|
- **Over manual coding**: When you need production-ready, accessible components
|
|
|
|
|
- **For design systems**: When consistency with existing patterns matters
|
|
|
|
|
- **For modern frameworks**: React, Vue, Angular with current best practices
|
|
|
|
|
- **Not for backend**: API logic, database queries, server configuration
|
|
|
|
|
|
|
|
|
|
## Works Best With
|
|
|
|
|
- **Context7**: Magic uses 21st.dev patterns → Context7 provides framework integration
|
|
|
|
|
- **Sequential**: Sequential analyzes UI requirements → Magic implements structured components
|
|
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
```
|
|
|
|
|
"create a login form" → Magic (UI component generation)
|
|
|
|
|
"build a responsive navbar" → Magic (UI pattern with accessibility)
|
|
|
|
|
"add a data table with sorting" → Magic (complex UI component)
|
|
|
|
|
"make this component accessible" → Magic (UI enhancement)
|
|
|
|
|
"write a REST API" → Native Claude (backend logic)
|
|
|
|
|
"fix database query" → Native Claude (non-UI task)
|
|
|
|
|
```
|
