Design AI Skills

Converts hardcoded Vue components in a Nuxt Content markdown file into slot-based, Studio-editable MDC components. Use when a user wants their Nuxt Content page to be visually editable in Nuxt…

Reviews already-written Coinbase Design System (CDS) UI for accessibility: verifying documented accessibility props (e.g. accessibilityLabel, accessibilityState), confirming the chosen CDS primitives…

This skill should be used when the user requests brand analysis, brand guidelines creation, brand audits, or establishing brand identity and consistency standards. It provides comprehensive frameworks…

Teaches the AI about modern Chrome Built-in AI APIs (Prompt, Translation, Writing Assistance) and their polyfills.

Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums.…

从结构化、表格或查询结果生成数据图表：选择适合对比、趋势、分布、相关性或层级关系的图型， 生成、修复、解释或校验 Flint 图表规格，输出可直接渲染的 ```flint 围栏块。 Trigger on: "画图", "画个图", "可视化", "出个图表", "flint", "chart", "visualize", "plot this", "graph these numbers",…

Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images,…

Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.

Use when you need to act as an Elite Software Architect (Maestro) to manage complex repositories. It enforces a "Why over How" philosophy, maintains a persistent project memory (Brain), and…

ALWAYS use this skill when working on ecommerce storefronts, online stores, shopping sites. Use for ANY storefront component including checkout pages, cart, payment flows, product pages, product…

Map entities to API DTOs in API Platform v4 with the Symfony Object Mapper (#[Map], stateOptions) for decoupled input/output contracts

Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline,…

A relentless interview that asks every frontier question at once, round by round.

Design the words in a product — labels, instructions, errors, confirmations, empty states, onboarding copy, tooltips, voice and tone frameworks, and content models. UX writing and content strategy as…

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build,…

Floating UI for Vue. ALWAYS use when writing code importing "@floating-ui/vue". Consult for debugging, best practices, or modifying @floating-ui/vue, floating-ui/vue, floating-ui vue, floating ui vue,…

Use this to design a nice UI in single html as inspiration & UI exploration.

Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites,…

Use when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck,…

Build a fully self-contained 360° equirectangular panorama viewer as a single HTML file. The viewer uses Three.js to render immersive spherical panoramas with drag-to-look, zoom, auto-rotate, and a…

Generates OpenChart (https://github.com/tryopendata/openchart) chart, table, graph, sankey, tilemap, and geo map specs from data, and guides editorial design decisions. Use when creating…

Convert Elementor layouts to clean GenerateBlocks V2 format, eliminating DIVception

Reverse-engineer any motion reference (a video from X/Twitter, Dribbble, a screen recording, a GIF) into production animation code through frame-level dissection. Use when the user shares a video/URL…

REST 및 GraphQL API 설계 원칙 가이드. 새로운 API 설계, API 스펙 리뷰, API 설계 표준 수립 시 활용. 트리거: "API 설계", "REST", "GraphQL", "엔드포인트 설계", "API versioning", "API 패턴" 안티-트리거: "프론트엔드 UI", "데이터베이스 스키마만", "CSS/스타일링", "배포/인프라"

Suite of tools for creating elaborate, multi-component AI artifacts viewer HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring…

Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely…

Use DeferredComponent to delay mounting ReactLynx content by frames, reserve layout space, show a placeholder, and observe layout after the content appears.

Animate React Three Fiber objects with useFrame, damping, and GLTF clips. Use for procedural motion, animation transitions, or demand-loop animation; use physics guidance for collision-driven…

Extract comprehensive site specifications from simple descriptions. Use when analyzing a user's theme request to determine site type, audience, tone, layout requirements, and typography.

Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. Triggers on: create a prd, write prd for, plan…

Clone any website's landing page with pixel-perfect fidelity. Visual-first workflow: screenshot → sniper CSS extraction → deep DOM interrogation → animation detection → rebuild in React + Tailwind +…

Patterns for delegating UI work to specialized agents. Covers synthesis-master vs specialized agents, multi-agent UI generation workflows, and orchestration strategies for complex UI tasks.

Launches an autonomous, pixel-perfect UI implementation loop using Figma MCP and Chrome.

Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.

Use when recreating a reference website or brand hub in this Hydrogen plus Weaverse repo, especially when deciding whether to reuse sections, add global styles, update theme schema, or resolve…

Configures Claude Code hooks and Codex hooks.json/notify callbacks. Use when adding guardrails, preflight, audit trails, worktree automation, or budget enforcement.

设计RESTful API并生成OpenAPI/Swagger规范文档，遵循行业最佳实践。包括端点命名、请求/响应模式和错误处理模式。

Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.

打开 SkillDock 本地 GUI，浏览和管理 Codex skills、plugins 与 marketplace 来源；适用于技能库、安装更新、启禁、移除恢复的可视化管理。普通任务只需使用某个 skill 时不触发。

Turn SVGs into interactive React 3D components using the 3dsvg library and visual editor

Designing new skill agents via gap analysis, overlap detection, SKILL.md + reference generation, and Nexus integration. Not for task orchestration (Nexus) or format-only audits (Gauge).

Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate…

REST and GraphQL API architect for designing robust, scalable APIs. Use when designing new APIs or improving existing ones.

Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code…

Zoom Cobrowse SDK for web - JavaScript SDK for real-time collaborative browsing between agents and customers. Features include annotation tools, privacy masking, remote assist, and PIN-based session…

Build, review, and refactor web interfaces that are easy for humans, screen readers, browser automation, Playwright tests, and AI agents to understand and operate. Use for UI components, forms,…

Comprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring Tailwind v4, or migrating projects from…

Arco Design Vue UI 组件库参考，面向 Vue 3 和 `@arco-design/web-vue`。当用户要求构建 Vue 页面、创建 Vue UI、使用 Arco Vue 编写前端代码、开发 Vue 仪表盘或应用，或提到 Arco Design…

Reviews UI for accessibility issues against WCAG 2.1/2.2 AA. Triggers on "is this accessible?", "check accessibility", or contrast/a11y review requests.

Major art movements and their historical context for art education. Covers 12 movements from the Renaissance to contemporary art, their defining characteristics, key artists, signature works, and the…