Files
web-designer/references/ai-skills.md
2026-08-14 17:03:15 +02:00

39 KiB
Raw Permalink Blame History

External AI agent skills — web-designer

Proven, publicly available AI agent skills mapped to this occupation. Nothing is copied from the sources: every entry is a name, a one-line summary and a link to the upstream skill package. Each section names its source repository, commit, license and retrieval date.

Tiers: core = the skill directly exercises a top market hard skill, tool or method (from gated job-ad evidence) or an essential ESCO competence of this occupation; adjacent = plausibly useful, secondary. Entries are capped at 12 per source and 80 in total per occupation (core first, strongest matches survive); everything beyond the caps is excluded and logged in the pipeline audit trail, not in this package.

Matched deterministically (ISCO group + title/competence keywords, tiered against market evidence + ESCO essentials) by pipeline/p5_enrich_ai_skills.py on 2026-07-14.

Source: anthropics/skills

  • Repository: https://github.com/anthropics/skills (commit f6656c1, retrieved 2026-07-14)
  • License: Apache-2.0; the document skills (docx/pdf/pptx/xlsx) are source-available — see the LICENSE.txt in the upstream skill folder
Skill Tier What it adds Upstream
web-artifacts-builder core Suite 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 … source
canvas-design core Create 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 … source
theme-factory core Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate … source
brand-guidelines adjacent Applies 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. source
frontend-design adjacent Guidance 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. source
docx adjacent Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', '.dotx', or requests to … source
algorithmic-art adjacent 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 … source
pdf adjacent Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating … source

Source: wshobson/agents

Skill Tier What it adds Upstream
javascript-testing-patterns core Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, … source
web-component-design core Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems. source
responsive-design core Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive … source
tailwind-design-system core 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. source
ui-ux-designer (agent) core Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, … source
accessibility-compliance core Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive … source
nodejs-backend-patterns core Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, … source
api-design-principles core Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards. source
interaction-design core Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. source
multi-platform-apps-backend-architect (agent) core Expert backend architect specializing in scalable API design, microservices architecture, and distributed systems. Masters REST/GraphQL/gRPC APIs, event-driven architectures, service mesh patterns, and modern backend frameworks. Handles … source
architecture-patterns core Implement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use this skill when designing clean architecture for a new microservice, when refactoring a monolith to use … source
mobile-ios-design core Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles. source

Source: angular/skills

Skill Tier What it adds Upstream
angular-new-app adjacent Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application. source
angular-developer adjacent Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, … source

Source: ConardLi/garden-skills

Skill Tier What it adds Upstream
web-design-engineer core Build polished visual web artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use when the user wants a browser-rendered, interactive, or presentational … source
beautiful-article core 把用户提供的素材(网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料)编辑、设计成一篇美丽的、可离线打开和分享的单文件 HTML 网页文章。基于 reacticle 组件协议:不手写裸 HTML/CSS而用语义组件 + 受主题约束的 Raw 自由层;按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进,默认 100% 信息保留的长文。触发场景:把 URL/PDF/DOCX/文章做成网页文章 … source
gpt-image-2 adjacent 面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用:(A) Garden 本地模式,通过 OpenAI 兼容接口直接出图并落盘;(B) Host-Native 模式,把本 Skill 当作提示词工程指引,把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图;(C) Advisor 模式,宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板,覆盖海报 / UI / 产品 / 信息图 / 学术图 … source

Source: a5c-ai/babysitter

Skill Tier What it adds Upstream
tailwind-css core Tailwind CSS configuration, custom plugins, design systems, theming, and component patterns for modern web applications. source
typescript-sdk-specialist core TypeScript SDK development with Node.js and browser support. Design SDK architecture, implement type-safe API clients, support ESM and CommonJS modules, and configure bundling for browsers. source
graphql core GraphQL schema design, resolvers, directives, subscriptions, and best practices for API development. source
growing-outside-in-systems core Drive feature development using Outside-In TDD with Hexagonal Architecture. Design emerges through inline code, in-memory fakes, interface extraction, and deferred I/O. Use when building features, writing tests, or structuring backend … source

Source: affaan-m/everything-claude-code

Skill Tier What it adds Upstream
accessibility core Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android). source

Source: anbeime/skill

Skill Tier What it adds Upstream
web-design-analyzer core 分析网页截图提取设计系统Design System并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。 source

Source: antfu/skills

Skill Tier What it adds Upstream
web-design-guidelines core 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". source

Source: Charlie85270/Dorothy

Skill Tier What it adds Upstream
web-design-guidelines core 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". source

Source: CloudAI-X/claude-workflow-v2

Skill Tier What it adds Upstream
web-design-guidelines core Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines". source

Source: davila7/claude-code-templates

Skill Tier What it adds Upstream
coding-standards core Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development. source
web-design-guidelines core 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". source
Accessibility Auditor core Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA/AAA standards, testing with screen readers, or ensuring ADA … source
premium-web-design core Create premium, Awwwards-quality website designs as React (.jsx) components that look like they were built by a top-tier agency charging $50k+ per project. Use this skill whenever the user asks for a website, landing page, portfolio, or … source
senior-frontend core Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. … source
develop-web-game core Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect … source

Source: ehmo/platform-design-skills

Skill Tier What it adds Upstream
web-design-guidelines core Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, … source

Source: fcakyon/claude-codex-settings

Skill Tier What it adds Upstream
web-design-guidelines core 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". source

Source: foryourhealth111-pixel/Vibe-Skills

Skill Tier What it adds Upstream
autonomous-builder core Full-stack software development agent for design, implementation, testing, and deployment. Use when the user explicitly asks for end-to-end project creation, feature development, bug fixing, or code refactoring. source

Source: garrytan/gstack

Skill Tier What it adds Upstream
design-html core Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) source

Source: giuseppe-trisciuoglio/developer-kit

Skill Tier What it adds Upstream
tailwind-css-patterns core Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, … source

Source: gooseworks-ai/goose-skills

Skill Tier What it adds Upstream
create-html-carousel core Create LinkedIn carousel posts as high-quality PNG images. Design informational multi-slide posts like "5 AI GTM workflows" with consistent styling, then automatically screenshot each slide at LinkedIn's optimal 1080x1080px format. source

Source: infrasity-labs/dev-gtm-claude-skills

Skill Tier What it adds Upstream
ui-styling core 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, … source
web-design-guidelines core 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". source

Source: inkline/inkline

Skill Tier What it adds Upstream
design-token-architecture core How design tokens and recipes flow from styleframe into Inkline — the presets, the two faces of virtual:styleframe, recipe class contracts, theming, and the rules for custom CSS in components. Use when designing, extending, or debugging … source

Source: jabrena/plinth

Skill Tier What it adds Upstream
123-java-design-patterns core Use when you need to select, review, or implement Java design and integration patterns — including classic Java design patterns, REST API patterns, Kafka and event-driven patterns, database and persistence patterns, and cross-cutting … source

Source: jeremylongshore/claude-code-plugins-plus-skills

Skill Tier What it adds Upstream
form-tokens core Use when asked to define a design token system, create tokens, document tokens, set up CSS custom properties, build a Tailwind token config, establish a spacing scale, define color semantics, or bridge design decisions to code. Examples: … source
form-web core Use when asked to design a landing page, marketing website, or any web presence intended to convert or inform. Examples: "design a landing page for X", "create a marketing site", "we need a homepage", "design our website", "build a page … source

Source: jezweb/claude-skills

Skill Tier What it adds Upstream
landing-page core Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social … source
design-review core Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks … source

Source: joeyvansommeren/journey-mapper

Skill Tier What it adds Upstream
journey-mapper core Scans a codebase and generates a self-contained HTML service-design journey map — NN/g combined customer journey + service blueprint format. Use when the user wants to map user journeys, create journey maps, build service blueprints, or … source

Source: Leonxlnx/taste-skill

Skill Tier What it adds Upstream
redesign-existing-projects core Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. source
image-to-code core Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must … source
imagegen-frontend-web core 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. … source

Source: mxyhi/ok-skills

Skill Tier What it adds Upstream
huashu-design core 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免选定后才执行。触发词做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 source
imagegen-frontend-web core 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. … source

Source: nextlevelbuilder/ui-ux-pro-max-skill

Skill Tier What it adds Upstream
ui-styling core 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, … source

Source: nexu-io/open-design

Skill Tier What it adds Upstream
frontend-design core Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, … source
redesign-existing-projects core Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. source
web-design-guidelines core Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. source
image-to-code core Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must … source
imagegen-frontend-web core 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. … source
impeccable-design-polish core Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass. source
od-web-effect-extractor core Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design web artifact. source

Source: nimbalyst/nimbalyst

Skill Tier What it adds Upstream
mockuplm core Create visual UX mockups using HTML/CSS files (.mockup.html). Use when the user wants to design UI, wireframes, visual layouts, or plan features visually. source

Source: plugin87/ux-ui-agent-skills

Skill Tier What it adds Upstream
design-code core Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. … source
brandkit core Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user … source

Source: secondsky/claude-skills

Skill Tier What it adds Upstream
responsive-web-design core Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility. source
design-system-creation core | Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency. source

Source: tzachbon/smart-ralph

Skill Tier What it adds Upstream
spec-workflow core This skill should be used when the user asks to "build a feature", "create a spec", "start spec-driven development", "run research phase", "generate requirements", "create design", "plan tasks", "implement spec", "check spec status", … source

Source: vibeeval/vibecosystem

Skill Tier What it adds Upstream
frontend-dev core Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and … source

Source: wanshuiyin/Auto-claude-code-research-in-sleep

Skill Tier What it adds Upstream
paper-poster-html core DEFAULT poster pipeline — build an academic conference poster (ICML/NeurIPS/ICLR/CVPR/...) as a single HTML/CSS file with measurement-driven hard gates, real paper figures, a two-hue design-token system, and print-ready PDF via headless … source

Source: worldwonderer/novel-to-game

Skill Tier What it adds Upstream
game-build core Build the game. Compress the approved GAME_DESIGN and ART_DIRECTION into a minimal BUILD_BRIEF, hand it to the current coding agent or another strong model to implement a fully playable web prototype, and iterate against real runs and … source

Source: google/skills

Skill Tier What it adds Upstream
firebase-basics adjacent Use this skill whenever you are working on a project that uses Firebase products or services, especially for mobile or web apps. source
gke-batch-hpc adjacent Runs batch and HPC workloads on GKE, utilizing job queues and parallel processing. Use when running GKE batch jobs, configuring GKE HPC, or setting up GKE job queues. Don't use for standard web application deployments (use … source

Source: veniceai/skills

Skill Tier What it adds Upstream
venice-errors adjacent Handle Venice API errors correctly. Covers the StandardError / DetailedError / ContentViolationError / X402InferencePaymentRequired body shapes, every meaningful status code (400, 401, 402, 403, 415, 422, 429, 500, 503, 504), the 402 … source