Topic · updated 2026-10-05
Design & Frontend Skills
70 Design & Frontend Skills indexed on awesomemcp.in. Every entry links to a live GitHub repository with a known author, is de-duplicated across the official MCP registry and community lists, and carries an automated vulnerability-check badge. Built by @anthropics, @nextlevelbuilder, @cathrynlavery, @zarazhangrui, @phuryn and 34 other authors.
Top 60 Design & Frontend Skills
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Needs review
★ 179,772
2026-10-05Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Needs review
★ 179,772
2026-10-05Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Needs review
★ 179,772
2026-10-05UI/UX design patterns and best practices
Scan passed
★ 133,287
2026-10-03by Cathryn Lavery - Another welcome contribution to the domain of making Claude Code output look stylish, this collection of skills produces a variety of editorial diagrams in the form of self-contained HTML + SVG. Although I never thought I'd hear these words together, according to the author: "no Mermaid-slop."
Scan passed
★ 43,419
2026-10-05Generate animation-rich HTML presentations with visual style previews
Scan passed
★ 30,166
2026-06-23Generate a Lean Canvas with problem, solution, metrics, cost structure, UVP, unfair advantage, channels, segments, and revenue. Use when exploring a lean startup canvas, testing a business hypothesis, or modeling a new venture.
Scan passed
★ 26,787
2026-09-14Generate a Startup Canvas combining Product Strategy (9 sections) and Business Model (costs + revenue) for a new product. An alternative to BMC and Lean Canvas that separates strategy from business model. Use when launching a new product or evaluating a startup concept.
Scan passed
★ 26,787
2026-09-14This skill should be used for the tool-interface layer of an agent system specifically: writing tool descriptions agents can route on, designing tool schemas and response formats, naming conventions, actionable error recovery messages, MCP server design, tool-set consolidation, and deciding when to add or remove an individual tool. Use this when the unit of work is a single tool or a set of tools.
Scan passed
★ 18,077
2026-10-01Opinionated, evolving constraints to guide agents when building interfaces
Scan passed
★ 9,406
2026-10-05Evaluate an AI product idea across outcomes, hypotheses, risks, and positioning. Use when deciding whether an AI solution deserves investment or recommendation.
Needs review
★ 7,168
2026-09-01Guide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.
Needs review
★ 7,168
2026-09-01Guide teams through MITRE's Problem Framing Canvas. Use when you need a clearer problem statement before jumping to solutions.
Needs review
★ 7,168
2026-09-01Present project-design pathway options and orchestrate regenerative projects using backwards design, PBL, SEEDS, compassionate systems action, or civic/service pathways.
Needs review
★ 826
2026-08-28SwiftUI 前端设计 skill — 反 AI Slop 六条铁律、设计方向顾问、品牌资产协议、五维评审。支持 Claude Code / Cursor / Codex / OpenCode 等全部 AI agent 平台。 By @wholiver
Scan passed
★ 209
2026-05-01by Robert Allen - A Skill based on this extremely well authored article about dynamic workflows. Detailed explanations regarding the Workflow tool and sensible advice covering a range of patterns and anti-patterns.
Scan passed
★ 2
2026-07-19Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Needs review
★ 179,772
2026-10-05Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Needs review
★ 179,772
2026-10-05Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Needs review
★ 179,772
2026-10-05You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Scan passed
★ 295,600
2026-09-27High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop
Scan passed
★ 92,799
2026-09-26Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. U
Scan passed
★ 78,036
2026-10-05When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "gro
Scan passed
★ 53,340
2026-10-03When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," "website planning," "what pages do I need," "h
Scan passed
★ 53,340
2026-10-03Create user stories following the 3 C's (Card, Conversation, Confirmation) and INVEST criteria with descriptions, design links, and acceptance criteria. Use when writing user stories, breaking down features into backlog items, or defining acceptance criteria.
Scan passed
★ 26,787
2026-09-14Design experiments to test assumptions for an existing product — prototypes, A/B tests, spikes, and other low-effort validation methods. Use when validating assumptions, testing feature ideas cheaply, or planning product experiments.
Scan passed
★ 26,787
2026-09-14Design lean startup experiments (pretotypes) for a new product. Creates XYZ hypotheses and suggests low-effort validation methods like landing pages, explainer videos, and pre-orders. Use when validating a new product idea, creating pretotypes, or testing market demand.
Scan passed
★ 26,787
2026-09-14Define and design a product metrics dashboard with key metrics, data sources, visualization types, and alert thresholds. Use when creating a metrics dashboard, defining KPIs, setting up product analytics, or building a data monitoring plan.
Scan passed
★ 26,787
2026-09-14Prioritize assumptions using an Impact × Risk matrix and suggest experiments for each. Use when triaging a list of assumptions, deciding what to test first, or applying the assumption prioritization canvas.
Scan passed
★ 26,787
2026-09-14Generate a Business Model Canvas with all 9 building blocks. Use when creating a business model, documenting how a business creates value, or analyzing an existing business model.
Scan passed
★ 26,787
2026-09-14Analyze and design pricing strategies including pricing models, competitive pricing analysis, willingness-to-pay estimation, and price elasticity. Use when setting prices, evaluating pricing models, preparing for a pricing change, or comparing freemium vs paid approaches.
Scan passed
★ 26,787
2026-09-14Create a comprehensive product strategy using the 9-section Product Strategy Canvas — vision, segments, costs, value propositions, trade-offs, metrics, growth, capabilities, and defensibility. Use when building a product strategy, creating a strategic plan, or defining product direction.
Scan passed
★ 26,787
2026-09-14Design a detailed value proposition using a 6-part JTBD template — Who, Why, What before, How, What after, Alternatives. Use when creating a value proposition, analyzing customer value delivery, or articulating why customers should choose your product.
Scan passed
★ 26,787
2026-09-14Generates operations-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Operational Excellence pillar of the Google Cloud Well-Architected Framework (WAF). Use this skill to evaluate a workload, identify operational requirements, and provide actionable recommendations for deployment, monitoring, and incident management.
Scan passed
★ 20,945
2026-10-05Generates performance-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Performance Optimization pillar of the Google Cloud Well-Architected Framework (WAF). Use this skill to evaluate a workload, identify performance requirements, and provide actionable recommendations for resource allocation, modular design, and elasticity.
Scan passed
★ 20,945
2026-10-05Generates guidance for reliability, resilience, availability, redundancy, fault-tolerance, and disaster recovery (DR) for Google Cloud workloads based on the design principles and recommendations in the Google Cloud Well-Architected Framework. Use when the user asks to evaluate, design, or improve the reliability, resilience, availability, or disaster recovery capabilities of Google Cloud workload
Scan passed
★ 20,945
2026-10-05Generates security-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Google Cloud Well-Architected Framework (WAF). Use this skill to evaluate workloads, identify security requirements, and provide actionable recommendations for IAM, network security, data protection, and operational security.
Scan passed
★ 20,945
2026-10-05Provides recommendations for environmental sustainability, carbon footprint reduction, and energy efficiency based on the Sustainability pillar of the Google Cloud Well-Architected Framework (WAF). Use when the user asks to assess, design, or optimize Google Cloud workloads for sustainability—including the shared responsibility model, selecting low-carbon regions (CFE%), reducing resource and AI/M
Scan passed
★ 20,945
2026-10-05by backnotprop - Interactive review UI that intercepts ExitPlanMode via hooks, letting you visually annotate plans with comments, deletions, and replacements before approving or denying with detailed feedback. Has since grown to cover code and diff review, PRs, and rendered HTML artifacts, with feedback sent straight back to the agent. Supports several coding agents alongside Claude Code.
Scan passed
★ 9,151
2026-10-05Proven workflow architectural patterns from real n8n workflows. Use when building new workflows, designing workflow structure, choosing workflow patterns, planning workflow architecture, or asking about webhook processing, HTTP API integration, database operations, AI agent workflows, batch processing, or scheduled tasks. Always consult this skill when the user asks to create, build, or design an
Scan passed
★ 6,378
2026-09-16by 0-AI UG - A cross-platform desktop IDE built on an infinite zoomable canvas, where editors, terminals, browsers, and docs float in freeform space instead of tabs — and ships skills that let Claude Code spawn agent terminals on the canvas, coordinate through canvas notes, and drive browser panels. A genuinely novel UX, well-engineered (CI, e2e tests, context-isolated IPC, scoped filesystem acces
Scan passed
★ 2,173
2026-10-05Implements design patterns including Clean Architecture, SOLID principles, and comprehensive software design best practices.
Scan passed
★ 1,747
2026-08-26Spec-driven development workflow that transforms prompts into production-ready implementations through structured planning, architecture design, and LLM-as-a-Judge based quality gates.
Scan passed
★ 1,747
2026-08-26Domain-driven development skills that also include Clean Architecture, SOLID principles, and design patterns.
Scan passed
★ 1,747
2026-08-26AI-powered KiCad electronics design review and analysis
Scan passed
★ 1,334
2026-10-05Builds websites gated by an anti-slop linter and motion QA
Scan passed
★ 1,035
2026-08-06by kiwiman - A design engine that takes a different tack from "feed the model more tokens": it teaches design judgment — ~74 rules pros carry but never write down ("the refined black isn't #000, it's #2A2A2A"; "one accent color, everything else grayscale") — as plain markdown the agent reads automatically, plus a brand-agnostic skin system, a named motion vocabulary, and /ss- review skills. Widely
Scan passed
★ 967
2026-10-0159-skill library covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Stack-agnostic with an Ahrefs MCP-powered SEO audit suite. Includes a meta-skill for writing your own. By @rampstackco
Scan passed
★ 933
2026-10-05Author learning targets for a competency across developmental bands with precise, observable progression language. Use when writing 'I can' statements for competency-based programmes.
Needs review
★ 826
2026-08-28Audit a proposed assessment for construct validity, reliability, and alignment to learning objectives. Use when reviewing or quality-assuring assessments before deployment.
Needs review
★ 826
2026-08-28Provide graduated assistance from abstract conceptual nudge to concrete procedural step, with reflection required before each escalation. Teaches help-seeking as a skill and prevents direct-answer shortcuts.
Needs review
★ 826
2026-08-28Unpack a broad standard or competency descriptor into specific, assessable success criteria and sub-skills. Use when interpreting curriculum standards or writing learning objectives.
Needs review
★ 826
2026-08-28Design the optimal funnel from click to conversion. Trigger on "funnel", "conversion path", "booked calls".
Needs review
★ 756
2026-03-26Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.
Needs review
★ 748
2026-04-07Creates design systems from existing codebases and iterates UI drafts
Scan passed
★ 623
2026-08-21Generate images using Google Gemini's image generation capabilities. Use this skill when the user needs to create, generate, or produce images for any purpose including UI mockups, icons, illustrations, diagrams, concept art, placeholder images, or visual representations.
Scan passed
★ 429
2026-09-10Generates Espresso UI tests for Android apps in Kotlin or Java. Espresso runs inside the app process for fast, reliable UI testing. Supports local and TestMu AI cloud real devices. Use when user mentions "Espresso", "onView", "ViewMatchers", "Android UI test", or "instrumentation test". Triggers on: "Espresso", "onView", "ViewMatchers", "Android UI test", "instrumentation", "TestMu".
Scan passed
★ 374
2026-09-25Browser automation + AI test authoring via kane-cli - run browser objectives, generate & refine test scenarios/cases from a description, design requirement-linked test suites from a PRD/spec (assurance), parse NDJSON output, inspect logs, save runnable _test.md. Use for any task requiring a real browser (navigate, click, fill forms, test web UI, take screenshots), or to author test cases, quick ca
Scan passed
★ 374
2026-09-25Generates Selenide tests in Java. Concise UI testing framework built on Selenium with automatic waits and fluent API. Use when user mentions "Selenide", "$(selector)", "shouldBe(visible)", "Selenide Java". Triggers on: "Selenide", "$() selector", "shouldBe", "shouldHave", "Selenide test".
Scan passed
★ 374
2026-09-25Generates XCUITest UI tests for iOS/iPadOS apps in Swift. Apple's native testing framework for reliable, fast UI automation. Supports local simulators and TestMu AI cloud real devices. Use when user mentions "XCUITest", "XCTest", "iOS UI test", "Swift test", "XCUIApplication". Triggers on: "XCUITest", "XCTest UI", "iOS UI test", "Swift UI test", "XCUIApplication", "TestMu".
Scan passed
★ 374
2026-09-25
Search all 70 in the interactive index →
Quick install
Add the most popular option to Claude Code:
git clone https://github.com/anthropics/skills.git # copy the skill folder into ~/.claude/skills/
FAQ
What is the best design & frontend skills?
By GitHub stars, the most popular is algorithmic-art by @anthropics (179,772 stars). awesomemcp.in lists 70 skills for this topic, ranked by official status and popularity.
Are these skills safe to install?
54 of 70 passed our automated vulnerability check (OSV.dev advisories for the published package, OpenSSF Scorecard, license, maintenance and provenance). The check is automated and does not guarantee 100% safety — review the code and permissions before installing.
How do I install algorithmic-art?
With Claude Code: git clone https://github.com/anthropics/skills.git # copy the skill folder into ~/.claude/skills/. Every listing on awesomemcp.in includes an install command and, where available, an mcp.json snippet for Claude Desktop, Cursor and other MCP clients.
Can AI agents read this list?
Yes. The full catalog is available as JSON at https://awesomemcp.in/api/mcps.json and https://awesomemcp.in/api/skills.json, and as plain text at https://awesomemcp.in/llms.txt.