Agent Skills

MCP Builder

✓★ 158,000

by Anthropic

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK). license: Complete terms in LICENSE.txt

Frontend Design

✓★ 158,000

by Anthropic

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.

ui-styling

★ 100,600

by nextlevelbuilder

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

imagegen-frontend-web

★ 55,900

by leonxlnx

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a...

imagegen-frontend-mobile

★ 55,900

by leonxlnx

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar...

tailwind-design-system

★ 37,500

by wshobson

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

penpot-uiux-design

✓★ 36,200

by github

Professional UI/UX design creation in Penpot with MCP tools, design systems, and accessibility standards. Four MCP tools enable design creation, modification, export, and API access within Penpot's plugin context Includes discovery workflow to identify existing design systems, components, and tokens before building new designs Covers responsive layouts for mobile (375×812), desktop (1440×900), and platform-specific guidelines (iOS, Android, Material Design) Provides default design tokens...

power-bi-report-design-consultation

✓★ 36,200

by github

Comprehensive Power BI design consultation framework covering chart selection, layout strategy, accessibility, and interactive patterns. Provides structured requirements gathering for business context, data analysis, and technical constraints before recommending visualizations Includes detailed chart selection methodology organized by data relationships (comparison, trend, composition, distribution) with specific recommendations for each category Offers audience-specific design patterns for...

web-design-reviewer

✓★ 36,200

by github

Visual inspection and source-level fixing of website design issues across responsive, accessibility, and layout concerns. Detects layout overflow, alignment problems, responsive breakpoints, accessibility contrast issues, and visual inconsistencies across mobile (375px), tablet (768px), desktop (1280px), and wide (1920px) viewports Supports static sites, SPAs (React/Vue/Angular/Svelte), full-stack frameworks (Next.js/Nuxt/SvelteKit), and CMS platforms with automatic framework and styling...

figma-code-connect-components

✓★ 23,200

by openai

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map…

figma-generate-library

✓★ 23,200

by openai

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set…

figma-create-design-system-rules

✓★ 23,200

by openai

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design…

figma

✓★ 23,200

by openai

Fetch design context, screenshots, and assets from Figma, then translate designs into production code. Provides three core commands: get_design_context for structured node representation, get_screenshot for visual reference, and asset download via localhost endpoints Requires a mandatory workflow: fetch design context, retrieve screenshot, download assets, then implement using project conventions and design tokens Outputs React + Tailwind as a design representation; implementation must reuse...

figma-create-new-file

✓★ 23,200

by openai

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma.…

chatgpt-apps

✓★ 23,200

by openai

Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools,…

figma-implement-design

✓★ 23,200

by openai

Translate Figma designs into production-ready code with pixel-perfect visual fidelity. Structured seven-step workflow: extract node IDs from Figma URLs, fetch design context and screenshots, download assets, translate to project conventions, and validate against Figma specs Integrates with Figma MCP server (remote or desktop) to access layout properties, typography, colors, design tokens, and component structure Emphasizes design system reuse, design token mapping, and 1:1 visual parity;...

figma-generate-design

✓★ 23,200

by openai

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…

accessibility-review

✓★ 22,300

by anthropic

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design…

design-system

✓★ 22,300

by anthropic

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a…

design-handoff

✓★ 22,300

by anthropic

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component…

design-critique

✓★ 22,300

by anthropic

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this…

system-design

✓★ 22,300

by anthropic

Design systems, services, and architectures. Trigger with "design a system for", "how should we architect", "system design for", "what's the right architecture…

stitch-loop

★ 6,400

by google-labs-code

Autonomous website builder using iterative Stitch generation with baton-passing loop coordination. Implements a relay pattern where each agent iteration reads a task from .stitch/next-prompt.md , generates a page via Stitch MCP, integrates it into the site, and writes the next task for continuation Manages Stitch project state through .stitch/metadata.json , persisting project IDs, screen metadata, and design theme across iterations Requires .stitch/DESIGN.md (visual design system) and...

taste-design

★ 6,400

by google-labs-code

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography,…

stitch-design

★ 6,400

by google-labs-code

Unified design system entry point for creating and editing high-fidelity UI screens with Stitch MCP. Transforms rough design ideas into structured prompts using professional UI/UX terminology and design system context Synthesizes existing Stitch projects into .stitch/DESIGN.md "source of truth" documents for consistency across screens Routes requests intelligently between text-to-design generation, screen editing, and design system documentation workflows Automatically manages assets by...

enhance-prompt

★ 6,400

by google-labs-code

Transforms vague UI ideas into polished, Stitch-optimized prompts with design system context. Assesses missing elements (platform, page type, visual style, colors, components) and fills gaps systematically Checks for and integrates DESIGN.md files to ensure consistency across multi-page projects Applies enhancement techniques including UI/UX keyword specificity, mood amplification, page structure organization, and proper color formatting Outputs structured prompts ready for Stitch...

design-md

★ 6,400

by google-labs-code

Analyze Stitch design projects and generate semantic DESIGN.md files as prompting source of truth. Retrieves screen metadata, HTML/CSS source, and design assets from Stitch projects via MCP Server tools to extract design tokens and visual patterns Synthesizes findings into structured DESIGN.md files covering atmosphere, color palette with hex codes, typography, component styling, and layout principles Translates technical values (Tailwind classes, border-radius, shadows) into evocative...

liquid-glass

✓★ 4,000

by openai

Implement, refactor, or review modern macOS SwiftUI UI for the new design system and Liquid Glass. Use when adopting Liquid Glass, updating…

figma-generate-design

✓★ 4,000

by openai

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…

figma-generate-library

✓★ 4,000

by openai

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set…