Multi Stack MCP
Generate native UI sections (hero, pricing, features, CTA, footer) for Next.js, Flutter, WordPress, or Vue from a unified pattern catalog with shared design tokens. Use when the user asks to "add a hero", "insert pricing section", "build landing page section", "create Flutter widget for marketing block", or wants the same brand styling applied across multiple stacks.
Install
npx skills add VovikP/multi-stack-mcp --skill multi-stack-mcpgit clone --depth 1 https://github.com/VovikP/multi-stack-mcp.git /tmp/multi-stack-mcp
mkdir -p ~/.claude/skills
cp -r /tmp/multi-stack-mcp/. ~/.claude/skills/multi-stack-mcpPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# multi-stack-mcp ## When to invoke this skill Trigger when the user asks any of: - "Add a hero section" / "вставити hero" / "build landing section" - "Create a [pricing|features|CTA|footer|testimonials] block for [Next.js|Flutter|WordPress|Vue]" - "Apply my brand tokens to a hero across all stacks" - "Generate a Gutenberg block for [pattern]" - "Build the same section in Flutter and Next.js" Do **NOT** trigger when: - The user wants raw component code without semantic structure (use shadcn MCP / pub.dev instead) - The user wants to edit an existing component (use Edit tool directly) - The user wants design assets, not code (use design / banner-design skill) ## How to use 1. **Identify the pattern** the user wants (`hero-section`, `pricing-section`, ...). If unclear, ask: *"Which section pattern — hero, pricing, features, or footer?"* 2. **Identify the target stack** (Next.js / Flutter / WordPress / Vue). If unclear, look at the working directory: - `package.json` with `next` → Next.js - `pubspec.yaml` → Flutter - `wp-content/` or `style.css` with `Theme Name:` → WordPress - `package.json` with `vue` → Vue - If still unclear, ask the user. 3. **Read the pattern files**. A stack folder can hold **more than one file** (e.g. WordPress always ships `block.json` + `render.php`). Always render the ENTIRE stack folder, not just the declared entry:
Details
- Skill name
multi-stack-mcp- Repository
- VovikP/multi-stack-mcp
- Repo updated
- 29 June 2026
- Listed in
- karanb192/awesome-claude-skills
FAQ
What does the Multi Stack MCP skill do?
Generate native UI sections (hero, pricing, features, CTA, footer) for Next.js, Flutter, WordPress, or Vue from a unified pattern catalog with shared design tokens. Use when the user asks to "add a hero", "insert pricing section", "build landing page section", "create Flutter widget for marketing block", or wants the same brand styling applied across multiple stacks.
How do I install the Multi Stack MCP skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add VovikP/multi-stack-mcp --skill multi-stack-mcp. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Related skills
Pdp Audit
llizell/pdp-audit
Research-backed UX and conversion audit of ecommerce product detail pages (PDPs). Use this skill whenever the user wants to review, audit, critique, or improve a product page — including requests like "review this PDP", "audit my product page", "why isn't this page converting", "UX review of [URL]", "check this product page against best practices", or when the user shares a product page URL or screenshots and asks for feedback. Also trigger for CRO reviews, conversion audits, or design QA of product pages, even if the words "audit" or "PDP" are not used.
Impresario
Shushant17711/impresario
Use when building, creating, designing, redesigning, animating or polishing any website, landing page, portfolio, product page, hero, microsite, component or app screen in any frontend stack — even when the user gives only a subject ("make a website for X") with no style direction. Autonomously invents a memorable, subject-specific concept and ships heavily animated, flowing, award-level (Awwwards style) work without asking the user for style choices. Also use when a result looks generic, templated, AI-made, flat, static or lifeless.
Pro Motion
jack-reson8/pro-motion
Pro Motion: make a high-taste motion-graphics launch film, brand film, TVC or promo video and the unconventional campaign around it, audio first: pick a surprising campaign mechanism (media hijack, fake-broken ads, meme replies, UGC army, FOOH), plan the music as a marketing asset, then render the film in code (canvas to MP4) cut to the beat with AE-style effects. Also builds stylized web pages the same way (official site, landing page, interactive hero: live WebGL type, cutout subjects, try-with-your-photo, waitlist). Use when the user asks for a launch video, product film, brand ad, app prom
Keyword Icons
1ruthless-coder-ai/keyword-icons
Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.
Scanning For Accessibility Issues
jeremylongshore/claude-code-plugins-plus-skills
This skill enables Claude to perform comprehensive accessibility audits. It uses the accessibility-test-scanner plugin to identify WCAG 2.1/2.2 compliance issues, validate ARIA attributes, check keyboard navigation, and assess screen reader compatibility. Use this skill when the user requests an accessibility scan, audit, or compliance check, or when terms like "WCAG", "ARIA", "screen reader", "accessibility testing", or "a11y" are mentioned. It provides actionable insights for improving web application accessibility.
Build with Better Design
1better-designs/better-design-plugin
Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.