web-designer/references/ai-skills.md

# 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](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](https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder) |
| `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](https://github.com/anthropics/skills/tree/main/skills/canvas-design) |
| `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](https://github.com/anthropics/skills/tree/main/skills/theme-factory) |
| `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](https://github.com/anthropics/skills/tree/main/skills/brand-guidelines) |
| `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](https://github.com/anthropics/skills/tree/main/skills/frontend-design) |
| `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](https://github.com/anthropics/skills/tree/main/skills/docx) |
| `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](https://github.com/anthropics/skills/tree/main/skills/algorithmic-art) |
| `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](https://github.com/anthropics/skills/tree/main/skills/pdf) |

## Source: wshobson/agents

- Repository: [https://github.com/wshobson/agents](https://github.com/wshobson/agents) (commit `6fd3247`, retrieved 2026-07-14)
- License: MIT (c) Seth Hobson

| 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](https://github.com/wshobson/agents/tree/main/plugins/javascript-typescript/skills/javascript-testing-patterns) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/web-component-design) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/responsive-design) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/tailwind-design-system) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/multi-platform-apps/agents/ui-ux-designer.md) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/accessibility-compliance) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/javascript-typescript/skills/nodejs-backend-patterns) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/backend-development/skills/api-design-principles) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/interaction-design) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/multi-platform-apps/agents/backend-architect.md) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/backend-development/skills/architecture-patterns) |
| `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](https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/mobile-ios-design) |

## Source: angular/skills

- Repository: [https://github.com/angular/skills](https://github.com/angular/skills) (commit `5dd20da`, retrieved 2026-07-14)
- License: no explicit license — referenced by link only

| 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](https://github.com/angular/skills/tree/5dd20da/angular-new-app) |
| `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](https://github.com/angular/skills/tree/5dd20da/angular-developer) |

## Source: ConardLi/garden-skills

- Repository: [https://github.com/ConardLi/garden-skills](https://github.com/ConardLi/garden-skills) (commit `fbd6453`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/ConardLi/garden-skills/tree/fbd6453/skills/web-design-engineer) |
| `beautiful-article` | core | 把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进，默认 100% 信息保留的长文。触发场景：把 URL/PDF/DOCX/文章做成网页文章 … | [source](https://github.com/ConardLi/garden-skills/tree/fbd6453/skills/beautiful-article) |
| `gpt-image-2` | adjacent | 面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报 / UI / 产品 / 信息图 / 学术图 … | [source](https://github.com/ConardLi/garden-skills/tree/fbd6453/skills/gpt-image-2) |

## Source: a5c-ai/babysitter

- Repository: [https://github.com/a5c-ai/babysitter](https://github.com/a5c-ai/babysitter) (commit `44a5d58b`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/a5c-ai/babysitter/tree/44a5d58b/library/specializations/web-development/skills/tailwind-css) |
| `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](https://github.com/a5c-ai/babysitter/tree/44a5d58b/library/specializations/sdk-platform-development/skills/typescript-sdk-specialist) |
| `graphql` | core | GraphQL schema design, resolvers, directives, subscriptions, and best practices for API development. | [source](https://github.com/a5c-ai/babysitter/tree/44a5d58b/library/specializations/web-development/skills/graphql) |
| `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](https://github.com/a5c-ai/babysitter/tree/44a5d58b/library/specializations/backend-development/skills/growing-outside-in-systems) |

## Source: affaan-m/everything-claude-code

- Repository: [https://github.com/affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code) (commit `ed38744`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/affaan-m/everything-claude-code/tree/ed38744/skills/accessibility) |

## Source: anbeime/skill

- Repository: [https://github.com/anbeime/skill](https://github.com/anbeime/skill) (commit `ddad607`, retrieved 2026-07-14)
- License: no explicit license — referenced by link only

| Skill | Tier | What it adds | Upstream |
|---|---|---|---|
| `web-design-analyzer` | core | 分析网页截图，提取设计系统（Design System）并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。 | [source](https://github.com/anbeime/skill/tree/ddad607/skills/web-design-analyzer/web-design-analyzer) |

## Source: antfu/skills

- Repository: [https://github.com/antfu/skills](https://github.com/antfu/skills) (commit `a74f281`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/antfu/skills/tree/a74f281/skills/web-design-guidelines) |

## Source: Charlie85270/Dorothy

- Repository: [https://github.com/Charlie85270/Dorothy](https://github.com/Charlie85270/Dorothy) (commit `470b8ac`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/Charlie85270/Dorothy/tree/470b8ac/.agents/skills/web-design-guidelines) |

## Source: CloudAI-X/claude-workflow-v2

- Repository: [https://github.com/CloudAI-X/claude-workflow-v2](https://github.com/CloudAI-X/claude-workflow-v2) (commit `4c242af`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/CloudAI-X/claude-workflow-v2/tree/4c242af/skills/web-design-guidelines) |

## Source: davila7/claude-code-templates

- Repository: [https://github.com/davila7/claude-code-templates](https://github.com/davila7/claude-code-templates) (commit `fa79251`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/davila7/claude-code-templates/tree/fa79251/cli-tool/components/skills/development/cc-skill-coding-standards) |
| `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](https://github.com/davila7/claude-code-templates/tree/fa79251/cli-tool/components/skills/creative-design/web-design-guidelines) |
| `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](https://github.com/davila7/claude-code-templates/tree/fa79251/cli-tool/components/skills/creative-design/accessibility-auditor) |
| `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](https://github.com/davila7/claude-code-templates/tree/fa79251/cli-tool/components/skills/creative-design/premium-web-design) |
| `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](https://github.com/davila7/claude-code-templates/tree/fa79251/cli-tool/components/skills/development/senior-frontend) |
| `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](https://github.com/davila7/claude-code-templates/tree/fa79251/cli-tool/components/skills/creative-design/develop-web-game) |

## Source: ehmo/platform-design-skills

- Repository: [https://github.com/ehmo/platform-design-skills](https://github.com/ehmo/platform-design-skills) (commit `dc2be82`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/ehmo/platform-design-skills/tree/dc2be82/skills/web) |

## Source: fcakyon/claude-codex-settings

- Repository: [https://github.com/fcakyon/claude-codex-settings](https://github.com/fcakyon/claude-codex-settings) (commit `44b7c00`, retrieved 2026-07-14)
- License: Apache-2.0

| 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](https://github.com/fcakyon/claude-codex-settings/tree/44b7c00/plugins/react-skills/skills/web-design-guidelines) |

## Source: foryourhealth111-pixel/Vibe-Skills

- Repository: [https://github.com/foryourhealth111-pixel/Vibe-Skills](https://github.com/foryourhealth111-pixel/Vibe-Skills) (commit `34429a8`, retrieved 2026-07-14)
- License: Apache-2.0

| 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](https://github.com/foryourhealth111-pixel/Vibe-Skills/tree/34429a8/bundled/skills/autonomous-builder) |

## Source: garrytan/gstack

- Repository: [https://github.com/garrytan/gstack](https://github.com/garrytan/gstack) (commit `7c9df1c`, retrieved 2026-07-14)
- License: MIT

| Skill | Tier | What it adds | Upstream |
|---|---|---|---|
| `design-html` | core | Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) | [source](https://github.com/garrytan/gstack/tree/7c9df1c/design-html) |

## Source: giuseppe-trisciuoglio/developer-kit

- Repository: [https://github.com/giuseppe-trisciuoglio/developer-kit](https://github.com/giuseppe-trisciuoglio/developer-kit) (commit `306f428`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/giuseppe-trisciuoglio/developer-kit/tree/306f428/plugins/developer-kit-typescript/skills/tailwind-css-patterns) |

## Source: gooseworks-ai/goose-skills

- Repository: [https://github.com/gooseworks-ai/goose-skills](https://github.com/gooseworks-ai/goose-skills) (commit `94ec916`, retrieved 2026-07-14)
- License: no explicit license — referenced by link only

| 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](https://github.com/gooseworks-ai/goose-skills/tree/94ec916/skills/design/capabilities/create-html-carousel) |

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

- Repository: [https://github.com/infrasity-labs/dev-gtm-claude-skills](https://github.com/infrasity-labs/dev-gtm-claude-skills) (commit `02cfefb`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/infrasity-labs/dev-gtm-claude-skills/tree/02cfefb/.claude/skills/ui-styling) |
| `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](https://github.com/infrasity-labs/dev-gtm-claude-skills/tree/02cfefb/.claude/skills/web-design-guidelines) |

## Source: inkline/inkline

- Repository: [https://github.com/inkline/inkline](https://github.com/inkline/inkline) (commit `fcc2bf4`, retrieved 2026-07-14)
- License: no explicit license — referenced by link only

| 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](https://github.com/inkline/inkline/tree/fcc2bf4/.claude/skills/design-token-architecture) |

## Source: jabrena/plinth

- Repository: [https://github.com/jabrena/plinth](https://github.com/jabrena/plinth) (commit `065eae8`, retrieved 2026-07-14)
- License: Apache-2.0

| 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](https://github.com/jabrena/plinth/tree/065eae8/skills/123-java-design-patterns) |

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

- Repository: [https://github.com/jeremylongshore/claude-code-plugins-plus-skills](https://github.com/jeremylongshore/claude-code-plugins-plus-skills) (commit `e112938a`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/e112938a/plugins/ai-agency/tonone/skills/form-tokens) |
| `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](https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/e112938a/plugins/ai-agency/tonone/skills/form-web) |

## Source: jezweb/claude-skills

- Repository: [https://github.com/jezweb/claude-skills](https://github.com/jezweb/claude-skills) (commit `e875a6b`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/jezweb/claude-skills/tree/e875a6b/plugins/frontend/skills/landing-page) |
| `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](https://github.com/jezweb/claude-skills/tree/e875a6b/plugins/frontend/skills/design-review) |

## Source: joeyvansommeren/journey-mapper

- Repository: [https://github.com/joeyvansommeren/journey-mapper](https://github.com/joeyvansommeren/journey-mapper) (commit `bbb316a`, retrieved 2026-07-14)
- License: Apache-2.0

| 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](https://github.com/joeyvansommeren/journey-mapper/tree/bbb316a/skills/journey-mapper) |

## Source: Leonxlnx/taste-skill

- Repository: [https://github.com/Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) (commit `b177427`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/Leonxlnx/taste-skill/tree/b177427/skills/redesign-skill) |
| `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](https://github.com/Leonxlnx/taste-skill/tree/b177427/skills/image-to-code-skill) |
| `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](https://github.com/Leonxlnx/taste-skill/tree/b177427/skills/imagegen-frontend-web) |

## Source: mxyhi/ok-skills

- Repository: [https://github.com/mxyhi/ok-skills](https://github.com/mxyhi/ok-skills) (commit `94707b6`, retrieved 2026-07-14)
- License: Apache-2.0

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

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

- Repository: [https://github.com/nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) (commit `fe3f65e`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/fe3f65e/.claude/skills/ui-styling) |

## Source: nexu-io/open-design

- Repository: [https://github.com/nexu-io/open-design](https://github.com/nexu-io/open-design) (commit `4b66023`, retrieved 2026-07-14)
- License: Apache-2.0

| 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](https://github.com/nexu-io/open-design/tree/4b66023/skills/frontend-design) |
| `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](https://github.com/nexu-io/open-design/tree/4b66023/skills/redesign-skill) |
| `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](https://github.com/nexu-io/open-design/tree/4b66023/skills/web-design-guidelines) |
| `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](https://github.com/nexu-io/open-design/tree/4b66023/skills/image-to-code-skill) |
| `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](https://github.com/nexu-io/open-design/tree/4b66023/skills/imagegen-frontend-web) |
| `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](https://github.com/nexu-io/open-design/tree/4b66023/skills/impeccable-design-polish) |
| `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](https://github.com/nexu-io/open-design/tree/4b66023/plugins/_official/scenarios/od-web-effect-extractor) |

## Source: nimbalyst/nimbalyst

- Repository: [https://github.com/nimbalyst/nimbalyst](https://github.com/nimbalyst/nimbalyst) (commit `7f15256`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/nimbalyst/nimbalyst/tree/7f15256/packages/extensions/mockuplm/claude-plugin/skills/mockuplm) |

## Source: plugin87/ux-ui-agent-skills

- Repository: [https://github.com/plugin87/ux-ui-agent-skills](https://github.com/plugin87/ux-ui-agent-skills) (commit `93a7fbb`, retrieved 2026-07-14)
- License: no explicit license — referenced by link only

| 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](https://github.com/plugin87/ux-ui-agent-skills/tree/93a7fbb/.claude/skills/design-code) |
| `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](https://github.com/plugin87/ux-ui-agent-skills/tree/93a7fbb/.claude/skills/brandkit) |

## Source: secondsky/claude-skills

- Repository: [https://github.com/secondsky/claude-skills](https://github.com/secondsky/claude-skills) (commit `c4889f6`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/secondsky/claude-skills/tree/c4889f6/plugins/responsive-web-design/skills/responsive-web-design) |
| `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](https://github.com/secondsky/claude-skills/tree/c4889f6/plugins/design-system-creation/skills/design-system-creation) |

## Source: tzachbon/smart-ralph

- Repository: [https://github.com/tzachbon/smart-ralph](https://github.com/tzachbon/smart-ralph) (commit `b26bb23`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/tzachbon/smart-ralph/tree/b26bb23/plugins/ralph-specum/skills/spec-workflow) |

## Source: vibeeval/vibecosystem

- Repository: [https://github.com/vibeeval/vibecosystem](https://github.com/vibeeval/vibecosystem) (commit `cea9462`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/vibeeval/vibecosystem/tree/cea9462/skills/frontend-dev) |

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

- Repository: [https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep](https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep) (commit `eb5c9d7`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep/tree/eb5c9d7/skills/paper-poster-html) |

## Source: worldwonderer/novel-to-game

- Repository: [https://github.com/worldwonderer/novel-to-game](https://github.com/worldwonderer/novel-to-game) (commit `3c18abd`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/worldwonderer/novel-to-game/tree/3c18abd/skills/game-build) |

## Source: google/skills

- Repository: [https://github.com/google/skills](https://github.com/google/skills) (commit `b15f327`, retrieved 2026-07-14)
- License: Apache-2.0

| 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](https://github.com/google/skills/tree/b15f327/skills/cloud/firebase-basics) |
| `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](https://github.com/google/skills/tree/b15f327/skills/cloud/gke-batch-hpc) |

## Source: veniceai/skills

- Repository: [https://github.com/veniceai/skills](https://github.com/veniceai/skills) (commit `de089fa`, retrieved 2026-07-14)
- License: MIT

| 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](https://github.com/veniceai/skills/tree/de089fa/skills/venice-errors) |