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-skills

Tags: 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.