mcpField

Skills

96,770 packaged capabilities and playbooks for agents. Install any of them with one command.

Design & UI

C
colorful
colorful
bergside / awesome-design-skills

Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences

Design & UI2.4k
F
friendly
friendly
bergside / awesome-design-skills

Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes

Design & UI2.4k
B
bold
bold
bergside / awesome-design-skills

Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts

Design & UI2.4k
C
cosmic
cosmic
bergside / awesome-design-skills

Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements

Design & UI2.4k
A
artistic
artistic
bergside / awesome-design-skills

High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces

Design & UI2.4k
A
agentic
agentic
bergside / awesome-design-skills

Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows

Design & UI2.4k
A
ant
ant
bergside / awesome-design-skills

Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications

Design & UI2.4k
B
building-omnistudio-omniscript
building-omnistudio-omniscript
forcedotcom / sf-skills

OmniStudio OmniScript creation and validation with 120-point scoring. Use when building guided digital experiences, multi-step forms, or interactive processes that orchestrate Integration Procedures and Data Mappers. TRIGGER when: user creates OmniScripts, designs step flows, configures element types, or reviews existing OmniScript configurations. DO NOT TRIGGER when: building FlexCards (use building-omnistudio-flexcard), creating Integration Procedures directly (use building-omnistudio-integration-procedure), or analyzing dependencies (use analyzing-omnistudio-dependencies).

Development2.4k
B
barba-js
barba-js
freshtechbro / claudedesignskills

Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving Barba.js, page transitions, routing, view management, transition hooks, GSAP integration, or smooth page navigation. Works with gsap-scrolltrigger for transition animations.

Design & UI2.4k
F
flat
flat
bergside / awesome-design-skills

Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces

Design & UI2.4k
B
building-omnistudio-flexcard
building-omnistudio-flexcard
forcedotcom / sf-skills

OmniStudio FlexCard creation and validation with 130-point scoring. Use when building at-a-glance UI cards, configuring data source bindings to Integration Procedures, or reviewing existing FlexCard definitions for accessibility and performance. TRIGGER when: user creates FlexCards, configures data sources, designs card layouts, or asks about OmniUiCard metadata. DO NOT TRIGGER when: building OmniScripts (use building-omnistudio-omniscript), creating Integration Procedures (use building-omnistudio-integration-procedure), or analyzing dependencies (use analyzing-omnistudio-dependencies).

Design & UI2.4k
D
dramatic
dramatic
bergside / awesome-design-skills

High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention

Design & UI2.4k
C
cafe
cafe
bergside / awesome-design-skills

Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience

Design & UI2.4k
M
mobile-touch
mobile-touch
dylantarre / animation-principles

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

Design & UI2.4k
P
platform-mcp-tool-widget-coordinate
platform-mcp-tool-widget-coordinate
forcedotcom / sf-skills

Orchestrate object-based Lightning Type + HXL widget generation to render the output of a custom MCP server tool backed by an Apex Invocable Action. TRIGGER only when the prompt EXPLICITLY involves rendering an MCP tool result: user says 'MCP server', 'MCP tool', 'custom MCP server', references a tool 'output schema' / 'tool output' / 'outputValues' envelope, names an 'invocable action' backing an MCP tool, or asks to build a widget or rich UI rendition for the output of an Apex-invocable-backed MCP tool. DO NOT TRIGGER when: customizing an Apex-backed agent action output (use platform-lightning-type-widget-coordinate), authoring only a Custom Lightning Type (use platform-custom-lightning-type-generate), authoring only an Apex class (use platform-apex-generate), or building a standalone widget with no Lightning Type or MCP tool involved (use platform-widget-generate).

Design & UI2.4k
R
rendercv
rendercv
rendercv / rendercv-skill

Create professional CVs and resumes with perfect typography using RenderCV (v2.8). Users write content in YAML, and RenderCV produces publication-quality PDFs via Typst typesetting. Full control over every visual detail: colors, fonts, margins, spacing, section title styles, entry layouts, and more. 6 built-in themes with unlimited customization. Any language supported (22 built-in, or define your own). Outputs PDF, PNG, HTML, and Markdown. Use when the user wants to create, edit, customize, or render a CV or resume.

Documents2.4k
I
improve-website
improve-website
wondelai / skills

Guided journey from a live website that underperforms to a prioritized, evidence-backed backlog of conversion, usability, message, and speed fixes - each shipped as a testable experiment. Orchestrates eight skills phase by phase - cro-methodology, ux-heuristics, refactoring-ui, web-typography, storybrand-messaging, high-perf-browser, made-to-stick, design-everyday-things - asking the user questions at every decision point and recording results in the project docs/ folder (WEBSITE.md, DESIGN.md, IMPROVE-WEBSITE-PLAN.md) so the journey resumes across sessions. Use when the user wants to fix a landing page that isn't converting, diagnose why visitors leave, audit for clarity and usability, or says 'the homepage feels off but a redesign didn't help'. No site yet, create-website; converts but needs traffic, grow-website; if the friction is in a product app, not the marketing site, improve-app; if one specific flow leaks, conversion-optimization. For one framework in isolation, invoke that skill directly

Marketing & growth2.4k
V
vintage
vintage
bergside / awesome-design-skills

1950s–1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

Design & UI2.4k
W
wireframe
wireframe
ghaida / intent

Design the structural anatomy of screens at wireframe fidelity — what goes where and why, before anyone argues about how it looks. Part of the Intent design strategy system. Produces lo-fi idea boards for divergent exploration, complete interactive grayscale wireframes with real labels and real hierarchy, and click-through prototypes that materialize flow logic from /journey. Trigger on: wireframe, wireframes, wireframing, thumbnails, "sketch the screen", "lay out this page", "what goes where on this screen", screen layout, page structure, lo-fi, mid-fi, click-through prototype, wireflow, "wireframe the dashboard", or any request to design the structure of a screen before its visual design. The flow through screens belongs to /journey; the information structure belongs to /organize; the words belong to /articulate — this skill owns the screen itself.

Design & UI2.4k
M
mono
mono
bergside / awesome-design-skills

Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic

Design & UI2.4k
F
fantasy
fantasy
bergside / awesome-design-skills

Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

Design & UI2.4k
D
dithered
dithered
bergside / awesome-design-skills

Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

Design & UI2.4k
V
vibrant
vibrant
bergside / awesome-design-skills

Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

Design & UI2.4k
L
levels
levels
bergside / awesome-design-skills

Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

Design & UI2.4k
R
retro
retro
bergside / awesome-design-skills

Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.

Design & UI2.4k
N
neon
neon
bergside / awesome-design-skills

Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

Design & UI2.4k
S
skeumorphism
skeumorphism
bergside / awesome-design-skills

Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

Design & UI2.4k
E
expressive
expressive
bergside / awesome-design-skills

Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

Design & UI2.4k
M
mapbox-style-patterns
mapbox-style-patterns
mapbox / mapbox-agent-skills

Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.

Design & UI2.4k
P
perspective
perspective
bergside / awesome-design-skills

Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.

Design & UI2.4k
T
tailwindcss-animations
tailwindcss-animations
josiahsiegel / claude-plugin-marketplace

Tailwind CSS animations and transitions including built-in utilities and custom keyframes. Proactively activate for: (1) animate-* utilities (spin, ping, pulse, bounce), (2) custom @keyframes via @theme animate, (3) transition utilities (transition, duration, ease), (4) transforms (scale, rotate, translate) with transition, (5) prefers-reduced-motion: reduce, (6) Framer Motion / Motion One integration with Tailwind, (7) CSS scroll-driven animations (animation-timeline), (8) view transitions API with Tailwind, (9) hover, focus, group-hover transitions, (10) staggered list animations. Provides: animation utility reference, custom keyframe examples, reduced-motion pattern, Framer Motion integration, and scroll-driven animation recipes.

Design & UI2.4k
L
lingo
lingo
bergside / awesome-design-skills

Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

Design & UI2.4k
K
k2f-media-kit
k2f-media-kit
suzheng / k2f

Turn verified company, product, and leadership inputs into a journalist-ready media kit with scannable facts, boilerplate, and asset guidance—not a pitch deck or sales one-pager. Use when the user asks for a media kit, press kit, PR kit, or creator resource pack. Create media kits with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity

Marketing & growth2.4k
P
pacman
pacman
bergside / awesome-design-skills

Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics

Design & UI2.4k
T
tetris
tetris
bergside / awesome-design-skills

Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts

Design & UI2.3k
A
ascii-animation
ascii-animation
iart-ai / web-animation-skills

This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.

Creative & media2.3k
I
immersive
immersive
bergside / awesome-design-skills

An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)

Design & UI2.3k
S
spacing-system
spacing-system
owl-listener / designer-skills

Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use `layout-grid`.

Design & UI2.3k
C
claude
claude
bergside / awesome-design-skills

A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.

Design & UI2.3k
H
huggingface-gradio
huggingface-gradio
huggingface / skills

Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.

Development2.3k
E
experience-lwc-rtl-validate
experience-lwc-rtl-validate
forcedotcom / sf-skills

Use this skill to review a Lightning Web Component (.html, .js, .css files) for right-to-left (RTL) internationalization correctness, producing a finding list with code-level fixes covering CSS logical properties, bidirectional text handling, keyboard semantics, and RTL-aware SLDS class usage. Trigger when the user says "review this LWC for RTL," "audit i18n compliance," "fix bidirectional text rendering," "replace left/right CSS with logical properties," "check RTL layout issues," "verify SLDS RTL classes," "review my component for Arabic/Hebrew layout," "ensure this LWC works in RTL locales," or "check bidi text handling." DO NOT TRIGGER when the user is building a new LWC (use experience-lwc-generate), refactoring SLDS classes themselves (use design-systems-slds-apply or design-systems-slds2-migrate), or performing accessibility/security review.

Testing & quality2.3k
W
web-design-guidelines
web-design-guidelines
bytedance / deer-flow

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Design & UI2.3k
M
motion
motion
onmax / nuxt-skills

Use when adding animations with Motion Vue (motion-v) — provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt

Design & UI2.3k
R
responsive-design
responsive-design
owl-listener / designer-skills

Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.

Design & UI2.3k
R
react-native-tv-best-practices
react-native-tv-best-practices
callstackincubator / agent-skills

Reviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or reviewing react-native-tvos, Expo TV, Amazon Vega/Kepler, or React Native web TV targets where the issue depends on remote input, TV focus, TV packaging, TV hardware, or TV playback constraints.

Development2.3k
C
create-website
create-website
wondelai / skills

Guided journey from a blank page to a live, high-converting website, built message-first, then design, then conversion. Orchestrates ten skills phase by phase - one-page-marketing, storybrand-messaging, made-to-stick, top-design, web-typography, refactoring-ui, ux-heuristics, cro-methodology, scorecard-marketing, steve-jobs-design-review - asking the user questions at every decision point and recording results in the project docs/ folder (POSITIONING.md, WEBSITE.md, CREATE-WEBSITE-PLAN.md) so the journey resumes across sessions. Use when the user wants to build a new website or landing page from scratch, turn a validated idea into a page that converts, or says ''build me a landing page for my SaaS''. Site already exists: use improve-website site-wide, conversion-optimization for one flow, or grow-website for traffic; building a software product, not a marketing site: create-app; no positioning yet: create-business first, or the positioning phase here. For one framework in isolation, invoke that skill directly.

Design & UI2.3k
L
lottie-animation
lottie-animation
iart-ai / web-animation-skills

This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation on web or mobile", "control Lottie playback / segments", "make a scroll-driven Lottie", "recolor a Lottie at runtime", or "export an AE animation to Lottie". Covers dotLottie/lottie-web integration, playback control, interactivity, theming, and the AE export checklist

Design & UI2.3k
V
visual-content
visual-content
kostja94 / marketing-skills

Use when the user wants to plan, create, or repurpose visual content (images, infographics, social post images) across channels. Also use when the user mentions "content images," "social media images," "infographic," "visual content," "post image," "image specs," "visual repurposing," "content visuals," or "image for social post." For Pinterest, use pinterest-posts.

Marketing & growth2.3k
F
frontend-design
frontend-design
jwynia / agent-skills

Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.

Design & UI2.3k
G
gzh-design
gzh-design
isjiamu / gzh-design-skill

A typesetting engine for WeChat official account articles that converts Markdown into HTML you can paste straight into the account editor. Theme styles are picked from the custom theme library registered in references/theme-index.md, with automatic section numbering, keyword underline marking, lead cards, table of contents navigation, code blocks, images/GIFs and author signature. Supports Markdown / Word(.docx) / PDF / plain text input (non-Markdown input is normalized first), also supports "one-click auto-typesetting" (auto-infer the structure + pick a theme), and can also generate a custom theme component library from the user's description or reference images and save it locally for reuse. Trigger scenarios: (1) the user mentions WeChat official account typesetting, WeChat articles, WeChat typesetting or "gzh", (2) the user wants to convert an article (md/docx/pdf/plain text) into WeChat account HTML, (3) the user says "auto-typesetting" or "one-click typesetting" for account content, (4) the user wants to generate a new theme / custom style / a component library based on a reference image for WeChat account typesetting. Not for generating ordinary web pages, landing pages or PPT (use frontend or PPT-type skills).

Design & UI2.3k
E
emilkowalski-motion
emilkowalski-motion
nexu-io / open-design

Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.

Design & UI2.3k
S
sketch
sketch
bergside / awesome-design-skills

A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.

Design & UI2.3k
W
wireframe-spec
wireframe-spec
owl-listener / designer-skills

Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).

Design & UI2.3k
M
micro-interaction-spec
micro-interaction-spec
owl-listener / designer-skills

Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use `animation-principles`; for multi-state components use `state-machine`.

Design & UI2.3k
I
impeccable
impeccable
bergside / awesome-design-skills

A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.

Design & UI2.3k
C
codex
codex
bergside / awesome-design-skills

A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards.

Design & UI2.3k
D
dfm
dfm
earthtojake / text-to-cad

Design-for-manufacturing review of a part for sheet metal, CNC machining, or injection molding—bends, reliefs and flat patterns; machining access, internal corners, deep features and setups; draft, undercuts and projected area. Use when the user asks whether a part can be bent, machined or molded, asks about manufacturability or tooling, or asks for a DFM review or redesign

Testing & quality2.3k
P
proto-persona
proto-persona
deanpeters / product-manager-skills

Create a proto-persona from current research, market signals, and team knowledge. Use when you need a working customer profile before deeper validation.

Design & UI2.3k
R
roblox-gui
roblox-gui
tabooharmony / roblox-brain

Use when building or fixing Roblox menus, HUDs, shops, dialogs, or UI that must work on phones, tablets, desktop and console.

Design & UI2.3k
T
terracotta
terracotta
bergside / awesome-design-skills

A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent

Design & UI2.3k
901–960 of 10,561

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.