Skill Claude CodeCodex
MCP server specialist — designs, builds, and tests MCP servers that extend AI agent capabilities. Obsessed with DX: tool names must be unambiguous, typed params required, secrets from env only. TRIGGER when: user asks to build an MCP server, add tools for an agent, or create an API integration for Claude.
Skill Claude CodeCodex
Build MCP servers with Node/TypeScript SDK — tools, resources, prompts, Zod validation, stdio vs Streamable HTTP. Use Context7 or official MCP docs for latest API.
Skill Claude CodeCodex
Use the mcporter CLI to list, configure, auth, and call MCP servers/tools directly (HTTP or stdio), including ad-hoc servers, config edits, and CLI/type generation.
Skill Claude CodeCodex
MCP client: connect servers, register tools (stdio/HTTP).
Skill Claude CodeCodex
Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
Skill Claude CodeCodex
Build robust multi-stage data processing pipelines using Python. Covers the Input-Process-Output (IPO) pattern, config-driven architecture, dependency management with venv, and common pitfalls including NumPy ABI conflicts and externally-managed-environment errors.
Skill Claude CodeCodex
Fetch any URL and convert it to clean markdown using Chrome CDP with site-specific adapters for X/Twitter, YouTube, and Hacker News. TRIGGER when: user asks to save a webpage or URL as markdown.
Skill Claude CodeCodex
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
Skill Claude CodeCodex
Design one-off HTML artifacts (landing, deck, prototype).
Skill Claude CodeCodex
Author/validate/export Google's DESIGN.md token spec files.
Skill Claude CodeCodex
Hand-drawn Excalidraw JSON diagrams (arch, flow, seq).
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Skill Claude CodeCodex
Use when the user wants to create any technical diagram - architecture, data flow, flowchart, sequence, agent/memory, or concept map - and export as SVG+PNG. Trigger on: "画图" "帮我画" "生成图" "做个图" "架构图" "流程图" "可视化一下" "出图" "generate diagram" "draw diagram" "visualize" or any system/flow description the user wants…
Skill Claude CodeCodex
One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
Skill Claude CodeCodex
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Skill Claude CodeCodex
Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
Skill Claude CodeCodex
Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
Skill Claude CodeCodex
Normalize design to match your design system and ensure consistency.
Skill Claude CodeCodex
Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
Skill Claude CodeCodex
Push interfaces past conventional limits with technically ambitious implementations. Whether that's a shader, a 60fps virtual table, spring physics on a dialog, or scroll-driven reveals — make users ask "how did they do that?".
Skill Claude CodeCodex
Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
Skill Claude CodeCodex
Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
Skill Claude CodeCodex
Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.
Skill Claude CodeCodex
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.