Frontend Design Loop MCP

Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.

Frontend Design System

Frontend UI Engineering — Avalonia

chromestatus-adding-a-field

How to add a new field to a feature across the entire stack (Data, API, and Frontend).

build-frontend

Builds the Fake Survey Generator React frontend with Vite and TypeScript. Use this skill when frontend code changes need to be compiled and validated for TypeScript errors. This skill orchestrates the npm build command and reports build errors.

DevTool MCP

Development tooling MCP server with process management, proxy, and frontend diagnostics

fullstack

Senior Full Stack Engineer that builds production code with unit tests from architecture docs and UX specs. Trigger on build, implement, code, debug, refactor, full stack, frontend, backend, or auth implementation.

orpc-contract-first

Guide for implementing oRPC contract-first API patterns in Dify frontend. Triggers when creating new API contracts, adding service endpoints, integrating TanStack Query with typed contracts, or migrating legacy service calls to oRPC. Use for all API layer work in web/contract and web/service directories.

design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

hass-sync

Maintains synchronization between src/hass folder and Home Assistant frontend source code. Verifies file locations, checks code matches upstream, and identifies unused code. Use when working with src/hass files, syncing Home Assistant code, or verifying code synchronization.

Code Pilot

Universal development workflow. Routes frontend tasks through design-first process; all other tasks go directly to superpowers standard workflow.

content-experimentation-best-practices

Content experimentation and A/B testing guidance covering experiment design, hypotheses, metrics, sample size, statistical foundations, CMS-managed variants, and common analysis pitfalls. Use this skill when planning experiments, setting up variants, choosing success metrics, interpreting statistical results, or building experimentation workflows in a CMS or frontend stack.

uncodixfy

Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.

collection

Choose which SkillNote skill collection is active for this project. Use when user says "change collection", "switch skills", "use frontend skills", "show collections", or at first session in a new project when recommended.

Io.Github.ShingWong/Node Server Orchestrator

MCP server for orchestrating Node.js development servers (backend, frontend, databases, etc.)

display

Expose the organized knowledge base through a readable frontend experience. Use when a user wants to browse the knowledge base visually as a lightweight site instead of reading raw Markdown files directly. Supports building viewers for specific data paths (e.g., individual books) or the entire knowledge base.

Frontend Improver

A unified entry point for all frontend improvement steering commands. Each command targets a specific dimension of interface quality.

stress-test-frontend

Run a frontend load testing audit. Seeds data, tests all pages via Chrome DevTools MCP, records network calls, TanStack queries, DOM sizes, and generates a timestamped report.

Building UI/UX

Use when implementing user interfaces or user experiences - guides through exploration of design variations, frontend setup, iteration, and proper integration

pinme

This skill should be used when the user asks to "deploy", "upload", "publish", or "pin" any files, folders, frontend projects, or static websites to IPFS. Also activates when user mentions "pinme", "IPFS", or wants to share files via decentralized storage.

heuristic

Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard. Invoke when the user asks for heuristic on their UI, or mentions 'heuristic' alongside design / UI / frontend work.

typescript-react-patterns

Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happen?", or any architectural decision involving TypeScript in a frontend context.

adding-ai-agent-rendering-system

Implement a new Packmind AI agent rendering/deployer pipeline (single-file or multi-file) with type and registry wiring, frontend UI/docs updates, and thorough unit/integration tests to reliably support additional coding assistants and distribution formats when introducing a new agent integration or render mode.

결합도

코드 변경의 영향 범위를 최소화한다. 한 기능 변경이 다른 기능을 깨뜨리면 안 된다.

frontend-accessibility-best-practices

Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

agents-review

Reviews and refactors AGENTS.md files in the Nuclia frontend monorepo for completeness, accuracy, and AI-agent usability. Invoke this skill whenever you are working with an AGENTS.md file in apps/ or libs/, when asked to review or improve agent documentation, when creating a new AGENTS.md for a project, or when you notice that an AGENTS.md seems outdated, thin, or missing. Proactively suggest a review even when the user only asks an unrelated question about a project if no AGENTS.md exists for it.

ckm:banner-design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

api-and-interface-design

Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

Accessibility Expert

WCAG 2.1/2.2 compliance, WAI-ARIA implementation, screen reader optimization, keyboard navigation, and accessibility testing expert. Use PROACTIVELY for accessibility violations, ARIA errors, keyboard navigation issues, screen reader compatibility problems, or accessibility testing automation needs.

component-refactoring

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

frontend-ui-animator

Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".

vercel-microfrontends

Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app across teams, independent deployments, cross-app routing, incremental migration, composing multiple frontends under one domain, microfrontends.json, @vercel/microfrontends, the microfrontends local proxy, or path-based routing between Vercel projects. Also use when the user asks about shared layouts across projects, navigation between microfrontends, fallback environments, asset prefixes, or feature flag controlled routing.

browser-tools

Interactive browser automation via Chrome DevTools Protocol. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.

picasso

The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.

design-style

Use this skill whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element. This includes: - Landing pages, websites, web apps, dashboards, portfolios, or any web UI - UI components (buttons, forms, cards, navbars, modals, etc.) - React, Vue, Next.js, Svelte, or other frontend frameworks - CSS, Tailwind, styled-components, or styling help - Visual improvements or aesthetic upgrades - Requests mentioning frontend, UI, UX, interface, web design, or styling - Adjectives like beautiful, modern, clean, professional, minimalist, dark, brutalist, etc. This skill loads the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to generate distinctive, production-grade frontend code instead of generic UI. IMPORTANT: Trigger proactively for ANY frontend/UI-related request, even if no style is specified.

cb-security-hardening

Enforces Circuit Breaker security hardening conventions across backend, frontend, Docker, and nginx. Use when modifying authentication logic, security headers, Docker configuration, credential handling, session management, URL validation, WebSocket auth, or any code in core/security.py, core/rbac.py, middleware/security_headers.py, url_validation.py, docker-compose.yml, nginx.mono.conf, entrypoint-mono.sh, or supervisord.mono.conf.

ordo-editor-component

Ordo visual editor component development guide. Includes Vue/React component usage, flow diagram integration, WASM calls, rule import/export. Use for frontend integration of rule editor, custom editor UI, extending editor functionality.

aptos-dapp-integration

Expert on building Aptos dApps with frontend integration. Covers wallet connectivity (Petra, Martian, Pontem), wallet adapter patterns, TypeScript SDK, transaction building and submission, account management, and React/Next.js integration.

add-tts-engine

Use this skill to add a new TTS engine to Voicebox. It walks through dependency research, backend implementation, frontend wiring, PyInstaller bundling, and frozen-build testing. Always start with Phase 0 (dependency audit) before writing any code.

ai-organizer-ui-consolidation

Build a unified, ADHD-friendly web UI that consolidates 70+ CLI tools into a beautiful liquid glass interface for the AI File Organizer. Use when creating the complete frontend application that replaces all terminal interactions with a macOS-inspired dashboard for file organization, search, VEO prompts, and system management.

Archik — the project's shared map

The archik file is **the user's source of truth for what the system looks like**. It lists every meaningful node (services, databases, queues, frontends, external APIs, …) and the edges between them. The canvas in the browser is a stateless projection of this file — when the user says "the order

backend-fastapi-python

Use this skill for any Python backend work in this project: building FastAPI endpoints, writing service functions, defining Pydantic/SQLModel schemas, running Alembic migrations, or debugging 422 errors. Essential for authentication and authorization patterns — setting up get_current_user, is_superuser checks, admin-only guards, role-based access, and dependency injection chains like Depends(). Also covers middleware, background tasks, async SQLAlchemy sessions, ORM relationship loading, and request/response design. Activate whenever the question involves Python API code, FastAPI patterns, or backend architecture in this codebase. Not for frontend, Docker, CI/CD, or infrastructure.

anthropic-frontend-design

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 (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Async Concurrency Expert

Focused on preventing waterfalls and maximizing parallelization in API and Frontend logic.

My MCP Serv

Description of my MCP server

To test the registry

Description of my MCP server

arbitrum-dapp-skill

Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.

Frontend Building Blocks

Typed catalog of building blocks used in this project. Each block has a fixed name, layer, composition rules, and canonical example.

rcl-score

Convert a two-person chat history into a relationship K-line chart. When invoked, walk the user through providing a chat file, run the local preprocessing pipeline, score every "turn" (consecutive same-sender block) with v3.1 semantic deltas, expand back to message-level scored.jsonl, and hand off to the local web frontend for visualization.