Design Code
by plugin87 · development · swift, react, vue, angular, skill
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
Source: https://github.com/plugin87/ux-ui-agent-skills
Install
git clone https://github.com/plugin87/ux-ui-agent-skillsTags: swift, react, vue, angular, skill
⭐ 203 GitHub stars · Source: skillsdirectory
About development MCP servers and Claude skills
development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.
Design Code is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.
Related development MCPs and skills
- Dora by ThomasMoreAI
Expert DORA (Regulation (EU) 2022/2554 — Digital Operational Resilience Act) compliance advisor for EU financial entities. Use this skill whenever a user asks about DORA compliance, ICT risk management frameworks, ICT incident classification or reporting, threat-led penetration testing (TLPT), ICT third-party risk management, Register of Information, contractual provisions with ICT providers, ICT concentration risk, oversight of critical ICT third-party service providers (CTPPs), or any DORA ...
- Escalation Flagger by ThomasMoreAI
Route a contract issue to the right approver per the escalation matrix in `config/local/codex-for-legal/commercial-legal/CLAUDE.md`, and draft the ask. Use when the user says "who needs to approve this", "escalate this", "does this need GC sign-off", "route this for approval", or when another skill finds an issue that exceeds the reviewer's authority.
- Vibe Legal Batch Redliner by ThomasMoreAI
Use when you need to batch redline multiple contracts against a negotiation playbook, apply tracked changes to Word documents programmatically, or run contract review workflows with AI assistance.
- Interview Summary by ThomasMoreAI
Generates structured summaries of witness or subject interviews for criminal defense investigations. Distills key facts, verbatim statements, credibility indicators, and follow-up leads. Use when summarizing defense interviews, witness debriefs, subject interrogations, or investigative interview notes.
- Entrevista Inicial by ThomasMoreAI
Ejecuta la entrevista inicial del módulo de clínica jurídica — aprende la estructura de la clínica, el protocolo de intake, el modelo de supervisión, la gestión de plazos y las plantillas que usáis. Escribe el perfil de práctica en CLAUDE.md. Úsalo en la primera ejecución, cuando CLAUDE.md no exista o tenga marcadores pendientes, o cuando el usuario diga "configurar clínica", "onboarding", o quiera repetir la entrevista.
- Irac by ThomasMoreAI
Evalúa el análisis de caso del estudiante usando la estructura IRAC. Rúbrica: identificación del problema (25%), regulación (25%), aplicación (35%), conclusión (15%). Da feedback específico y accionable — NUNCA reescribe el análisis del estudiante. Usar cuando el usuario dice "evalúa mi IRAC", "corrige mi análisis", "revisa mi caso práctico", o presenta un análisis de caso para evaluación.
- Judicial First Impression Larissa Meredith Flister by ThomasMoreAI
Assesses a legal argument, submission, or piece of structured reasoning from the perspective of a judge reading it cold under time pressure. Produces a structured seven-part assessment: what the case appears to be about, immediate points of confusion, what feels strong, what feels weak, what is assumed but unproved, a provisional confidence level (low/medium/high), and what would be needed to persuade. The skill does not rewrite, improve, or attack the argument — it tells you how it actually ...
- Unit Expert MCP by kdaehun00
Converts common units for length, weight, temperature, area, and volume.
Frequently asked questions
How do I install Design Code?
Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.
Which clients support Design Code?
Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.
Is Design Code free?
The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.