Tailwind CSS
FrontendCommonly used with
Skills using Tailwind CSS (624)
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
anima-hello-world
Generate React/Vue/HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automated design-to-code pipeline. Trigger: "anima hello world", "anima example", "figma to react", "figma to code", "anima generate code".
cursor-extension-integration
Integrate VS Code extensions with Cursor IDE: compatibility, Open VSX registry, VSIX installation, conflict resolution, and essential extensions. Triggers on "cursor extensions", "cursor vscode extensions", "cursor plugins", "cursor marketplace", "open vsx", "vsix install".
windsurf-local-dev-loop
Configure Windsurf local development workflow with Cascade, Previews, and terminal integration. Use when setting up a development environment, configuring Turbo mode, or establishing a fast iteration cycle with Windsurf AI. Trigger with phrases like "windsurf dev setup", "windsurf local development", "windsurf dev environment", "windsurf workflow", "develop with windsurf".
ai-analyzer
AI驱动的综合健康分析系统，整合多维度健康数据、识别异常模式、预测健康风险、提供个性化建议。支持智能问答和AI健康报告生成。
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
frontend-ui-dark-ts
A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.
landing-page-generator
Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.
magic-ui-generator
Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
plan-writing
Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
saas-mvp-launcher
Use when planning or building a SaaS MVP from scratch. Provides a structured roadmap covering tech stack, architecture, auth, payments, and launch checklist.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
web-artifacts-builder
To build powerful frontend claude.ai artifacts, follow these steps:
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
new-rails-project
Create a new Rails project
tailwind-design-system
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
claude-code-guide
To provide a comprehensive reference for configuring and using Claude Code (the agentic coding tool) to its full potential. This skill synthesizes best practices, configuration templates, and advanced usage patterns.
tailwind-design-system
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
css-precision-editor
Precision CSS/styling modifications for pixel-perfect adjustments with Tailwind, CSS Modules, and plain CSS support
nuxt
Nuxt 3 patterns including Nitro server, auto-imports, modules, hybrid rendering, and full-stack development.
tailwind-css
Tailwind CSS configuration, custom plugins, design systems, theming, and component patterns for modern web applications.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
plan-writing
Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
landing-page
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 proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.
tailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
vite-flare-starter
Scaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI. Run setup.sh to clone, configure, and deploy. Use whenever the user wants a batteries-included Cloudflare full-stack app, vite-flare-starter scaffold, or a React + Cloudflare app with auth + database + Workers AI ready to go.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
skillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard, fix visual bugs in either frontend, or need to know which design tokens, components, or patterns to use. This skill covers color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations, and anti-patterns for both frontends. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.
baseline-ui
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
emergency-card
生成紧急情况下快速访问的医疗信息摘要卡片。当用户需要旅行、就诊准备、紧急情况或询问"紧急信息"、"医疗卡片"、"急救信息"时使用此技能。提取关键信息（过敏、用药、急症、植入物），支持多格式输出（JSON、文本、二维码），用于急救或快速就医。
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
clone-website
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
ckmbanner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
ckmdesign
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
ckmdesign-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
ckmui-styling
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, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
landing-page-generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.
saas-scaffolder
Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS app, start a subscription-based web project, scaffold a Next.js application, or mentions terms like starter template, boilerplate, new project, or wiring up auth and payments.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
senior-fullstack
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
ss-a11y
Audit a component or page for accessibility issues and fix them
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-component
Generate a new UI component following the StyleSeed design conventions
ss-copy
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
ss-feedback
Add appropriate user feedback states (loading, success, error, empty) to a component or page
ss-flow
Design user flows and navigation structure following proven UX patterns
ss-lint
Quick automated lint — detects common design system violations in seconds
ss-motion
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
ss-page
Scaffold a new mobile page/screen using the StyleSeed layout patterns
ss-review
Review UI code for design system compliance, accessibility, and best practices
ss-setup
Interactive setup wizard — guides you step-by-step to configure the design system for your project
ss-update
Update StyleSeed engine in your project — analyzes what's outdated and updates safely
design-to-code
Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.
senior-frontend
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. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
brainstorming
需求澄清 Skill。当用户只给了模糊描述时自动触发，通过业务提问把一句话翻译成完整需求，交给 Boss 流水线执行。 Triggers: '我想做一个', '帮我做', '有个想法', 'brainstorm', '帮我规划一下', '做个XX', 'I want to build' Does NOT trigger: - 需求已经完整（包含做什么 + 给谁用 + 核心场景） - 纯技术问题或 bug 修复 Output: .boss/<feature>/design-brief.md 需求设计简报
tailwind-design-system
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.
inspira-ui
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.
ss-pattern
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
ss-tokens
View, add, or modify design tokens in the StyleSeed design system
claude-code-guide
Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent.
react-code-review
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after implementing new features, or for component architecture validation. Triggers on "review React code", "React code review", "check my React components".
shadcn-ui
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
tailwind-css-patterns
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, building responsive layouts, implementing design systems, or optimizing CSS workflow.
tailwind-design-system
Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, building a consistent UI component library, initializing a design system configuration, or wrapping shadcn/ui components into design system primitives.
css-debug
Use this skill to diagnose CSS and frontend layout issues such as positioning, overflow clipping, Tailwind class conflicts, z-index stacking, and React rendering visibility problems.
ckmbrand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
project-guidelines-example
Example template for project-specific skill files covering architecture, patterns, testing, and deployment.
design-system-auditor
Design system accessibility auditor. Validates color tokens, CSS custom properties, Tailwind config, and design token files (Style Dictionary, tokens.json) for WCAG AA/AAA contrast compliance. Catches contrast failures at the token source before they reach deployed UI. Also validates focus ring tokens (WCAG 2.4.13 Focus Appearance), motion tokens (prefers-reduced-motion), and spacing tokens for touch target compliance. Supports MUI, Chakra UI, Radix, shadcn/ui, and Style Dictionary.
framework-accessibility
Framework-specific accessibility patterns, common pitfalls, and code fix templates for React, Next.js, Vue, Angular, Svelte, and Tailwind CSS. Use when generating framework-aware accessibility fixes or checking framework-specific anti-patterns.
korean-privacy-terms
처리방침·이용약관 자동 생성 스킬 패키지 (v4.0). 호출 시 privacy-kr·privacy-eu·privacy-us·privacy-global 4개 하위 스킬을 번호 메뉴로 제시하고 번호 입력 즉시 해당 스킬 인터뷰로 직행. 한국 PIPA + EU GDPR + US CCPA/CPRA 대응.
privacy-eu
EU 사용자 대상 서비스용 Privacy Notice·Terms of Service·Consent Modal·Cookie Banner 자동 생성. GDPR (Regulation 2016/679) + ePrivacy Directive + Consumer Rights Directive 2011/83 + Digital Services Act + Digital Content Directive + Unfair Terms Directive 반영. 영문 인터뷰로 진행.
privacy-global
한국+EU 병기 처리방침·이용약관 자동 생성. 한국 본사가 EU 사용자까지 대상으로 서비스할 때 사용. 한국어(PIPA)·영문(GDPR) 두 세트 문서를 동시 생성하고, Footer에 언어·관할 전환 링크 자동 삽입.
privacy-global-jp
한국+일본 병기 처리방침·이용약관 자동 생성. 한국 본사가 일본 사용자까지 대상으로 서비스할 때 사용. 한국어(PIPA)·일본어(APPI) 두 세트 문서를 동시 생성하고, Footer에 언어·관할 전환 링크 자동 삽입.
privacy-jp
日本サービス向け（일본 서비스용） プライバシーポリシー・利用規約・同意モーダル・Cookieバナー 자동 생성. 個人情報保護法(APPI)·消費者契約法·特定商取引法 반영. Next.js 13~16 프로젝트 대상.
privacy-kr
한국 서비스용 처리방침·이용약관·회원가입 동의 모달·쿠키 배너 자동 생성. 개인정보보호법 §30, 2025.4.21 작성지침, 2026.3 개정법, 공정위 전자상거래 표준약관 10023호 반영. Next.js 13~16 프로젝트 대상.
privacy-us
미국 CCPA/CPRA + 주요 주법(VCDPA·CPA·CTDPA·UCPA·ICDPA·KCDPA·RIDPA) 기반 Privacy Policy 자동 생성. 2026.1.1 CPPA 갱신 규정, Sensitive Personal Information, Do Not Sell/Share, ADMT 공개, GPC 브라우저 신호 대응. 캘리포니아 거주자 서비스·100K records 초과 서비스 대상.
unocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
debug-live-issue
Debug production-like issues in this repository with disciplined evidence gathering. Use when fixing failing workflows, regressions, flaky behavior, or data inconsistencies across hooks, API, DB, websocket, and UI.
mcp-maintainer
Operate and maintain the local MCP server for this repository. Use for MCP tool updates, policy-guard changes, host configuration, and MCP runtime troubleshooting.
mcp-operations
Operate and maintain the local MCP server for this project. Use when creating MCP host config, troubleshooting tool connectivity, modifying tool domains, or adjusting safety policy flags.
ship-feature
Implement a feature safely end-to-end in this repository. Use when adding or changing functionality across backend, frontend, or MCP with required verification and documentation updates.
zero-build-frontend
Zero-build frontend development with CDN-loaded React, Tailwind CSS, and vanilla JavaScript. Use when building static web apps without bundlers, creating Leaflet maps, integrating Google Sheets as database, or developing browser extensions. Covers patterns from rosen-frontend, NJCIC map, and PocketLink projects.
ckmslides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
nuxt-ui-v4
Nuxt UI v4 component library for building Nuxt v4 applications. 125+ accessible components with Tailwind v4, Reka UI, dark mode, theming. Use for dashboards, forms, overlays, editors, page layouts, pricing pages, or encountering component, theming, or TypeScript errors.
tailwind-v4-shadcn
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
heroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
privacy-terms
처리방침·이용약관 자동 생성 진입점. 호출 즉시 6개 하위 스킬(privacy-kr·privacy-eu·privacy-us·privacy-jp·privacy-global·privacy-global-jp)을 번호 메뉴로 제시하고, 번호 입력 즉시 해당 스킬 인터뷰로 직행한다.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
figma-to-code
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
design-minimal
Use when the user explicitly asks for a standalone HTML page in a restrained minimal style, especially reading-first dashboards, briefs, handouts, maps, or internal reports. User-invoked only; do not auto-trigger.
html-draft
Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. Generates one HTML file using Tailwind v4 (browser CDN) for layout and D3 v7 (CDN) for SVG diagrams. User-invoked only — do NOT auto-trigger. Triggers on "/html-draft", "сделай blueprint", "технический чертёж", "архитектурная схема", "инженерная схема", "blueprint diagram", "engineering blueprint", "technical spec sheet", "architecture diagram", "system flow diagram".
database-design
Tier 2: Database design and modeling. ER diagrams, schema design, normalization, optimization. Keywords: database design, schema, ER diagram, normalization, 数据库设计, 数据建模
css-debug
Use this skill to diagnose CSS and frontend layout issues such as positioning, overflow clipping, Tailwind class conflicts, z-index stacking, and React rendering visibility problems.
figma-to-react
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
ban-pattern
Register AI-generated-looking UI patterns as prohibited rules in the design system. Use when user says "AIっぽい", "AI臭い", "これ禁止", "このパターンやめたい", "ban this pattern", "add to prohibited", or points out a generic/cookie-cutter UI element.
frontend-design
Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл.
ckm-ui-styling
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, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
tailwind-css-v4-mastery
Expert guidance for leveraging Tailwind CSS V4's new Oxide engine, CSS-first configuration, and modern styling paradigms. This skill transforms Claude into a Tailwind V4 architecture specialist, capable of designing component systems, optimizing performance, and executing complex styling challenges with precision.
release-guard
Run release-readiness checks for this repository. Use when validating docs, scripts, verification coverage, and operational safety before merge or release.
repo-onboarding
Understand this repository quickly before making changes. Use for architecture discovery, ownership mapping, command selection, and initial implementation planning.
angular-spa
Angular 21.x SPA development skill with TailwindCSS 4.x and daisyUI 5.5.5. Use when building Angular standalone components, services, lazy-loaded routes, unit tests, or creating UI with TailwindCSS + daisyUI. Covers component scaffolding, UI/UX design, accessibility audits, and design systems.
ionic-app-creation
Guides the agent through creating a new Ionic app using the Ionic CLI. Covers project scaffolding with ionic start, framework selection (Angular, React, Vue), template selection (blank, tabs, sidemenu), Capacitor integration, and optional Tailwind CSS setup. After app creation with Capacitor integration, delegates to the capacitor-app-creation skill for further Capacitor setup. Do not use for existing Ionic projects, migrating Ionic apps, upgrading Capacitor versions, or non-Ionic mobile frameworks.
anomaly-alert
Identify anomalous sessions using Agent Monitor data — cost outliers from the pricing engine, token anomalies (cache miss spikes, compaction baseline surges), unusual event type ratios (PreToolUse/PostToolUse gaps, APIError clusters), behavioral deviations from workflow intelligence (complexity score outliers, error propagation anomalies), and sessions with abnormal metadata (extreme turn_count, high thinking_blocks, zero turn_duration).
cost-breakdown
Break down Claude Code costs using the Agent Monitor pricing engine. Shows per-model costs (input, output, cache_read, cache_write at $/Mtok rates), per-session costs, daily trends, and compaction baseline token recovery. Use when analyzing spending, comparing model costs, or planning budgets.
hook-diagnostics
Diagnose Claude Code hook installation, delivery, and ingestion issues. Checks hook configuration, connectivity, event flow, and identifies common problems. Use when events are not appearing in the dashboard.
optimization-suggest
Suggest concrete optimizations for Claude Code usage based on historical session data. Covers cost reduction, speed improvement, error prevention, and workflow efficiency. Use for data-driven optimization planning.
pattern-detect
Detect recurring patterns using the Agent Monitor's workflow intelligence — toolFlow transitions (tool A → B frequency matrices), recurring workflow patterns, agent co-occurrence pairs, model delegation habits, error propagation paths by agent depth, and compaction triggers. Use to discover habitual usage patterns and anti-patterns.
productivity-score
Calculate a productivity score using actual Agent Monitor metrics — session completion rates, cache efficiency (cache_read vs input), compaction pressure (baseline tokens), turn velocity (turn_count / total_turn_duration_ms), tool success ratio (PreToolUse vs PostToolUse), and the workflow intelligence API's complexity and effectiveness scores.
session-compare
Compare two sessions side-by-side using Agent Monitor data — per-model token usage (input/output/cache_read/cache_write + compaction baselines), pricing engine cost breakdowns, workflow intelligence (complexity scores, tool flow transitions, subagent effectiveness), session metadata (thinking_blocks, turn_count, turn_duration_ms, usage_extras), and full event timelines with all 10+ event types.
session-debug
Debug a specific session by inspecting its full event chain (PreToolUse, PostToolUse, Stop, SubagentStop, Compaction, APIError, TurnDuration, Notification events), agent hierarchy (recursive parent/child tree with subagent_type and depth), token usage with compaction baselines, workflow intelligence data (orchestration DAG, error propagation by depth), and session metadata (thinking_blocks, turn_count, total_turn_duration_ms).
session-report
Generate a comprehensive session report with per-model token usage (input, output, cache_read, cache_write including compaction baselines), cost breakdown via the pricing engine, tool invocations, agent hierarchy, compaction events, API errors, turn durations, and thinking block counts. Use when reviewing a specific session or summarizing activity over a date range.
sprint-summary
Summarize a sprint's worth of Claude Code activity ��� sessions grouped by project (cwd), per-model cost breakdown, token efficiency (cache hit rate, compaction baselines), subagent effectiveness from workflow API, velocity metrics (turn_count, turn_duration_ms), and tool diversity across the sprint.
usage-trends
Analyze Claude Code usage trends over time using the Agent Monitor's analytics API — daily session counts, daily event counts, token volumes by type, model distribution, tool usage rankings, and agent/event type distributions across 365-day retention windows.
weekly-report
Compile a weekly productivity report using Agent Monitor data — daily_sessions and daily_events trends, per-session costs from pricing engine, token volumes (input/output/cache_read/cache_write + baselines), tool usage top 20, session completion rates by status, and workflow intelligence metrics.
workflow-optimizer
Analyze workflow patterns using the Agent Monitor's workflow intelligence API — orchestration DAGs, tool flow transitions, subagent effectiveness, model delegation patterns, error propagation by depth, concurrency lanes, compaction impact, and agent co-occurrence. Produces prioritized optimization recommendations with quantified impact.
paper-design
This skill should be used when designing UI in Paper Design (app.paper.design), reading or writing Paper documents via MCP, converting Paper designs to React/Tailwind code, importing HTML/CSS into Paper, syncing design tokens, or choosing between Paper and Pencil for a design task. Triggers on Paper, paper.design, DOM-based design, design-to-code, HTML-to-design, Paper MCP, Paper artboard, prototype, mockup, layout, export design, convert design. Pairs with minoan-frontend-design for creative direction and shadcn for component library.
shadcn-tailwind
Build UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS. Triggers on tailwind, shadcn, utility classes, CSS variables, OKLCH, component styling, theming, dark mode, radix ui.
typescript-dev
Build full-stack TypeScript apps with Vite 8, React 19, Tailwind CSS v4, shadcn/ui, Biome, Vitest, and Hono. Covers the frontend (Vite/Rolldown build + dev server, type-safe React 19, strict TypeScript 6.0, Tailwind/shadcn styling, Biome lint/format, Vitest) and the Hono 4 backend/edge layer (routing, middleware, Zod validation, end-to-end type-safe RPC, OpenAPI, multi-runtime deploy). Use when setting up or working in a TypeScript project: configuring Vite, writing components, the React Compiler, Tailwind/shadcn, dev server/HMR, bundles, tests, lint/format/CI, or building a Hono API and wiring its RPC client to React. Triggers on vite, rolldown, react, tsx, typescript, tsconfig, react compiler, tailwind, shadcn, cva, biome, vitest, hmr, dev server, hono, hono rpc, hc client, cloudflare workers, edge api, zod validator, zod-openapi.
vite
Configure and optimize Vite 7 for React projects. Covers build tooling, dev server, plugins, HMR, chunk splitting, Environment API, and Rolldown integration. Use when setting up Vite, configuring builds, optimizing bundles, managing plugins, or troubleshooting dev server. Triggers on vite, vite config, vite plugin, HMR, dev server, build optimization, chunk splitting, rolldown, vite proxy, environment api, rolldown-vite.
general-readme-skill
Use when generating or improving README.md for any project. Trigger on /readme, "generate readme", "write readme", "create project documentation", "更新README", "帮我写 README".
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
excel-automation
Excel automation - Read, write, format, and analyze Excel files. Keywords: excel, spreadsheet, xlsx, automation, data analysis
avoid-ai-design
Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"). Use this skill when asked to "de-slop a UI", "make a design look less AI-generated", "audit a component or page for AI design tells", or "fix Claude/Codex-generated frontend that looks generic". Covers HTML/CSS and React/Tailwind/shadcn. Supports a detection-only mode that flags patterns without rewriting.
astro-styling
Use when styling Astro components with scoped CSS, CSS Modules, Tailwind CSS, UnoCSS, or Sass. Covers class:list directive, global styles, CSS custom properties, and Vite-powered preprocessors.
health-check
Run comprehensive health checks on the Claude Code Agent Monitor system. Validates dashboard API, database, WebSocket, hooks, and disk usage. Use to verify the monitoring setup is working correctly.
ia-tailwind-css
Tailwind CSS v4 patterns: CSS-first config, utility classes, component variants, v3 migration. Use when styling with Tailwind, configuring @theme tokens, using tailwind-variants/CVA, migrating v3 to v4, or fixing Tailwind styles and dark mode.
figma-to-code
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
figma-to-react
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
artisan
Implementing production frontend code for React/Vue/Svelte. Handles hooks design, state management, Server Components, form handling, and data fetching. Converts Forge prototypes to production-quality code.
nuxt-ui
Use when building styled UI with @nuxt/ui v4 components — forms, data tables, modals, theming. Use vue for raw patterns, reka-ui for headless.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
plan-writing
Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
shadcn-ui-patterns
Use when building UI components. Enforces ShadCN UI patterns, accessibility standards (Radix UI), and TailwindCSS best practices for November 2025.
tailwind-v4-shadcn
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
unocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
a11y-fixes
Resolve axe-core accessibility violations reported by Vitest (test/a11y.ts), Playwright (.playwright/a11y.ts), or the code-review-audit agent's a11y bucket. Trigger on any axe rule id appearing in test output, not only the ones named here. Contains fix patterns for the most common violations (color-contrast, label, label-title-only, image-alt, button-name, link-name, region, landmark-one-main, heading-order, aria-allowed-attr, aria-required-attr, aria-required-children, aria-required-parent, aria-valid-attr-value, focus-trap, tabindex, html-has-lang, document-title, duplicate-id, listitem, definition-list); for any violation not listed, apply the general axe guidance and the same fix-then-verify loop.
eslint-fixes
Resolve specific ESLint errors and warnings that appear in this project. Use when fixing lint failures, ESLint reported issues, or autofix conflicts (e.g. no-void, canonical/export-specifier-newline vs prettier, no-shadow trailing underscores, sonarjs/deprecation, you-dont-need-lodash-underscore, testing-library/prefer-screen-queries, testing-library/await-async-events, jest-dom/prefer-*).
playwright-cli
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
skeleton-loaders
For building skeleton loading states that are pixel-perfect matches of real content. Use this skill whenever adding loading states to components, building skeletons for async data, handling pending loader states in route transitions, or implementing the shimmer animation pattern. Also trigger when the user asks about preventing layout shift during data fetching.
tailwind
Patterns and conventions for all Tailwind styling. Use this skill whenever writing Tailwind class names, combining conditional classes, building component variants, or choosing between twJoin and twMerge. Also trigger when the user asks about custom values, defining @theme tokens or CSS variables, naming color/spacing tokens, rem vs px, responsive breakpoints, or avoiding template literal class strings.
typescript
Patterns and conventions for all TypeScript code. Use this skill whenever writing or reviewing TypeScript, naming identifiers, typing exports, choosing between type and interface, using Zod schemas, structuring function parameters, or enforcing code patterns like avoiding switch statements and enums.
daily-standup
Generate a daily standup summary from recent Claude Code sessions — completed work grouped by project (cwd), session costs from the pricing engine, tool invocations, error/compaction/APIError events, and turn velocity metrics from session metadata (turn_count, total_turn_duration_ms).
dashboard-status
Quick dashboard health and status overview — checks the Agent Monitor API (port 4820), reports session/agent/event counts from /api/stats, confirms WebSocket connectivity, validates hook configuration in ~/.claude/settings.json, and shows data freshness (last event timestamp). Use to verify the monitoring system is operational.
data-export
Export Claude Code session and analytics data in JSON, CSV, or Markdown formats. Supports exporting sessions, events, costs, and analytics for external analysis or reporting. Use for data backup or integration.
quick-stats
One-line summary of key Agent Monitor metrics — active sessions, total cost from the pricing engine, events today from daily_events, top tool from tool_usage, and current model from the most recent session. Use for a fast at-a-glance check without leaving the terminal.
pdlc-ui-design-pro
UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max）
ccc-design
click-first picker over 39 design skills. Landing pages, component systems, polish suite, Figma→code. Use when the user types /ccc-design, asks to 'design a landing…
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
docs-seeker
Fetch up-to-date library and framework documentation into AI context. Use when looking up docs, finding feature-specific references, or discovering documentation sources for any library, framework, or tool.
nextjs-development
Next.js framework development including App Router, Server Components, Server Actions, SSR, SSG, ISR, caching, data fetching, middleware, layouts, parallel routes, and module architecture for Next.js 13+/15/16. NOT for generic React patterns, hooks, or component logic (use react-development). NOT for UI/CSS design systems or visual styling (use frontend-design).
tailwind-design-system
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.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
heroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
page-builder
Helper for building landing pages and marketing sites using Tailark components.
tailwind-patterns
Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.
shadcn
shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.
v0-dev
v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.
scaffold
Bootstrap a new web project on a strictly opinionated Cloudflare Workers stack — Next.js 16 or Astro 6, TypeScript strict, pnpm, Biome, Tailwind. No fallbacks: no Vercel/Netlify, no ESLint/Prettier, no swap. Skip if the user wants any of these. Use when the user says "start a new project", "bootstrap", "init", "scaffold", "create a new site", or is working in an empty directory and wants production-ready foundations.
new-component
Scaffold a new React component with optional Storybook story and Vitest test files. Use this skill whenever the user asks to "create a component", "make a button", "scaffold a card", "add a new component", or asks for a new file under `app/components/` following the project's component pattern (PascalCase folder, index.tsx, tests/).
new-route
Scaffold a new route with its page component, test, story, and optional i18n keys. Use this skill whenever the user asks to "create a route", "add a new page", "scaffold /dashboard", "wire up a new route under _public+ or _session+", or anything that implies adding a file under `app/routes/` with a matching `app/pages/{Group}/{PageName}/` folder.
new-service
Scaffold a new API service with request functions, Zod schemas, URL constants, and optional MSW mock handlers. Use this skill whenever the user asks to "add a service", "create the projects API", "scaffold a new GAIA service", "wire up CRUD for users", or anything implying a new folder under `app/services/gaia/{name}/` with parsers/types/requests + matching `test/mocks/{name}/` collections.
color-accessibility-audit
Analyze color combinations for readability and accessibility compliance per WCAG 2.1/2.2 standards (Contrast Minimums 1.4.3 and Enhanced Contrast 1.4.6). Use this skill whenever the user shares a design, color palette, CSS, HTML, Tailwind config, theme file, screenshot of a UI, or mentions anything about text being hard to read, colors clashing, poor contrast, accessibility compliance (WCAG), or asks "can you check if these colors work together?" Also trigger when reviewing any frontend code, design tokens, or style sheets — even if the user doesn't explicitly ask about contrast. If colors are involved, check them. Covers: hex codes, RGB, HSL, named CSS colors, Tailwind classes, design tool exports, and UI screenshots. Includes color blindness simulation for Protanopia, Deuteranopia, and Tritanopia.
tailwind-css
Tailwind CSS v4 patterns: CSS-first config, utility classes, component variants, v3 migration. Use when styling with Tailwind, configuring @theme tokens, using tailwind-variants/CVA, migrating v3 to v4, or fixing Tailwind styles and dark mode.
feature-builder
Build complete React features with proper layered architecture including UI components, business logic, API integration, and state management. Use this skill when users request implementing features like "user authentication", "shopping cart", "product listing", "file upload", or any complete functionality that requires UI + business logic + data fetching. Generates all layers - presentation (components), business logic (hooks/stores/validation), and data access (API calls/React Query). Integrates with react-component-generator for UI and provides production-ready, maintainable code following best practices.
react-component-generator
Generate React components following best practices with TypeScript, Tailwind CSS, and Zustand state management. Use this skill when the user requests creating React components, UI elements, or mentions component generation. Supports common component patterns including basic components, forms, lists, cards, buttons, modals, and stateful components with Zustand integration.
ui-analyzer
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
baseline-ui
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
design-to-code
Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.
emergency-card
生成紧急情况下快速访问的医疗信息摘要卡片。当用户需要旅行、就诊准备、紧急情况或询问"紧急信息"、"医疗卡片"、"急救信息"时使用此技能。提取关键信息（过敏、用药、急症、植入物），支持多格式输出（JSON、文本、二维码），用于急救或快速就医。
figma-to-tailwind
Figma MCPで取得したデザイン変数をTailwind CSS標準クラスに変換する。Figma MCPのコード生成後やデザイン実装時に自動起動。
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
genesis
太初有道，道生代码。从零搭建 React19+TailwindV4+Vite 前端、FastAPI Python 后端、Go Gin 后端、Taro 4.x 小程序。用户说"新建项目"、"初始化"、"从零开始"、"搭建项目"、"创建项目"、"生成落地页"、"生成官网"、"生成 Landing Page"、"动画提升"、"动效升级"、"新建小程序"、"创建小程序"、"Taro 项目"时触发。
migration-tracker
Context for ongoing migration from old Portfolio Buddy app. Use when: fixing bugs, adding migrated features, checking feature parity, or understanding why certain code exists. Contains list of 40 features being migrated and known issues.
portfolio-context
Auto-loaded context for Portfolio Buddy 2 development. Use for ANY task involving: React 19 development, TypeScript, portfolio analysis features, metrics calculations, trading strategy comparison, or working with the Portfolio Buddy 2 codebase. Contains tech stack, known issues, and architectural constraints.
senior-frontend
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. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
styling-with-shadcn
Build beautiful, accessible UIs with shadcn/ui components in Next.js. Use when creating forms, dialogs, tables, sidebars, or any UI components. Covers installation, component patterns, react-hook-form + Zod validation, and dark mode setup. NOT when building non-React applications or using different component libraries.
tailwind-css
Use when styling UI components or layouts with Tailwind CSS - mobile-first design, responsive utilities, custom themes, or component styling. NOT when plain CSS, CSS-in-JS (styled-components), or non-Tailwind frameworks are involved. Triggers: "style component", "responsive design", "mobile-first", "dark theme", "tailwind classes", "dashboard grid".
ui-style-guide
Frontend coding standards, component patterns, and design system for the Guessimate Angular UI. Reference when writing or reviewing frontend code.
web-styling
Styling patterns for React web applications. Use when working with Tailwind CSS, CSS Modules, theming, responsive design, or component styling.
setup-stack
Scaffold the Next.js + TypeScript + Tailwind + shadcn + Supabase + Stripe project. Presents exact commands and config for approval BEFORE running anything. Writes .env.example with required keys.
gaia
GAIA workflow router. Dispatches to the user-invoked GAIA workflows - plan (task orchestration), spec (Socratic SPEC artifact), handoff (session handoff doc), pickup (resume from handoff), audit (knowledge audit), forensics (bug report bridge), wiki (sync/consolidate/lint chain), fitness (Claude-integration health check + auto-heal). Trigger on `/gaia <subcommand>` or natural-language asks like "kick off a plan", "write a handoff", "pick up where we left off", "audit the knowledge stores", "sync the wiki", "check my Claude integration", "run a fitness check".
react-code
Patterns and conventions for writing and editing React code, including components and hooks. Use this skill whenever writing or reviewing React components, hooks (useEffect, useCallback, useState), event handlers, or component extraction decisions. Also trigger when debugging stale closures, infinite re-renders, or unnecessary re-renders caused by memoization issues.
release-notes
Maintainer-only. Translate a version's GAIA CHANGELOG entries into plain-language public release notes for the marketing site (gaiareact.com). Writes a release-data `.ts` file under `../website/src/pages/changelog/releases/` plus an editorial-decisions report for human review. Use whenever the maintainer wants the adopter-facing notes for a version, e.g. "write release notes", "generate the changelog page entry", "translate the CHANGELOG for the website", "what's new on the site for v1.5.0", "public notes for 1.4.0", or right after cutting a release, and for one-time backfill of historical `## [x.y.z]` blocks. This is the website-notes step only. It does NOT edit `CHANGELOG.md`, it is not how you cut a release (version bump, manifest, and tag are `/gaia-release`), and it is not for an adopter's own app's release notes.
tdd
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
update-deps
Autonomous Dependabot, auto-discover outdated packages, audit overrides, apply migrations for major bumps, resolve conflicts, run quality gate. Trigger when the user clicks the statusline `Run /update-deps` indicator or asks "update dependencies", "bump deps", "run dependabot".
update-gaia
Pull the latest GAIA release into this project without clobbering customizations. Three-way merge per file using .gaia/manifest.json classes. Trigger when the user clicks the statusline `Run /update-gaia` indicator or asks "update GAIA", "pull the latest GAIA", "apply the new GAIA release".
backend-db-performance
Optimize database queries, schemas, and performance. Use when fixing slow queries, adding indexes, N+1 problems, schema design, RLS policies, or when user mentions "slow query", "database performance", "timeout", "index", "query optimization", "Prisma", "Supabase", or "PostgreSQL".
backend-error-handling
Implement solid error handling patterns. Use when adding error handling, improving error UX, debugging error flows, standardizing error responses, or when user mentions "error boundary", "try/catch", "error state", "toast notification", "form validation error", or "API error handling".
backend-observability
Instrument features so errors, traces, and logs are correlated from the first line. Use when adding logging, tracing, or monitoring; wiring Sentry, Langfuse, or structured logs; or when asked "add logging", "instrument this", "why can't I debug prod", "correlate the error to the trace", "redact PII from logs", "set up alerts/SLOs".
backend-patterns
Design solid backend architectures with modern patterns. Use when user wants "API design", "database schema", "authentication", "caching", "queues", "background jobs", "microservices", "serverless", or "backend architecture".
backend-realtime
Implement real-time features using WebSockets, Supabase Realtime, Server-Sent Events, and live data. Use when user wants "real-time", "live updates", "WebSocket", "notifications", "chat", "collaborative", "presence", "live data", or "instant sync".
canvas
A Cursor Canvas is a live React app the user opens beside the chat. MUST use a canvas for standalone analytical artifacts — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Prefer canvas for MCP tool results (Datadog, Databricks, Linear, Sentry, Slack) over markdown tables or code blocks. MUST also read this skill when creating, editing, or debugging any .canvas.tsx file.
create-subagent
Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.
data-pipeline
Wire ETL, ingestion, cron, edge-function, and queue jobs correctly. Use for "build a pipeline", "sync X into Y", "nightly aggregation", "cron double-counts", "dedupe", "backfill", "the numbers are wrong after a retry". Bakes in idempotency, atomic writes, data contracts, dead-letter, and observability.
data-visualization
Create interactive charts, graphs, and data visualizations. Use when user wants "chart", "graph", "visualization", "dashboard", "analytics", "D3", "Recharts", "data display", "metrics", or "statistics".
debug-error
Systematic debugging workflow for errors and bugs. Use when debugging errors, investigating bugs, troubleshooting issues, or when something isn't working as expected. Integrates Sentry MCP for production error context, Firecrawl for researching fix patterns, and Sequential Thinking for complex multi-step diagnosis.
debug-fe-be-integration
Debug frontend-backend integration issues for any project by analyzing backend logs, identifying incorrect API calls, and fixing both sides. Auto-detects FE/BE frameworks, API style (REST/GraphQL/tRPC), and validation library. Uses Sentry MCP for production error context, Firecrawl for debugging pattern research, and Supabase MCP for data verification. Replaces hardcoded paths with auto-detected patterns. Use when diagnosing API errors, mismatched requests, integration issues between frontend and backend, or when the user mentions API 4xx/5xx errors, validation failures, or FE-BE contract mismatches.
debug-sentry-monitor
Monitor, triage, fix, and proactively enhance Sentry error monitoring for any project. Use when asked to: check Sentry, fix Sentry errors, triage Sentry issues, run post-deploy monitoring, review production errors, clean up Sentry noise, audit Sentry setup, improve monitoring coverage, enhance error tracking, or "run sentry check". Works with any GitHub repo — auto-detects org, project, framework, and config. Fetches issues via Sentry MCP, triages them, performs root cause analysis, fixes code bugs, updates noise filters, audits the monitoring architecture, and resolves issues only after verified fixes.
deploy-npm
Release a Changesets + GitHub Actions + npm OIDC (trusted publisher) monorepo end-to-end. Use when asked to "release", "publish to npm", "ship a new version", "cut a release", "update the changelog and publish", or any package name + release verb.
deploy-verify
Post-deploy smoke test combining all 5 MCPs (Sentry + Supabase + Langfuse CLI + Playwright + Firecrawl) into one workflow. Auto-detects deployment context, checks Sentry for new errors (with Seer AI root-cause on P0s), verifies Supabase migration health and logs, confirms Langfuse trace pipeline, runs Playwright smoke test on critical paths, and produces a ship-or-rollback verdict. Works with any project. Use when asked to: "verify deploy", "post-deploy check", "smoke test production", "check if deploy is healthy", "ship or rollback", "post-release check", "verify release", "deploy health check", or "run post-deploy".
design-api
Design RESTful and GraphQL APIs following best practices. Use when designing APIs, creating endpoints, structuring responses, or planning API architecture.
design-canvas
Create museum-quality visual art in .png and .pdf formats using design philosophy. Use when user asks for poster, visual design, infographic, certificate, badge, banner, social media graphic, print design, or mentions "create artwork", "design graphic", "visual identity", or "print material".
design-email
Design and implement transactional and marketing email templates. Detects email framework (React Email, MJML, or plain HTML), mail provider (Resend, SendGrid, Postmark, AWS SES, Nodemailer), and delivery setup (SPF/DKIM/DMARC). Builds mobile-first templates with dark mode support, 600px max-width, inline styles for client compatibility, and accessible alt text. Reviews copy for natural, conversational tone — no jargon, no passive voice, no corporate formality. Checks deliverability config. Tests rendering across major email clients. Generic across any stack. Use when asked to "build an email template", "transactional email", "welcome email", "password reset email", "email design", "React Email", "MJML", "dark mode email", "deliverability", "SPF DKIM", "email copy review", or "why is my email in spam".
design-frontend
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, or beautifying UI. Avoids generic AI aesthetics.
design-generative-art
Create algorithmic art using p5.js, Canvas API, or SVG with seeded randomness and interactive parameters. Use when user requests generative art, procedural art, flow fields, particle systems, creative coding, noise patterns, mathematical visualizations, or asks for "art from code", "generate visuals", or "interactive animation".
design-mobile-first
Design design-mobile-first responsive interfaces with touch optimization. Use when user mentions "mobile", "responsive", "touch", "PWA", "design-mobile-first", "small screen", "tablet", "swipe", or "gesture".
design-motion
Create delightful animations and micro-interactions using Framer Motion, CSS animations, and GSAP. Use when user mentions "animation", "transition", "micro-interaction", "motion", "animate", "hover effect", "scroll animation", "page transition", or "make it interactive".
design-prd
Generate Product Requirements Documents through structured conversation for any project. Auto-detects tech stack, existing features, and data model from the codebase. Uses Firecrawl to research competitor products and UX patterns, Context7 to check framework capabilities for feasibility, and Supabase MCP to verify data model feasibility. Produces actionable PRDs with technical feasibility sections informed by real codebase analysis. Use when starting a new feature, documenting requirements, creating specs before implementation, or needing clarity on scope and success criteria.
design-system
Build and maintain cohesive design systems and component libraries. Use when creating component libraries, design tokens, theming systems, or when user mentions "design system", "component library", "tokens", "variants", "consistent styling", or "reusable components".
design-theme
Apply cohesive visual themes to artifacts (slides, docs, landing pages). Provides 11 pre-set themes with colors/fonts. Use when user mentions "apply theme", "color palette", "brand colors", "styling slides", "presentation design", "visual identity", or wants consistent styling across artifacts.
docs-writer
Write clear, helpful documentation including READMEs, API docs, and code comments. Use when writing documentation, creating READMEs, documenting APIs, or when the user needs help with docs.
enhance-capacitor-ui
Cross-surface UIUX separation skill for hybrid web apps that ship as PWA + iOS + Android via Capacitor (or Tauri / Expo Web / Ionic / RN-Web). Use when a previous UI/UX sweep "improved one surface and broke the other" — desktop polished but mobile cramped, or mobile native but desktop wastes space. Also use when the project has ad-hoc useIsMobile / isNative branches scattered across components, a single md: breakpoint doing double duty as "is desktop" and "wider slot", or per-component platform styling instead of mode tokens. Establishes three orthogonal axes — form factor (compact/medium/expanded), platform (web/ios/android), pointer (fine/coarse) — and a three-layer architecture (context hook, mode tokens, container-query primitives) so one sweep can enhance one axis without degrading the others. Catches axis conflation in a single boolean, hover-only affordances on native shells, and SSR/Capacitor first-paint mismatch. For pure visual polish on a single surface, use enhance-web-ui first.
enhance-pwa
Add or upgrade PWA features to any web app: service worker, offline mode, install prompt, push notifications, and background sync. Detects existing manifest and service worker setup. Installs and configures the right tooling for the framework (Vite PWA plugin, next-pwa, Workbox). Runs a Playwright Lighthouse audit to measure the PWA score before and after. Compatible with Capacitor hybrid apps — bridges PWA web layer with native shell without conflicts. Generic across any web framework. Use when asked to "make it a PWA", "offline support", "install prompt", "push notifications", "service worker", "add to home screen", "background sync", "Lighthouse PWA score", "app-like experience", "installable", or "works offline".
enhance-readme
Turn a plain-text README into a visually rich showcase with a theme-aware hero image, a feature tour grid, an optional animated guided-tour GIF, and updated tech badges. Captures live screenshots via Playwright MCP in both dark and light mode at hero-quality 1600x1000, pairs them with `<picture>` for auto theme-swap, and inlines them into the README using GitHub-supported HTML. Optionally records a guided-tour `.gif` (autoplays inline on github.com via `record-readme-tour.mjs`) for an animated demo above the static screenshots. Works with any web app that has a live URL or local dev server. Use when asked to "enhance README", "make README prettier", "add screenshots to README", "showcase the app in README", "design the README", "add hero image", "spice up README", "make README more fun", "add animated demo to README", "record a tour GIF", or "make a README GIF".
enhance-web-landing
Build landing pages, portfolios, and marketing sites that don't look AI-generated. Use when asked for "landing page", "portfolio", "marketing site", "anti-slop", "Awwwards-style", "premium frontend", or when design needs a strong point of view.
enhance-web-redesign
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Use when redesigning existing projects, upgrading UI to premium quality, removing AI slop patterns, or when the user asks for a redesign audit. Works with any CSS framework or vanilla CSS.
enhance-web-ui
Artistic, research-grounded UI enhancement skill for making an existing page feel intentional, spacious, and human-crafted. Use when the user asks to make a page nicer, more polished, more premium, more editorial, less crowded, less AI-generated, better laid out or balanced, or mentions typography, visual hierarchy, spacing, empty/dead space, motion, hover states, cards, grids, or density — especially vague-but-visceral feedback ("clunky", "heavy", "incoherent", "wasted space", "feels AI-generated", "monochromatic", "everything stacked left"). Catches hard-to-spot failures: active-state mass mismatch, chrome tautology, card-on-card layering, brand-color competition, full-cell wash where a micro-indicator belongs, wrapper-collapsed tiles, conditional slots reserving space for absent content, and the same datum repeated 3× in one fold. General across web repos. Focuses on content choreography, hierarchy, spacing, and motion; for task-flow usability/data correctness use enhance-web-ux first or alongside it.
migrate-to-skills
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use when the user wants to migrate rules or commands to skills, convert .mdc rules to SKILL.md format, or consolidate commands into the skills directory.
update-cli-config
View and modify Cursor CLI configuration in ~/.cursor/cli-config.json. Use to change CLI settings, configure permissions, switch approval mode, enable vim mode, toggle display options, configure sandbox, or manage any CLI preferences.
gws-admin-reports
This skill should be used when the user says "show audit logs", "pull admin reports", "list user activity", "check login history", "get usage stats for my org", "show drive activity logs", or wants to access Google Workspace Admin SDK reports. Covers activity logs, customer usage reports, entity usage, and user usage reports.
gws-calendar
This skill should be used when the user says "manage my calendar", "list my calendars", "update calendar settings", "share a calendar", "delete a calendar", "check free/busy time", or wants to broadly manage Google Calendar. Covers calendars, events, ACL rules, free/busy queries, and settings.
gws-chat
This skill should be used when the user says "manage Chat spaces", "list my Chat rooms", "create a Chat space", "delete a Chat space", "set up a group chat", "find a direct message", or wants to broadly manage Google Chat. Covers spaces, memberships, messages, custom emojis, and media uploads.
gws-classroom
This skill should be used when the user says "manage my classroom", "create a course", "list my classes", "add a student to a course", "assign coursework", "invite a teacher", or wants to manage Google Classroom. Covers courses, enrollments, coursework, announcements, topics, and guardian invitations.
gws-drive
This skill should be used when the user says "manage my Drive files", "search Google Drive", "list files in a folder", "share a file", "create a shared drive", "download a file from Drive", or wants to broadly manage Google Drive. Covers files, folders, permissions, comments, shared drives, and revisions.
gws-events
This skill should be used when the user says "subscribe to Workspace events", "set up event notifications", "watch for Workspace changes", "manage event subscriptions", "list active subscriptions", or wants to broadly manage Google Workspace Events subscriptions. Covers creating, listing, updating, and reactivating subscriptions.
gws-gmail-forward
This skill should be used when the user says "forward this email", "forward to someone", "pass this email along", "send this message to", "forward with a note", or wants to forward a specific Gmail message to new recipients. Covers adding a note, CC/BCC, attachments, and HTML content.
gws-gmail-reply
This skill should be used when the user says "reply to this email", "send a reply", "respond to that message", "write back to sender", "reply to the sender only", or wants to send a threaded reply to a single Gmail message. Covers in-reply-to threading, attachments, CC/BCC, and HTML replies.
gws-gmail-reply-all
This skill should be used when the user says "reply all to this email", "respond to everyone", "reply to the whole thread", "send to all recipients", "reply all with note", or wants to reply to a Gmail message including all original To/CC recipients. Covers recipient exclusions, extra CC/BCC, attachments, and HTML content.
gws-gmail-send
This skill should be used when the user says "send an email", "email someone", "compose a message", "write an email to", "send a Gmail", "draft and send", or wants to send a new outbound email through Gmail. Covers recipients, subject, body, CC/BCC, attachments, HTML content, and send-as aliases.
gws-people
This skill should be used when the user says "manage my contacts", "look up a contact", "add a new contact", "search my address book", "list contact groups", "update someone's contact info", or wants to manage Google People/Contacts. Covers personal contacts, contact groups, directory search, and profile photos.
gws-shared
This skill should be used when the CLI needs to authenticate with Google Workspace, apply global flags like --format or --dry-run, or follow security rules before any gws command. Not a user-facing service — this is the shared reference for gws CLI auth patterns, output formatting, shell escaping tips, and write-command safety rules used by all other gws-* skills.
gws-sheets
This skill should be used when the user says "work with a spreadsheet", "create a Google Sheet", "update a spreadsheet", "batch update cells", "manage sheet data", "get spreadsheet metadata", or wants to broadly manage Google Sheets. Covers creating spreadsheets, reading and writing values, and batch updates.
kubebolt-copilot
AI copilot skill for KubeBolt — the Kubernetes monitoring platform. This skill provides deep knowledge about Kubernetes clusters, workloads, networking, storage, RBAC, and troubleshooting, combined with real-time awareness of the user's connected cluster data via KubeBolt's REST API. Use this skill whenever the user asks questions about their Kubernetes cluster, wants to troubleshoot pods, deployments, services, nodes, or any K8s resource, asks about cluster health or insights, wants to understand topology or relationships between resources, needs help interpreting metrics (CPU, memory), asks about Gateway API, Ingresses, RBAC, storage, or any Kubernetes concept in the context of their monitored cluster. Also trigger when the user says things like "what's wrong with my cluster", "why is this pod crashing", "show me resource usage", "explain this insight", or any Kubernetes troubleshooting question. This skill powers the KubeBolt in-app chatbot.
new-hook
Scaffold a new custom React hook with a Vitest test file. Use this skill whenever the user asks to "create a hook", "make a useFoo hook", "scaffold a custom React hook", "add a hook under app/hooks", or describes a piece of reusable React state/effect logic that warrants extraction into a named `use*` hook.
content-asset-creator
Creates beautiful, branded HTML content assets — industry reports, landing pages, comparison sheets, one-pagers — from structured data. Uses Gamma API (preferred), v0.dev Platform API, or a self-hosted HTML template system with Tailwind CSS. Outputs self-contained HTML files that can be hosted as web pages or converted to PDF.
directory-structure
Generate a professional ASCII directory structure in Markdown. Use this before modifying a project to understand its layout, identify key files, visualize or document the file structure of a directory, project or codebase.
openevolve-evolutionary-coding
OpenEvolve framework for autonomous code optimization using LLM-driven evolutionary algorithms. Use when working with evolutionary coding, MAP-Elites, code optimization, or creating self-improving programs.
zram-optimizer
A-to-Z zram swap optimization skill. Install zram-config from GitHub, benchmark compression algorithms and kernel parameters with a deterministic evaluator, and deploy the optimal 'raw-RAM-like' high-speed swap configuration for any Linux system. Use when setting up swap, optimizing memory, tuning zram, or replacing disk-based swap.
design-expert
UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs.
frontend-developer
Frontend Developer (/fe, alias: Finn, /finn) - Senior Frontend Developer with 10+ years web and mobile experience. Covers React/Next.js (default), Angular, Vue/Nuxt, Flutter/Dart, and JavaFX desktop - detects the project's framework and loads the matching stack reference. Use when implementing UI components, state management, data fetching, styling, forms, or any web/cross-platform frontend feature in any of these stacks.
design-code
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. Use when the user wants working UI code for a component or screen in a specific stack.
design-component
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
image-to-code
Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.
gws-admin-reports
This skill should be used when the user says "show audit logs", "pull admin reports", "list user activity", "check login history", "get usage stats for my org", "show drive activity logs", or wants to access Google Workspace Admin SDK reports. Covers activity logs, customer usage reports, entity usage, and user usage reports.
gws-calendar
This skill should be used when the user says "manage my calendar", "list my calendars", "update calendar settings", "share a calendar", "delete a calendar", "check free/busy time", or wants to broadly manage Google Calendar. Covers calendars, events, ACL rules, free/busy queries, and settings.
gws-chat
This skill should be used when the user says "manage Chat spaces", "list my Chat rooms", "create a Chat space", "delete a Chat space", "set up a group chat", "find a direct message", or wants to broadly manage Google Chat. Covers spaces, memberships, messages, custom emojis, and media uploads.
gws-classroom
This skill should be used when the user says "manage my classroom", "create a course", "list my classes", "add a student to a course", "assign coursework", "invite a teacher", or wants to manage Google Classroom. Covers courses, enrollments, coursework, announcements, topics, and guardian invitations.
gws-drive
This skill should be used when the user says "manage my Drive files", "search Google Drive", "list files in a folder", "share a file", "create a shared drive", "download a file from Drive", or wants to broadly manage Google Drive. Covers files, folders, permissions, comments, shared drives, and revisions.
gws-events
This skill should be used when the user says "subscribe to Workspace events", "set up event notifications", "watch for Workspace changes", "manage event subscriptions", "list active subscriptions", or wants to broadly manage Google Workspace Events subscriptions. Covers creating, listing, updating, and reactivating subscriptions.
gws-gmail-forward
This skill should be used when the user says "forward this email", "forward to someone", "pass this email along", "send this message to", "forward with a note", or wants to forward a specific Gmail message to new recipients. Covers adding a note, CC/BCC, attachments, and HTML content.
gws-gmail-reply
This skill should be used when the user says "reply to this email", "send a reply", "respond to that message", "write back to sender", "reply to the sender only", or wants to send a threaded reply to a single Gmail message. Covers in-reply-to threading, attachments, CC/BCC, and HTML replies.
gws-gmail-reply-all
This skill should be used when the user says "reply all to this email", "respond to everyone", "reply to the whole thread", "send to all recipients", "reply all with note", or wants to reply to a Gmail message including all original To/CC recipients. Covers recipient exclusions, extra CC/BCC, attachments, and HTML content.
gws-gmail-send
This skill should be used when the user says "send an email", "email someone", "compose a message", "write an email to", "send a Gmail", "draft and send", or wants to send a new outbound email through Gmail. Covers recipients, subject, body, CC/BCC, attachments, HTML content, and send-as aliases.
gws-people
This skill should be used when the user says "manage my contacts", "look up a contact", "add a new contact", "search my address book", "list contact groups", "update someone's contact info", or wants to manage Google People/Contacts. Covers personal contacts, contact groups, directory search, and profile photos.
gws-shared
This skill should be used when the CLI needs to authenticate with Google Workspace, apply global flags like --format or --dry-run, or follow security rules before any gws command. Not a user-facing service — this is the shared reference for gws CLI auth patterns, output formatting, shell escaping tips, and write-command safety rules used by all other gws-* skills.
gws-sheets
This skill should be used when the user says "work with a spreadsheet", "create a Google Sheet", "update a spreadsheet", "batch update cells", "manage sheet data", "get spreadsheet metadata", or wants to broadly manage Google Sheets. Covers creating spreadsheets, reading and writing values, and batch updates.
frontend-design
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
frontend-design
Visual design systems, UI/UX styling, Tailwind CSS, CSS variables, component libraries (shadcn/ui, Radix UI), design tokens, accessibility (WCAG), responsive layout, dark mode, and Figma-to-code workflows. NOT for React component logic, hooks, or state management (use react-development). NOT for Next.js routing, SSR, or server components (use nextjs-development).
code-to-figma
Sync React components to Figma designs. Use when: 'sync component to Figma', 'generate Figma from code', 'create design system in Figma', 'export React to Figma'. Parses React/TSX with Babel AST, resolves Tailwind classes, outputs Figma-compatible JSON for loading via Figma Desktop plugin.
shadcn
shadcn/ui component library patterns
tailwindcss
Tailwind CSS v4 utility-first styling patterns
add-event-type
Add a new event type to the frontend feed system with corresponding React component. Use when user mentions "new event", "add event type", "event block", "new block type", or wants to display new agent output types.
claude-code-guide
Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent.
coding-with-tailiwnd
Use this skill when you need to code with tailwind css
frontend-css
Write and maintain CSS using consistent methodology (Tailwind, BEM, CSS Modules), design tokens, framework patterns, and optimized production builds. Use this skill when writing or modifying CSS files, applying utility classes, styling components, creating design systems, defining color/spacing tokens, or working with CSS frameworks. Apply when working with .css, .scss, .sass files, Tailwind config, styled-components, CSS-in-JS, or any styling code that controls visual presentation, layout, typography, and design consistency across the application.
project-architecture
Overview of the project's tech stack, directory structure, and architectural patterns.
tailwind-design-system
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
ui-component-creation
Creates UI components using shadcn/ui and design system patterns
unocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
fec-tailwind-design-system
用于设计、实现或审查 Tailwind CSS 设计系统、Token 映射、主题扩展、工具类治理、组件变体、暗色模式、响应式工具、safelist 或可维护的 class 组合；中文触发词包括 Tailwind、设计 Token、组件变体、暗色模式、class 管理。
chameleon
Generate or retrofit HTML files to use the Chameleon theme contract — semantic CSS variables and Tailwind-shaped utility classes. Two modes: `generate` produces new themable HTML; `convert` retrofits existing files via dry-run color-to-role mapping. Triggers on: "make this themable", "chameleon-ify", "create a themable HTML", "apply the chameleon theme", "themable HTML artifact", "Chameleon", "html-chameleon".
preline-theme-generator
Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.
design-elevation
Comprehensive design elevation system that automatically transforms functional visual outputs into polished, professional designs. Use when creating ANY visual output including presentations (pptx), spreadsheets (xlsx), dashboards, reports, HTML artifacts, PDFs, web pages, or data visualizations. Applies systematic design thinking grounded in Tailwind CSS as the canonical design token system. Structures decisions through functional patterns (what users interact with) and perceptual patterns (how the design feels), following Alla Kholmatova's design systems framework. Triggers on ALL requests for visual content creation, ensuring outputs look hand-crafted rather than template-based.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
gws-calendar-agenda
This skill should be used when the user says "what's on my calendar", "show my schedule", "what do I have today", "show this week's events", "what's coming up", "show my agenda", or wants to view upcoming events across calendars. Covers listing today, tomorrow, this week, or N days ahead, with optional calendar filtering.
gws-calendar-insert
This skill should be used when the user says "create a calendar event", "schedule a meeting", "add an event to my calendar", "book a time slot", "set up a meeting with", "add a Google Meet to an event", or wants to create a new Google Calendar event. Covers title, start/end time, attendees, location, description, and Meet link.
gws-chat-send
This skill should be used when the user says "send a Chat message", "post to a Chat space", "message the team on Chat", "send a Google Chat notification", "post in the Chat room", or wants to send a plain-text message to a specific Google Chat space. Covers sending to a named space by ID.
gws-docs
This skill should be used when the user says "read a Google Doc", "create a document", "get the contents of a doc", "update a document", "make a new Google Doc", "batch update a doc", or wants to broadly work with Google Docs. Covers creating, reading, and batch-updating document content.
gws-docs-write
This skill should be used when the user says "append text to a doc", "add content to a Google Doc", "write to a document", "insert text at the end of a doc", "add a note to my doc", or wants to append plain text to an existing Google Doc. Covers inserting text at the end of a document body.
gws-drive-upload
This skill should be used when the user says "upload a file to Drive", "put this file in Google Drive", "save a file to Drive", "upload to a folder", "push a file to Drive", or wants to upload a local file to Google Drive. Covers automatic MIME detection, parent folder targeting, and custom filenames.
gws-events-renew
This skill should be used when the user says "renew my Workspace subscription", "reactivate an event subscription", "my subscription expired", "keep subscriptions alive", "refresh expiring subscriptions", or wants to renew or reactivate Google Workspace Events subscriptions. Covers renewing by name or batch-renewing all subscriptions expiring within a time window.
gws-events-subscribe
This skill should be used when the user says "stream Workspace events", "listen for Chat messages", "subscribe to Drive changes", "watch events from a Workspace resource", "stream events as NDJSON", or wants to create a new Workspace Events subscription and stream events in real time. Covers Pub/Sub setup, filtering by event type, and writing events to a directory.
gws-forms
This skill should be used when the user says "create a Google Form", "read form responses", "update a form", "get form submissions", "set up a survey", "publish a form", or wants to work with Google Forms. Covers creating, reading, updating forms and retrieving responses.
gws-gmail
This skill should be used when the user says "manage my Gmail", "work with email", "set up email filters", "manage labels", "check my Gmail profile", "manage email settings", or wants to broadly manage Gmail. Covers messages, threads, labels, drafts, filters, and push notification settings.
gws-gmail-read
This skill should be used when the user says "read this email", "show me the body of a message", "get the contents of an email", "what does this message say", "show headers for this email", or wants to read a specific Gmail message by ID. Covers plain text body, HTML body, and message headers.
gws-gmail-triage
This skill should be used when the user says "show my unread emails", "what's in my inbox", "summarize my email", "check my inbox", "what emails do I have", "triage my inbox", or wants a quick summary of unread Gmail messages. Covers sender, subject, date, labels, and custom search queries.
gws-gmail-watch
This skill should be used when the user says "watch for new emails", "stream incoming Gmail", "monitor my inbox for new messages", "set up a Gmail listener", "pipe incoming emails to a script", or wants to watch a Gmail mailbox and stream new messages in real time. Covers Pub/Sub integration, label filtering, and writing messages to a directory.
gws-keep
This skill should be used when the user says "create a Keep note", "add a note", "list my notes", "delete a note", "read a Google Keep note", "show my Keep notes", or wants to manage Google Keep. Covers creating, reading, listing, and deleting notes and their attachments.
gws-meet
This skill should be used when the user says "create a Meet space", "manage a meeting room", "end a Meet conference", "list past meetings", "get meeting recordings", "get meeting transcripts", or wants to manage Google Meet. Covers meeting spaces, conference records, participants, recordings, and transcripts.
gws-modelarmor
This skill should be used when the user says "filter content for safety", "set up Model Armor", "sanitize AI input", "screen prompts for harmful content", "manage safety templates", or wants to broadly work with Google Model Armor. Covers creating templates and sanitizing prompts and model responses.
gws-modelarmor-create-template
This skill should be used when the user says "create a Model Armor template", "set up a safety template", "create a jailbreak filter", "add a new content filter", "configure a Model Armor policy", or wants to create a new Google Model Armor template. Covers preset templates (jailbreak) and custom JSON-defined template configuration.
gws-modelarmor-sanitize-prompt
This skill should be used when the user says "sanitize a user prompt", "screen input for harmful content", "filter a user message before sending to AI", "run prompt through Model Armor", "check this input for safety", or wants to sanitize inbound user input through a Model Armor template. Covers text and JSON request bodies, and stdin input.
gws-modelarmor-sanitize-response
This skill should be used when the user says "sanitize a model response", "filter AI output for safety", "screen model output before showing the user", "run this response through Model Armor", "check AI output for harmful content", or wants to sanitize outbound model responses through a Model Armor template. Covers text and JSON request bodies, and stdin piping.
gws-script-push
Google Apps Script: Upload local files to an Apps Script project.
gws-sheets-append
This skill should be used when the user says "add a row to a sheet", "append data to a spreadsheet", "log data to Sheets", "insert a new row", "write values to the bottom of a sheet", or wants to append one or more rows to a Google Sheets spreadsheet. Covers single-row and multi-row bulk inserts.
gws-sheets-read
This skill should be used when the user says "read data from a sheet", "get values from a spreadsheet", "show me what's in this sheet", "pull data from a range", "read a cell range", or wants to read values from a specific range in a Google Sheets spreadsheet. Covers named ranges and A1 notation cell ranges.
gws-slides
This skill should be used when the user says "create a presentation", "read a Google Slides deck", "update a slide", "get a presentation", "add slides to a deck", "batch update a presentation", or wants to work with Google Slides. Covers creating, reading, and batch-updating presentations and individual pages/slides.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
styling-with-tailwind-shadcn
Implements the Calm Tech design system using Tailwind CSS v4 and Shadcn UI. Use when writing styles, building components, or theming. For design decisions, see designing-frontend.
create-hook
Create Cursor hooks. Use to create a hook, write hooks.json, add hook scripts, or automate behavior around agent events.
create-rule
Create Cursor rules for persistent AI guidance. Use when user wants to create a rule, add coding standards, project conventions, file-specific patterns, or mentions ".cursor/rules", "AGENTS.md", "cursor rule", "coding standard", "convention", or "AI guidance".
create-skill
Guide users through creating effective Agent Skills for Cursor. Use when user wants to create, write, update, or debug a skill, or asks about SKILL.md format, skill structure, ~/.cursor/skills/, or skill best practices.
shell
Run the rest of a /shell request as a literal shell command. Use only when the user explicitly invokes /shell and wants the following text executed directly in the terminal.
statusline
Configure a custom status line in the CLI. Use when the user mentions status line, statusline, statusLine, CLI status bar, prompt footer customization, or wants to add session context above the prompt.
update-cursor-settings
Modify Cursor/VSCode user settings in settings.json. Use when user wants to change editor settings, preferences, themes, font size, tab size, keybindings, or mentions "settings", "preferences", "theme", "font", "format on save", "auto save", or "cursor config".
plan-writing
Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.
gws-calendar-agenda
This skill should be used when the user says "what's on my calendar", "show my schedule", "what do I have today", "show this week's events", "what's coming up", "show my agenda", or wants to view upcoming events across calendars. Covers listing today, tomorrow, this week, or N days ahead, with optional calendar filtering.
gws-calendar-insert
This skill should be used when the user says "create a calendar event", "schedule a meeting", "add an event to my calendar", "book a time slot", "set up a meeting with", "add a Google Meet to an event", or wants to create a new Google Calendar event. Covers title, start/end time, attendees, location, description, and Meet link.
gws-chat-send
This skill should be used when the user says "send a Chat message", "post to a Chat space", "message the team on Chat", "send a Google Chat notification", "post in the Chat room", or wants to send a plain-text message to a specific Google Chat space. Covers sending to a named space by ID.
gws-docs
This skill should be used when the user says "read a Google Doc", "create a document", "get the contents of a doc", "update a document", "make a new Google Doc", "batch update a doc", or wants to broadly work with Google Docs. Covers creating, reading, and batch-updating document content.
gws-docs-write
This skill should be used when the user says "append text to a doc", "add content to a Google Doc", "write to a document", "insert text at the end of a doc", "add a note to my doc", or wants to append plain text to an existing Google Doc. Covers inserting text at the end of a document body.
gws-drive-upload
This skill should be used when the user says "upload a file to Drive", "put this file in Google Drive", "save a file to Drive", "upload to a folder", "push a file to Drive", or wants to upload a local file to Google Drive. Covers automatic MIME detection, parent folder targeting, and custom filenames.
gws-events-renew
This skill should be used when the user says "renew my Workspace subscription", "reactivate an event subscription", "my subscription expired", "keep subscriptions alive", "refresh expiring subscriptions", or wants to renew or reactivate Google Workspace Events subscriptions. Covers renewing by name or batch-renewing all subscriptions expiring within a time window.
gws-events-subscribe
This skill should be used when the user says "stream Workspace events", "listen for Chat messages", "subscribe to Drive changes", "watch events from a Workspace resource", "stream events as NDJSON", or wants to create a new Workspace Events subscription and stream events in real time. Covers Pub/Sub setup, filtering by event type, and writing events to a directory.
gws-forms
This skill should be used when the user says "create a Google Form", "read form responses", "update a form", "get form submissions", "set up a survey", "publish a form", or wants to work with Google Forms. Covers creating, reading, updating forms and retrieving responses.
gws-gmail
This skill should be used when the user says "manage my Gmail", "work with email", "set up email filters", "manage labels", "check my Gmail profile", "manage email settings", or wants to broadly manage Gmail. Covers messages, threads, labels, drafts, filters, and push notification settings.
gws-gmail-read
This skill should be used when the user says "read this email", "show me the body of a message", "get the contents of an email", "what does this message say", "show headers for this email", or wants to read a specific Gmail message by ID. Covers plain text body, HTML body, and message headers.
gws-gmail-triage
This skill should be used when the user says "show my unread emails", "what's in my inbox", "summarize my email", "check my inbox", "what emails do I have", "triage my inbox", or wants a quick summary of unread Gmail messages. Covers sender, subject, date, labels, and custom search queries.
gws-gmail-watch
This skill should be used when the user says "watch for new emails", "stream incoming Gmail", "monitor my inbox for new messages", "set up a Gmail listener", "pipe incoming emails to a script", or wants to watch a Gmail mailbox and stream new messages in real time. Covers Pub/Sub integration, label filtering, and writing messages to a directory.
gws-keep
This skill should be used when the user says "create a Keep note", "add a note", "list my notes", "delete a note", "read a Google Keep note", "show my Keep notes", or wants to manage Google Keep. Covers creating, reading, listing, and deleting notes and their attachments.
gws-meet
This skill should be used when the user says "create a Meet space", "manage a meeting room", "end a Meet conference", "list past meetings", "get meeting recordings", "get meeting transcripts", or wants to manage Google Meet. Covers meeting spaces, conference records, participants, recordings, and transcripts.
gws-modelarmor
This skill should be used when the user says "filter content for safety", "set up Model Armor", "sanitize AI input", "screen prompts for harmful content", "manage safety templates", or wants to broadly work with Google Model Armor. Covers creating templates and sanitizing prompts and model responses.
gws-modelarmor-create-template
This skill should be used when the user says "create a Model Armor template", "set up a safety template", "create a jailbreak filter", "add a new content filter", "configure a Model Armor policy", or wants to create a new Google Model Armor template. Covers preset templates (jailbreak) and custom JSON-defined template configuration.
gws-modelarmor-sanitize-prompt
This skill should be used when the user says "sanitize a user prompt", "screen input for harmful content", "filter a user message before sending to AI", "run prompt through Model Armor", "check this input for safety", or wants to sanitize inbound user input through a Model Armor template. Covers text and JSON request bodies, and stdin input.
gws-modelarmor-sanitize-response
This skill should be used when the user says "sanitize a model response", "filter AI output for safety", "screen model output before showing the user", "run this response through Model Armor", "check AI output for harmful content", or wants to sanitize outbound model responses through a Model Armor template. Covers text and JSON request bodies, and stdin piping.
gws-script-push
Google Apps Script: Upload local files to an Apps Script project.
gws-sheets-append
This skill should be used when the user says "add a row to a sheet", "append data to a spreadsheet", "log data to Sheets", "insert a new row", "write values to the bottom of a sheet", or wants to append one or more rows to a Google Sheets spreadsheet. Covers single-row and multi-row bulk inserts.
gws-sheets-read
This skill should be used when the user says "read data from a sheet", "get values from a spreadsheet", "show me what's in this sheet", "pull data from a range", "read a cell range", or wants to read values from a specific range in a Google Sheets spreadsheet. Covers named ranges and A1 notation cell ranges.
gws-slides
This skill should be used when the user says "create a presentation", "read a Google Slides deck", "update a slide", "get a presentation", "add slides to a deck", "batch update a presentation", or wants to work with Google Slides. Covers creating, reading, and batch-updating presentations and individual pages/slides.
mockgen-shadcn
Generate React + shadcn/ui mockup screens from PRD.md files for UI/UX human designer review. Creates a Vite + React 19 + TypeScript + shadcn/ui mockup application with admin dashboard layout (collapsible sidebar navigation, header with logo/notifications/locale/user menu, footer with copyright/version) using React Router v7 for client-side navigation, organized by user role in a mockup/ folder. Input: application name (mandatory), version (mandatory), module (optional). Output: mockup/ folder in the application's context folder containing MOCKUP.html index page, Vite + React project files, layout components, shadcn/ui components, and role-specific page components. Trigger on keywords: "generate mockup shadcn", "generate shadcn mockup", "create shadcn mockup screens", "shadcn UI mockup", "React mockup from user stories", "mockup from PRD.md shadcn", "generate shadcn screens", "create shadcn UI screens". Accepts application name and version as input (e.g., `/mockgen-shadcn hub_middleware v1.0.3`). Optionally ac
mockgen-tailwind
Generate HTML mockup screens from PRD.md files for UI/UX human designer review. Creates a Node.js + Alpine.js + HTMX mockup server with admin dashboard layout (left sidebar navigation, header with logo/notifications/locale/user menu, footer with copyright/version) served as partials, organized by user role in a mockup/ folder. Input: application name (mandatory), version (mandatory), module (optional). Output: mockup/ folder in the application's context folder containing MOCKUP.html index page, server.js, package.json, partials/, and role-specific content subfolders. Trigger on keywords: "generate mockup", "generate mockups", "create mockup screens", "HTML mockup", "UI mockup from user stories", "mockup from PRD.md", "generate screens", "create UI screens". Accepts application name and version as input (e.g., `/mockgen-tailwind hub_middleware v1.0.3`). Optionally accepts a module name to limit generation to screens for that module only (e.g., `/mockgen-tailwind hub_middleware v1.0.3 module:Location Informatio
specgen-laravel-eloquent-bladehtmx
Generate a detailed specification document for building a monolith Laravel 12 web application with server-rendered views (Blade), Tailwind CSS, Alpine.js, htmx, and nwidart/laravel-modules modular packaging. Database (MongoDB, PostgreSQL, MySQL, or none), authentication (Keycloak OAuth2 Client, Laravel Breeze form login, or none), scheduling (Laravel Task Scheduling + Queue Batching or none), messaging (RabbitMQ pub/sub or none), and internationalisation (multi-locale via Laravel's native translation system, or none) are configurable based on user input. Standardized input: application name (mandatory), version (mandatory), module (optional). Use this skill whenever the user asks to create a spec, specification, blueprint, or technical design document for a new Laravel web application with server-side rendering. Also trigger when the user says things like "spec out a new Laravel project", "design a Laravel web skeleton", "write a technical spec for my new Laravel app", "scaffold spec for a monolith Laravel ap
specgen-react-tailwind
Generate a detailed specification document for building a React SPA (Single Page Application) using React 19, TypeScript 5, Vite 6, Tailwind CSS v3, Headless UI v2, Heroicons, React Router v7, TanStack Query v5, Zustand v5, React Hook Form v7, and Zod v3. Components are built utility-first with Tailwind and made accessible with Headless UI primitives (no component framework like MUI). Authentication (Keycloak OAuth2/OIDC PKCE, generic OIDC, or none), API integration (REST via Axios), and optional features (WebSocket, i18n, TanStack Table data grids, Recharts charts, react-day-picker date pickers, Tiptap rich text) are configurable based on user input. Standardized input: application name (mandatory), version (mandatory), module (optional). Use this skill whenever the user asks to create a spec, specification, blueprint, or technical design document for a new React SPA or frontend application styled with Tailwind CSS. Also trigger when the user says things like "spec out a new React Tailwind project", "design
specgen-spring-jpa-jtehtmx
Generate a detailed specification document for building a monolith Spring Boot 3 web application with server-rendered views (JTE), Tailwind CSS, Alpine.js, htmx, and Spring Modulith packaging. Database (MongoDB, PostgreSQL, MySQL, or none), authentication (Keycloak OAuth2 Client, Spring Security form login, or none), scheduling (Quartz + Spring Batch or none), messaging (RabbitMQ pub/sub or none), and internationalisation (multi-locale via Spring's native MessageSource, or none) are configurable based on user input. Standardized input: application name (mandatory), version (mandatory), module (optional). Use this skill whenever the user asks to create a spec, specification, blueprint, or technical design document for a new Spring Boot web application with server-side rendering. Also trigger when the user says things like "spec out a new web project", "design a Spring Boot web skeleton", "write a technical spec for my new web app", "scaffold spec for a monolith web app", or any request for a specification docu
shadcn-svelte-sync
Sync upstream shadcn-svelte components and adapt Remini Labs wrappers. Invoke when the user says "sync shadcn-svelte", "update shadcn from upstream", "refresh shadcn components", or types /shadcn-svelte-sync.
tailwind
Enforce Tailwind CSS v4 utility-first conventions. Use when editing .vue/.astro/.html/.tsx/.jsx/.css or when the user mentions Tailwind, utility class, styling a UI element, layout, spacing, or dark mode, or wants to replace raw/scoped CSS. Forbids <style> blocks and deprecated v4 utilities; forces oklch() colors and v4 syntax. Do NOT use without Tailwind v4, on backend code, or for non-styling refactors.
astro-accessibility
This skill should be used when implementing accessibility in Astro, WCAG compliance in Astro, Astro ARIA patterns, keyboard navigation in Astro components, screen reader support in Astro, Astro semantic HTML, focus management in Astro, accessible forms in Astro, Astro accessibility testing, axe-core integration with Astro, accessible Astro islands, alt text for Astro images, focus trapping in modals, accessible view transitions, or color contrast requirements.
astro-best-practices
This skill should be used when working on any Astro project or when the user asks about Astro best practices, conventions, or patterns. Trigger when: working on an Astro project, creating Astro components/pages/layouts, configuring astro.config, setting up Content Collections, using Content Layer API, choosing client directives (client:load/idle/visible/media/only), using server:defer or server islands, deciding between SSR and SSG, working with Astro Actions for forms, configuring middleware, using Zod schemas for content, building with TypeScript in Astro, creating API endpoints, using @astro/autoload, working with .astro files, Astro 5 or Astro 6 development.
astro-performance
This skill should be used when optimizing Astro performance, improving Core Web Vitals in Astro, fixing LCP/CLS/INP issues, auditing client directives, reducing JavaScript bundle size, configuring Astro prefetching, using server:defer for performance, optimizing Astro images, configuring Astro fonts, CSS optimization in Astro, HTML streaming, Astro build optimization, Astro CDN configuration, Route Caching API, Lighthouse audit for Astro, hydration performance, client:visible vs client:load, or Astro asset pipeline.
astro-security
This skill should be used when implementing Astro security, configuring Content Security Policy in Astro, preventing XSS in Astro, using set:html safely, handling secrets in Astro, configuring astro:env, Astro authentication patterns, Astro Session API, CSRF protection in Astro, configuring security.checkOrigin, Astro cookie security, middleware security patterns, Astro CORS configuration, protecting API endpoints, security.allowedDomains, environment variable security in Astro, import.meta.env secret leakage
astro-troubleshooting
This skill should be used when debugging Astro issues, identifying Astro anti-patterns, fixing common Astro mistakes, troubleshooting Astro errors, resolving "document is not defined" in Astro, resolving "window is not defined" in Astro, diagnosing a component not interactive, fixing content validation errors, investigating why an Astro build fails, debugging hydration issues, solving Astro 5 migration problems, fixing slug vs id errors, resolving render method not found, diagnosing Astro performance problems, reducing too much JavaScript in Astro, fixing Astro routing errors, or addressing form resubmission warnings.
fastify-best-practices
This skill should be used when working on any Fastify project or when the user asks about Fastify best practices, conventions, or patterns. Trigger when: working on a Fastify project, creating Fastify plugins, registering routes, using decorators, organizing Fastify application structure, using @fastify/autoload, creating encapsulated contexts, working with fastify-plugin, building Fastify APIs, configuring Fastify server options, using the register API, understanding Fastify encapsulation, project scaffolding with fastify-cli
fastify-hooks-lifecycle
This skill should be used when implementing Fastify hooks, understanding hook execution order, using onRequest/preParsing/preValidation/preHandler/preSerialization/onError/onSend/onResponse hooks, using onReady/onListen/onClose/onRoute/onRegister application hooks, debugging hook chain issues, adding authentication hooks, implementing request lifecycle interceptors, working with Fastify lifecycle events, or understanding when request.body is available.
fastify-logging
This skill should be used when configuring Fastify logging, setting up Pino logger, using child loggers, implementing log redaction, configuring log transports, using pino-pretty for development, async logging with sonic-boom, structured JSON logging, request correlation IDs, log levels, configuring pino.final for crash handling, multi-target log transports, or Fastify observability.
fastify-production
This skill should be used when deploying Fastify to production, configuring Fastify security headers, setting up reverse proxy with Fastify, implementing graceful shutdown, configuring @fastify/helmet, @fastify/cors, @fastify/rate-limit, trustProxy settings, Kubernetes Fastify deployment, Fastify performance tuning, request timeouts, handler timeouts, return503OnClosing, prototype poisoning protection, production Fastify checklist, or hardening Fastify server.
fastify-schemas-validation
This skill should be used when writing Fastify JSON schemas, configuring Ajv validation, using fast-json-stringify serialization, defining request body/querystring/params/headers schemas, sharing schemas with addSchema and $ref, using fluent-json-schema, configuring response schemas, handling validation errors, setting up custom validators, working with Fastify schema design, coercion issues, nullable types, or allErrors configuration.
fastify-testing
This skill should be used when testing Fastify applications, using .inject() for HTTP testing, writing Fastify unit tests, testing Fastify plugins in isolation, separating app from server for testing, using light-my-request, testing route handlers, integration testing Fastify, test setup and teardown with Fastify, parallel test execution, testing Fastify hooks, or mocking in Fastify tests.
fastify-troubleshooting
This skill should be used when debugging Fastify issues, identifying Fastify anti-patterns, diagnosing common Fastify mistakes, performing Fastify error troubleshooting, investigating request.body undefined in hook, fixing decorator shared across requests, resolving hook executing twice, handling reply already sent error, debugging encapsulation not working, fixing schema validation bypassed, diagnosing serialization error 500, handling Fastify crash unhandled rejection, troubleshooting plugin not loading, resolving decorator not found, or diagnosing Fastify performance problems.
fastify-typescript
This skill should be used when using TypeScript with Fastify, configuring type providers, using @fastify/type-provider-typebox, using @fastify/type-provider-json-schema-to-ts, typing Fastify plugins, declaration merging for decorators, typing route handlers, FastifyInstance generics, FastifyRequest generics, FastifyReply generics, withTypeProvider, typing custom decorators, or Fastify TypeScript configuration.
tailwind-configuration
Use when setting up or customizing Tailwind CSS configuration, theme customization, plugins, and build setup. Covers tailwind.config.js setup and content paths.
gaia-handoff
Generate a comprehensive GAIA session handoff document, accomplishments, decisions, current state, open questions, so context can be cleared or compacted without losing anything. Trigger on `/gaia-handoff` or natural-language asks like "write a handoff", "hand off this session", or "document where we are before I clear context".
gaia-wiki
GAIA wiki maintenance, sync, consolidate, lint. Runs the full chain with no sub-arg, or a single stage when named (sync | consolidate | lint); append --force to override drift gating. Trigger on `/gaia-wiki <stage>` or natural-language asks like "sync the wiki", "run the wiki maintenance chain", "consolidate the wiki", or "lint the wiki".
docx
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
epic-design
Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
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 new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
pptx
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slides," "presentation," or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
project-tree-example
follow similar kind of Project Structure or more schema base Architectural Pattern that track code structure without viewing the full context of code.
python-patterns
Pythonic idioms, PEP 8 standards, type hints, and best practices for building robust, efficient, and maintainable Python applications.
python-testing
Python testing strategies using pytest, TDD methodology, fixtures, mocking, parametrization, and coverage requirements.
pytorch-patterns
PyTorch deep learning patterns and best practices for building robust, efficient, and reproducible training pipelines, model architectures, and data loading.
schema-markup
When the user wants to implement, audit, or validate structured data (schema markup) on their website. Use when the user mentions 'structured data,' 'schema.org,' 'JSON-LD,' 'rich results,' 'rich snippets,' 'schema markup,' 'FAQ schema,' 'Product schema,' 'HowTo schema,' or 'structured data errors in Search Console.' Also use when someone asks why their content isn't showing rich results or wants to improve AI search visibility. NOT for general SEO audits (use seo-audit) or technical SEO crawl issues (use site-architecture).
senior-ml-engineer
ML engineering skill for productionizing models, building MLOps pipelines, and integrating LLMs. Covers model deployment, feature stores, drift monitoring, RAG systems, and cost optimization. Use when the user asks about deploying ML models to production, setting up MLOps infrastructure (MLflow, Kubeflow, Kubernetes, Docker), monitoring model performance or drift, building RAG pipelines, or integrating LLM APIs with retry logic and cost controls. Focused on production and operational concerns rather than model research or initial training.
senior-security
Security engineering toolkit for threat modeling, vulnerability analysis, secure architecture, and penetration testing. Includes STRIDE analysis, OWASP guidance, cryptography patterns, and security scanning tools. Use when the user asks about security reviews, threat analysis, vulnerability assessments, secure coding practices, security audits, attack surface analysis, CVE remediation, or security best practices.
seo-audit
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health check." For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup.
site-architecture
When the user wants to audit, redesign, or plan their website's structure, URL hierarchy, navigation design, or internal linking strategy. Use when the user mentions 'site architecture,' 'URL structure,' 'internal links,' 'site navigation,' 'breadcrumbs,' 'topic clusters,' 'hub pages,' 'orphan pages,' 'silo structure,' 'information architecture,' or 'website reorganization.' Also use when someone has SEO problems and the root cause is structural (not content or schema). NOT for content strategy decisions about what to write (use content-strategy) or for schema markup (use schema-markup).
xlsx
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
react-skills
React patterns, hooks, and best practices for modern frontend development
050103-tailwind-implement
Tailwind CSS v4 CSS-first configuration and shadcn/ui component composition — CVA factories, styling rules, forms, icons, Base vs Radix API.
a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
apply-aesthetic
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
brandkit
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 wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
design-qa
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
design-review
Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
design-tokens
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
figma-integration
Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.
governance
Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.
migrate-design-system
Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.
performance
Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.
prototype
Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.
redesign
Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.
token-build
Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.
ux-writing
Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.
astro-accessibility
This skill should be used when implementing accessibility in Astro, WCAG compliance in Astro, Astro ARIA patterns, keyboard navigation in Astro components, screen reader support in Astro, Astro semantic HTML, focus management in Astro, accessible forms in Astro, Astro accessibility testing, axe-core integration with Astro, accessible Astro islands, alt text for Astro images, focus trapping in modals, accessible view transitions, or color contrast requirements.
astro-best-practices
This skill should be used when working on any Astro project or when the user asks about Astro best practices, conventions, or patterns. Trigger when: working on an Astro project, creating Astro components/pages/layouts, configuring astro.config, setting up Content Collections, using Content Layer API, choosing client directives (client:load/idle/visible/media/only), using server:defer or server islands, deciding between SSR and SSG, working with Astro Actions for forms, configuring middleware, using Zod schemas for content, building with TypeScript in Astro, creating API endpoints, using @astro/autoload, working with .astro files, Astro 5 or Astro 6 development.
astro-performance
This skill should be used when optimizing Astro performance, improving Core Web Vitals in Astro, fixing LCP/CLS/INP issues, auditing client directives, reducing JavaScript bundle size, configuring Astro prefetching, using server:defer for performance, optimizing Astro images, configuring Astro fonts, CSS optimization in Astro, HTML streaming, Astro build optimization, Astro CDN configuration, Route Caching API, Lighthouse audit for Astro, hydration performance, client:visible vs client:load, or Astro asset pipeline.
astro-security
This skill should be used when implementing Astro security, configuring Content Security Policy in Astro, preventing XSS in Astro, using set:html safely, handling secrets in Astro, configuring astro:env, Astro authentication patterns, Astro Session API, CSRF protection in Astro, configuring security.checkOrigin, Astro cookie security, middleware security patterns, Astro CORS configuration, protecting API endpoints, security.allowedDomains, environment variable security in Astro, import.meta.env secret leakage
astro-troubleshooting
This skill should be used when debugging Astro issues, identifying Astro anti-patterns, fixing common Astro mistakes, troubleshooting Astro errors, resolving "document is not defined" in Astro, resolving "window is not defined" in Astro, diagnosing a component not interactive, fixing content validation errors, investigating why an Astro build fails, debugging hydration issues, solving Astro 5 migration problems, fixing slug vs id errors, resolving render method not found, diagnosing Astro performance problems, reducing too much JavaScript in Astro, fixing Astro routing errors, or addressing form resubmission warnings.
fastify-best-practices
This skill should be used when working on any Fastify project or when the user asks about Fastify best practices, conventions, or patterns. Trigger when: working on a Fastify project, creating Fastify plugins, registering routes, using decorators, organizing Fastify application structure, using @fastify/autoload, creating encapsulated contexts, working with fastify-plugin, building Fastify APIs, configuring Fastify server options, using the register API, understanding Fastify encapsulation, project scaffolding with fastify-cli
fastify-hooks-lifecycle
This skill should be used when implementing Fastify hooks, understanding hook execution order, using onRequest/preParsing/preValidation/preHandler/preSerialization/onError/onSend/onResponse hooks, using onReady/onListen/onClose/onRoute/onRegister application hooks, debugging hook chain issues, adding authentication hooks, implementing request lifecycle interceptors, working with Fastify lifecycle events, or understanding when request.body is available.
fastify-logging
This skill should be used when configuring Fastify logging, setting up Pino logger, using child loggers, implementing log redaction, configuring log transports, using pino-pretty for development, async logging with sonic-boom, structured JSON logging, request correlation IDs, log levels, configuring pino.final for crash handling, multi-target log transports, or Fastify observability.
fastify-production
This skill should be used when deploying Fastify to production, configuring Fastify security headers, setting up reverse proxy with Fastify, implementing graceful shutdown, configuring @fastify/helmet, @fastify/cors, @fastify/rate-limit, trustProxy settings, Kubernetes Fastify deployment, Fastify performance tuning, request timeouts, handler timeouts, return503OnClosing, prototype poisoning protection, production Fastify checklist, or hardening Fastify server.
fastify-schemas-validation
This skill should be used when writing Fastify JSON schemas, configuring Ajv validation, using fast-json-stringify serialization, defining request body/querystring/params/headers schemas, sharing schemas with addSchema and $ref, using fluent-json-schema, configuring response schemas, handling validation errors, setting up custom validators, working with Fastify schema design, coercion issues, nullable types, or allErrors configuration.
fastify-testing
This skill should be used when testing Fastify applications, using .inject() for HTTP testing, writing Fastify unit tests, testing Fastify plugins in isolation, separating app from server for testing, using light-my-request, testing route handlers, integration testing Fastify, test setup and teardown with Fastify, parallel test execution, testing Fastify hooks, or mocking in Fastify tests.
fastify-troubleshooting
This skill should be used when debugging Fastify issues, identifying Fastify anti-patterns, diagnosing common Fastify mistakes, performing Fastify error troubleshooting, investigating request.body undefined in hook, fixing decorator shared across requests, resolving hook executing twice, handling reply already sent error, debugging encapsulation not working, fixing schema validation bypassed, diagnosing serialization error 500, handling Fastify crash unhandled rejection, troubleshooting plugin not loading, resolving decorator not found, or diagnosing Fastify performance problems.
fastify-typescript
This skill should be used when using TypeScript with Fastify, configuring type providers, using @fastify/type-provider-typebox, using @fastify/type-provider-json-schema-to-ts, typing Fastify plugins, declaration merging for decorators, typing route handlers, FastifyInstance generics, FastifyRequest generics, FastifyReply generics, withTypeProvider, typing custom decorators, or Fastify TypeScript configuration.
cover-letter
Generate a cover letter from a job description using Sukhrob's resume. Applies humanizer for natural tone.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
design-ux
UI/UX design patterns and design system architecture. TRIGGER when: working on component design, layout/grid decisions, design tokens, color palettes, typography, accessibility (WCAG), responsive design, TUI aesthetics, or creating DESIGN.md documentation. Covers React, Tailwind CSS, terminal UI, and mobile patterns with a monospace-first, constraint-based design philosophy. DO NOT TRIGGER when: writing React/TypeScript code logic (use droo-stack skill), building Raxol TUI framework features (use raxol skill), working with CSS-in-JS runtime concerns (this skill covers design decisions, not runtime), or designing API/module/public-surface interfaces (use interface-designer skill).
ui-ux-audit
Comprehensive UI/UX quality audit and prevention system that catches the failures AI consistently ships, including broken or shifting layouts, text overflow, inconsistent components, missing states, poor contrast, undersized touch targets, accessibility violations, performance jank, and generic "AI slop" aesthetics. Use whenever the user asks to audit, review, check, critique, fix, polish, optimize, or improve any UI, page, screen, component, screenshot, or design, or says things like "the layout looks off", "something feels wrong", "this looks AI-generated", "is this ready to ship", "weird spacing", "ugly", or "broken page". ALSO consult this skill silently BEFORE writing or editing any UI code (React, JSX, HTML, CSS, Tailwind, React Native, Expo) so these failures never ship in the first place. Supports per-project profiles that override the universal defaults; an example kids-app profile doubling as a template is included.
prototype-guide
Generates self-contained HTML prototypes with design context from project files. Read design principles, personas, and hypothesis files, then produce a working prototype for Usability and Value risk validation. Use when creating prototypes or validating through tangible artifacts.
tailwind-v4-shadcn
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
gws-script
Manage Google Apps Script projects.
save
Use when the user wants to capture the learnings from the current session into persistent artifacts — auto-memory notes, sub-agent definitions, custom skills, hooks, or project-level CLAUDE.md additions. Triggers on phrases like "/save", "save what we learned", "memorize this session", "capture the learnings", or after a substantial back-and-forth that produced reusable patterns.
skillify
Use when the user wants to take a concept observed in an external tool, library, methodology or article (e.g. Ruflo, LangGraph, BMAD, a blog post, a paper) and turn it into a reusable Claude Code skill — keeping the idea, dropping the rest. Triggers on phrases like "skillify this", "make a skill out of X", "extract this pattern as a skill", or after the user identifies a useful concept while testing a tool.
sparc
SPARC methodology — Specification, Pseudocode, Architecture, Refinement, Completion. Five-phase structured workflow for algo-heavy or non-trivial features where the right shape is not obvious upfront. Distinct from APEX (linear analyze-plan-execute-validate) by adding an explicit pseudocode step before architecture and an explicit refinement pass after the first implementation. Use when designing parsers, solvers, scoring algorithms, custom rendering pipelines, complex data transformations, or anything where you'd benefit from sketching the algorithm before committing to file layout.
sync-site-docs
Use after a notable change on one of the 6 personal sites (new nav entry, new page, architecture pivot, removed feature, new third-party tool tested) to keep the project docs and the cross-site case study in sync. Triggers on "/sync-site-docs", "sync docs", "j'ai changé la nav", "j'ai ajouté une feature importante", "update doc projet", or after a substantial commit on warhammer40k / finance-tracker / ol-companion / avatar-pandora / evatosorus / claude-code-codex.
test-tool
Use when the user wants to evaluate a third-party Claude Code tool (npm package, GitHub repo, plugin marketplace) before adopting it. Triggers on phrases like "/test-tool", "on teste X", "let's evaluate X", "is X any good?", or when the user shares a GitHub URL of a tool to assess. Runs the systematic test bench protocol (snapshot → install in sandbox → verify pollution → minimal usage → verdict → cleanup) and ships the verdict to the claude-code-codex Tools tested catalog.
update-rtk-stats
Use when the user wants to refresh the RTK savings stats displayed on the claude-code-codex homepage. Triggers on "/update-rtk-stats", "refresh rtk stats", "maj stats rtk", or after a long session where rtk usage might have meaningfully changed the numbers. Reads `rtk gain --format json`, writes to frontend/src/data/rtk-stats.json, and proposes a commit.
react-service-creator
【React脚手架】生成 React 项目脚手架，支持 Next.js/Vite/CRA，包含路由、状态管理、API层、组件规范、测试配置。 触发时机： - 用户要求"创建React项目"、"React脚手架" - 新建前端项目需要标准化模板 - 需要统一团队 React 项目结构 生成完整可运行的项目骨架。
nestjs-patterns
NestJS best practices, module architecture, DTOs, Guards, Interceptors, and common patterns. Use when building or reviewing NestJS backend services.
nextjs-app-router
Next.js App Router best practices, Server Components, Server Actions, routing patterns, and data fetching strategies. Use when building Next.js applications with the App Router.
prisma-workflow
Prisma ORM best practices, schema design, migrations, seeding, and query optimization for PostgreSQL. Use when working with database schemas, migrations, or Prisma queries.
prompt-engineering
Comprehensive prompt engineering framework for designing, optimizing, and iterating LLM prompts. Use when creating prompts, optimizing existing prompts, or improving AI instructions.
app-ui-design
Guidance for visual design, UI and UX in Fusebase-generated apps. Use when building or refining app UIs: pages, components, layouts, forms, feedback states, theming, or accessibility. Ensures consistent, clear, and distinctive interfaces using shadcn/ui.
frontend-expert
Frontend development expert proficient in React 18+, TypeScript 5+, and TailwindCSS. Automatically activates when users need frontend component development, styling, state management, or performance optimization.
frontend-expert
Frontend development expert proficient in React 18+, TypeScript 5+, and TailwindCSS. Automatically activates when users need frontend component development, styling, state management, or performance optimization.
developing-lt-frontend
Handles ALL Nuxt 4 and Vue frontend development tasks including composables, forms (Valibot), API integration (types.gen.ts, sdk.gen.ts), authentication (Better Auth), SSR, and Playwright E2E testing. Supports monorepos (projects/app/, packages/app/). Activates when working with .vue files, nuxt.config.ts, Nuxt UI, TailwindCSS, composables, server components, forms, or files in app/components/, app/composables/, app/pages/, app/interfaces/, app/layouts/. Also activates on phrases like "generate types", "sdk.gen.ts regenerate", "Valibot form", "useOverlay modal", "Chrome DevTools debug", "Playwright E2E". NOT for NestJS backend (use generating-nest-servers). NOT for framework-agnostic security theory (use general-frontend-security).
tech-radar
MUST use when user asks 'what's new?', 'any updates?', 'latest versions?', 'breaking changes?', 'should we upgrade?', 'what changed in X?', or when starting a new project to check if dependencies are current. Also trigger proactively at the start of major upgrade sessions.
gws-script
Manage Google Apps Script projects.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3.
fast-brief
Turn product docs, PDFs, or requirements into a focused Astro prototype brief and JSON content plan, written to BRIEF.md at the repo root. Use before building, when the user has source material and needs to scope the smallest useful prototype slice. Treats source docs as suspect by default - flags contradictions, ambiguities, and likely AI-generated boilerplate before producing the brief.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
extract-theme
Extracts the visual theme (colors, typography, radius, spacing, shadows) of a public website provided by the user and produces a shadcn/ui + Tailwind CSS v4 compatible token block, ready to paste into the project's `globals.css` (or `app.css`) inside `@theme` and `.dark`. Uses the chrome-devtools MCP server to drive a real Chromium instance (no Playwright). Use when the user asks to "extract the theme of <url>", "reverse-engineer the design tokens of <site>", "copy the look of <site> into shadcn", "build a tailwind v4 theme from <url>", or mentions extract-theme / theme extraction / design tokens from a URL.
tailwind-design-system
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.
babysit
Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.
split-to-prs
Split current work into small reviewable PRs. Use when the user asks to split a chat, set of changes, branch, or PR.
frontend-best-practices
Frontend best practices — TypeScript, React/Vue/Svelte, CSS, accessibility, testing. Use when writing, reviewing, or discussing frontend code.
ai-website-building
零代码基础的非技术人员（市场、运营、产品）用 AI 从零做出一个可交付给开发的官网/落地页原型的完整方法。覆盖前期调研（竞品+SaaS实践+模板）、分模块生成、逐块微调、设计规范、图片处理、移动端适配、避坑清单、省 token 策略、多 agent 备份、以及给开发交付。核心前提是先知道自己要什么再下指令，每做一个新页面都要重新调研。当用户想用 AI 做网站、做官网、做落地页、做首页原型、改版网站、生成 HTML 页面，或提到"不会写代码但想做个网页""让 AI 帮我做官网""做个产品介绍页"等场景时，使用此 skill。即使用户没有明确说"用 skill"，只要任务涉及非技术人员用 AI 产出网页，都应主动套用本方法。
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
demo
Turns an approved PRD into an interactive demo brief or runnable frontend demo with preview URL, UI stack recommendation, mock data plan, role-document contract, and Cloudflare Pages preflight. Use when the user asks to generate a demo, proof of concept, frontend demo, or preview URL. Product-native by default; in non-product contexts, use only when the user explicitly asks to apply this as a Product Thinking Lens. Not for backend production architecture, production deployment, release publishing, or professional legal, medical, or financial advice.
unocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
antv-g2-chart
Generate G2 v5 chart code. Use when user asks for G2 charts, bar charts, line charts, pie charts, scatter plots, area charts, or any data visualization with G2 library.
antv-s2-expert
S2 multi-dimensional cross-analysis table development assistant (Expert Skill). MUST act as priority when users mention the following keywords: cross table, pivot table, detail table, multi-dimensional analysis table, pivot table, cross table, table sheet, antv s2, s2, @antv/s2. Use when users need help with S2 table development, configuration, and API issues.
api-design-reviewer
Comprehensive REST API design review with automated linting, breaking-change detection, and design scorecards. Catches inconsistent conventions, missing versioning, and design smells before APIs ship. Use when reviewing a PR that adds or changes API endpoints, auditing an existing API for v2 migration, or establishing API standards for a team.
api-test-suite-builder
Use when the user asks to generate API tests, create integration test suites, test REST endpoints, or build contract tests.
architecture-auditing-linter
Ensure every project remains compliant with these standards, use the built-in `linter` tool. It scans codebase for violations of the architecture rules using AST parsing.
ci-cd-pipeline-builder
Generate pragmatic CI/CD pipelines from detected project stack signals — fast baseline generation, repeatable checks, environment-aware deployment stages. Use when setting up CI for a new project, refactoring existing pipelines, or standardizing deployment workflows across multiple repos.
database-designer
Use when the user asks to design database schemas, plan data migrations, optimize queries, choose between SQL and NoSQL, or model data relationships.
database-schema-designer
Use when the user asks to create ERD diagrams, normalize database schemas, design table relationships, or plan schema migrations.
git-worktree-manager
Run parallel feature work safely with Git worktrees. Standardizes branch isolation, port allocation, environment sync, and cleanup so each worktree behaves like an independent local app. Optimized for multi-agent workflows where each agent or terminal session owns one worktree. Use when running multiple feature branches simultaneously, isolating experimental work, or coordinating multi-agent development across the same repo.
infographic-creator
Create beautiful infographics based on given text content. Use when users request to create infographics.
pr-review-expert
Use when the user asks to review pull requests, analyze code changes, check for security issues in PRs, or assess code quality of diffs.
python-project-setup
Universal project scaffolding toolkit — drops pre-built, battle-tested layers (config, helpers) into any Python project with a single command. Zero boilerplate, maximum cognitive coherence.
release-manager
Use when the user asks to plan releases, manage changelogs, coordinate deployments, create release branches, or automate versioning.
senior-architect
This skill should be used when the user asks to "design system architecture", "evaluate microservices vs monolith", "create architecture diagrams", "analyze dependencies", "choose a database", "plan for scalability", "make technical decisions", or "review system design". Use for architecture decision records (ADRs), tech stack evaluation, system design reviews, dependency analysis, and generating architecture diagrams in Mermaid, PlantUML, or ASCII format.
senior-backend
Designs and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the user asks to "design REST APIs", "optimize database queries", "implement authentication", "build microservices", "review backend code", "set up GraphQL", "handle database migrations", or "load test APIs". Covers Node.js/Express/Fastify development, PostgreSQL optimization, API security, and backend architecture patterns.
senior-data-engineer
Data engineering skill for building scalable data pipelines, ETL/ELT systems, and data infrastructure. Expertise in Python, SQL, Spark, Airflow, dbt, Kafka, and modern data stack. Includes data modeling, pipeline orchestration, data quality, and DataOps. Use when designing data architectures, building data pipelines, optimizing data workflows, implementing data governance, or troubleshooting data issues.
senior-data-scientist
World-class senior data scientist skill specialising in statistical modeling, experiment design, causal inference, and predictive analytics. Covers A/B testing (sample sizing, two-proportion z-tests, Bonferroni correction), difference-in-differences, feature engineering pipelines (Scikit-learn, XGBoost), cross-validated model evaluation (AUC-ROC, AUC-PR, SHAP), and MLflow experiment tracking — using Python (NumPy, Pandas, Scikit-learn), R, and SQL. Use when designing or analysing controlled experiments, building and evaluating classification or regression models, performing causal analysis on observational data, engineering features for structured tabular datasets, or translating statistical findings into data-driven business decisions.
senior-devops
Comprehensive DevOps skill for CI/CD, infrastructure automation, containerization, and cloud platforms (AWS, GCP, Azure). Includes pipeline setup, infrastructure as code, deployment automation, and monitoring. Use when setting up pipelines, deploying applications, managing infrastructure, implementing monitoring, or optimizing deployment processes.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
senior-fullstack
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
senior-qa
Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
senior-secops
Senior SecOps engineer skill for application security, vulnerability management, compliance verification, and secure development practices. Runs SAST/DAST scans, generates CVE remediation plans, checks dependency vulnerabilities, creates security policies, enforces secure coding patterns, and automates compliance checks against SOC2, PCI-DSS, HIPAA, and GDPR. Use when conducting a security review or audit, responding to a CVE or security incident, hardening infrastructure, implementing authentication or secrets management, running penetration test prep, checking OWASP Top 10 exposure, or enforcing security controls in CI/CD pipelines.
sql-database-assistant
Use when the user asks to write SQL queries, optimize database performance, generate migrations, explore database schemas, or work with ORMs like Prisma, Drizzle, TypeORM, or SQLAlchemy.
tdd-guide
Test-driven development skill for writing unit tests, generating test fixtures and mocks, analyzing coverage gaps, and guiding red-green-refactor workflows across Jest, Pytest, JUnit, Vitest, and Mocha. Use when the user asks to write tests, improve test coverage, practice TDD, generate mocks or stubs, or mentions testing frameworks like Jest, pytest, or JUnit.
ubuntu-bashrc-profile
A high-performance, developer-centric bash profile for Ubuntu. Features include a smart directory navigator (cdd) with project detection (Node, Python, Rust, Go, Docker), automated daily system update checks, git branch integration, and optimized shell visuals. Designed to transform a standard terminal into a powerful productivity hub.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
frontend-tailwind
Use when adding Tailwind CSS to a Vite project: wire Tailwind CSS into a Vite project for utility first styling.
claude-code-guide
To provide a comprehensive reference for configuring and using Claude Code (the agentic coding tool) to its full potential. This skill synthesizes best practices, configuration templates, and advanced usage patterns.
speckit.wordpress
WordPress Theme Architect - Expert in developing themes, plugins and optimizing the WordPress ecosystem.
artifacts-builder
Build elaborate multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui, then bundle them into a single HTML file. USE WHEN a complex artifact needs state management, routing, or shadcn/ui components — NOT for simple single-file HTML/JSX artifacts.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
bitbucket-workflow
Bitbucket best practices for pull requests, Pipelines CI/CD, Jira integration, and Atlassian ecosystem workflows
tailwind-patterns
Tailwind CSS v4 patterns, CSS-first config via @theme directive, v3-vs-v4 deltas, variant rules, and anti-patterns. Use whenever the project contains `tailwind.config.js`, `tailwind.config.ts`, `@import "tailwindcss"` in CSS, `@tailwindcss/postcss` or `@tailwindcss/vite` in `package.json` dependencies, OR the user asks about Tailwind, utility classes, CSS, styling in a Tailwind project, @theme, @apply, design tokens, dark mode strategy, or any work touching CSS class names or theme configuration, even if Tailwind is not mentioned by name.
creating-offers
Creates and edits business offers on the lenne.tech Offers platform (angebote.lenne.tech) and its demo deployment (demo-angebote.lenne.tech). Knows all 16 content block types, offer lifecycle (draft/sent/viewed/template), custom HTML with Tailwind CSS and NuxtUI components (via rich-component block). Activates when working with offers, content blocks, or the Offers API. Uses MCP tools (offers-api for production, offers-api-demo for demo) for all CRUD operations.
html-prototype
Generate HTML prototypes (single-file, browser-openable) for product mockups using the user's design system — fonts, color scales, radii, shadows, components, all driven by a tokens.css file. Use when the user asks to make a 原型 / mockup / HTML 设计图 / 设计图给前端 for a PRD module, OR redesign an existing prototype. Output goes to the PRD module's `prototype/` subfolder.
pagewright
Build beautiful, original SaaS landing pages and marketing sites as static HTML + Tailwind, using a curated library of real-world design patterns and a per-project "Design DNA" so every site looks distinct — never a clone of any single reference. Plans where AI-generated imagery (e.g. Nano Banana / Gemini) and real screenshots elevate the design instead of faking everything in CSS. Use this skill whenever the user wants to create, build, design, redesign, generate, or improve a landing page, marketing page, product/launch page, hero section, pricing page, or website for a SaaS, startup, app, tool, or digital product — even if they only describe the product and say "make me a site/page" without naming a framework or the word "landing". It opens by asking whether they want to guide the design or let you decide.
fast-astro
Scaffold or normalize a Fast Preset Astro prototype - latest Astro, Tailwind CSS, DaisyUI, @lucide/astro, a default layout, index page, and src/data/config.json. Use when starting a new coded prototype repo or when an existing repo is missing the Fast Preset base.
fast-data
Create or refine JSON data models in src/data for Astro coded prototypes - content, fake data, UI states, workflow states, scenario fixtures, config. Reads BRIEF.md to honor assumption tags and scope. Use when the prototype's data layer needs shaping, not when adding a real database.
fast-prototype
Build or iterate an Astro/Tailwind/DaisyUI coded prototype where JSON files in src/data are the editable data layer. Reads BRIEF.md to drive scope; _assumed records are tracked but render exactly like verified records (no visible tells). Use when the user wants a working prototype rather than a plan or spec.
fast-review
Polish pass for an Astro/Tailwind/DaisyUI prototype before sharing - visual quality, responsive behavior, interaction states, DaisyUI consistency, and unresolved assumptions still showing in the UI. Use after a build session, before showing the prototype to stakeholders, or when something feels off.
shippage
Generate production-quality, conversion-optimized SaaS landing pages in minutes. Use when the user asks to build a landing page, marketing page, product page, homepage, or website for a SaaS, startup, app, or B2B product. Also use when they say "make a page for my product", "I need a website", "create a sales page", "ship a landing page", or "help me launch". Use for audits too: "roast my page", "audit this landing page", "review my website". Outputs deployable React projects with Tailwind CSS, Framer Motion, shadcn/ui, 200 real design tokens, and 18 conversion-optimized section templates. Supports Next.js, Vite, Remix, Astro, Vue, Svelte. Use this skill even if the user doesn't explicitly say "landing page" — if they're building software and need a website that sells, this is the skill.
icon-retrieval
Search icons through HTTP API and retrieve SVG strings with curl.
library-build-sync
Use when creating or updating JavaScript/TypeScript libraries in this monorepo; require building the library first and then running yarn in `_templates/react_template` so the template picks up the latest local library version.
project_planner
Project planning with phases, milestones, deliverables, risk matrices, and team assignments
design-system
Reference design system tokens, colors, typography, and component patterns. Use when doing UI work, styling, creating new components, or fixing visual issues.
frontend-design
UI/UX design — color theory (60-30-10 rule), responsive layouts, WCAG accessibility, CSS/Tailwind patterns, wireframes, and visual review. Use when designing interfaces, choosing palettes, writing CSS, or fixing layout/accessibility issues.
react-development
React 19+ with TypeScript — hooks, custom hooks, state management (useState/useReducer/useContext), React Query/SWR, Tailwind CSS, performance. Use when building React components, apps, or optimizing renders.
ui-styling
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, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts. Use when building complex, multi-component claude.ai HTML artifacts that need state, routing, or shadcn/ui.
health-check
Check the health of the running WealthWise API, web app, and MongoDB services. Triggers when asked to "check if the app is running", "verify the API is up", "is the server healthy", or "show service status".
analyze
Analyze entire codebases using Gemini CLI's 1M token context. Generates architecture reports covering structure, security, performance, and improvement roadmaps. Use when auditing code quality or running /analyze.
implement
Generate implementation code from design documents by delegating to OpenAI Codex. Use when you have specs ready and want to auto-generate source code, or when running /implement.
mockup
Generate UI mockup images as PNG using HTML/Tailwind CSS rendered via Playwright. Supports multiple device presets (iPhone, iPad, desktop). Use when creating visual prototypes or running /mockup.
research
Conduct technical research using Gemini CLI, producing comparison reports with recommendations and code examples. Use when evaluating technologies, comparing libraries, or running /research.
openmaic-classroom
OpenMAIC — Open Multi-Agent Interactive Classroom platform for generating immersive AI-powered learning experiences with slides, quizzes, simulations, and multi-agent discussions.
tailwind-design-system
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.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
perfect-ui
Design and build cohesive web pages with custom visual identity — landing pages and portfolios get rich anatomy + section archetypes; any other page type (blog, about, pricing, contact, coming-soon, dashboard, admin, e-commerce, custom) is supported through generic anatomy + skeleton. Use this skill whenever the user mentions: landing page, portfolio, personal site, hero section, marketing page, product page, sales page, splash page, blog page, about page, pricing page, contact page, coming-soon, waitlist, dashboard, admin panel, e-commerce store, redesign my site, design my portfolio, build a portfolio, work showcase, hire-me page, perfect-ui, perfect landing, or asks to create any web page surface. Two tiers: special (landing | portfolio — rich treatment) and generic (everything else — universal craft toolkit). Self-contained 8-phase pipeline: vibe discovery → visual direction (color/typography/mood) → custom icon set (NO emoji, NO icon library) → AI-generated visuals → optional shader effects layer → inlin
ui-design
Use this to design a nice UI in single html as inspiration & UI exploration.
web-artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
multi-tenant-architecture
Guidelines for building a white-label, multi-tenant church platform using Next.js App Router, Middleware, and Supabase RLS. Use when setting up subdomains, dynamic theming, or tenant isolation.
web-artifacts-builder
Load when a workflow-router-selected owner workflow needs complex standalone React/Tailwind/shadcn browser artifacts with state, routing, or bundled components; use effective-interact for reports and frontend-design for production UI.
tailwind-spacing-audit
This skill should be used when the user mentions uneven spacing, alignment issues, inconsistent gaps between elements, mixed margin/gap strategies, navbar or toolbar spacing problems, or asks to "clean up", "normalize", or "audit" spacing in a Tailwind component. This skill also applies when reviewing UI code where flex/grid containers use a mix of gap-*, margin (m*, me-*, ms-*), padding, and fixed widths to space sibling elements — even if the user doesn't explicitly say "spacing." If someone pastes a nav bar, toolbar, header, or action bar and says "something looks off," this skill is almost certainly what they need.
web-artifacts-builder
Build multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui. For complex artifacts requiring state management or routing.
artifacts-builder
Suite of tools for creating elaborate, multi-component 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.
requirements
Generate a requirements document with user stories, acceptance criteria, and constraints. Use when defining features, writing specs, or running /requirements before implementation.
angular-signals
Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.
ckmbanner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
ckmdesign
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
ckmdesign-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
wordpress-architect-review
Produce a structured senior-architect code review of a WordPress plugin or theme — file-by-file audit covering security, performance, architecture, correctness, WordPress standards, accessibility, i18n, and missing infrastructure, with a 1–10 scorecard, severity-tagged findings (SEVERE/MODERATE/MINOR), file:line citations, quoted offending code, top-5 prioritized fixes, and an optional 3-phase refactor roadmap. Use this skill whenever the user asks to "review my WordPress plugin", "audit a WP theme", "code review this plugin", "check my plugin for security issues", "review wp-content code", "is this plugin secure", "rate my WordPress plugin", "WordPress plugin code quality", "theme review before submission", "plugin review before launch", "WPCS compliance check", "WordPress security audit", "performance audit on this plugin", or anything that involves evaluating an existing WordPress plugin or theme codebase. Trigger on phrases like "WP plugin review", "wordpress.org submission check", "is my plugin productio
verification
Use after completing all planned code changes to verify nothing is broken. Runs type checking, linting, tests, and builds. Must be the final step of every task -- do not skip any command.
epic-ui-guidelines
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
ai-analyzer
AI驱动的综合健康分析系统，整合多维度健康数据、识别异常模式、预测健康风险、提供个性化建议。支持智能问答和AI健康报告生成。
zod-4
Zod 4 schema validation patterns. Trigger: When using Zod for validation - breaking changes from v3.
copilot-docs
Configure GitHub Copilot with custom instructions. Use when setting up .github/copilot-instructions.md, customizing Copilot behavior, or creating repository-specific AI guidance. Triggers on Copilot instructions, copilot-instructions.md, GitHub Copilot config.
angular-developer
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, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
tailwind
Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design tokens, or asks to build, configure, audit, or migrate a Tailwind CSS project (including v3 to v4 migrations).
tailwind
Tailwind CSS — utility-first styling, responsive design, component patterns
21st-dev-builder-v2
Build websites and web apps using 21st.dev — the largest marketplace of shadcn/ui-based React Tailwind components with 1400+ components. Use when user mentions "21st.dev", "21st", "ใช้ 21st", "จาก 21st", "build with 21st", "21st component", "21st magic MCP", or references the 21st.dev component registry in any language. Covers building complete sites (landing pages, dashboards, portfolios, e-commerce storefronts, auth pages), browsing and installing individual 21st.dev components into existing projects, and setting up the 21st.dev MCP server. Also trigger when user wants premium UI components specifically from the 21st.dev registry. Do NOT trigger for general web development, standard shadcn/ui, plain Tailwind CSS, React Native, API development, testing, deployment, or any task that doesn't explicitly reference 21st or 21st.dev.
use-the-design-system
If the project already has a UI system, use it before building anything new. Use this WHENEVER you add or change UI in an existing codebase: a button, modal, form, card, page, or any component. Look first for the project's component library, design tokens, theme, and utility setup (a components or ui folder, shadcn/ui, MUI, Chakra, Mantine, Radix, a Tailwind config, CSS variables), and build with those. Reinventing a button from scratch when the project has one creates inconsistency and duplicate work. Only hand-roll a component when nothing in the system fits, and then match the system's conventions so it belongs.
dexie-migration
Safely bump the Dexie IndexedDB schema version in apps/web/src/db/dbService.ts. Guides through adding tables/columns, upgrade callbacks, TypeScript interfaces, and table exports.
generate-vitest
Generate a Vitest test file for an existing component or hook in apps/web/src/. Pass the file path or component name as the argument. Reads the source file first to produce meaningful mocks and assertions.
owasp-security-audit
Provides comprehensive security standards and checklists based on OWASP Top 10:2025. Includes language-specific secure coding patterns for 20+ languages, guidance on Agentic AI security, and ASVS 5.0 requirements to ensure robust defense-in-depth across the development lifecycle.
release-notes
Generate or update a release notes file for Gryffin Calorai following the established format. Pass the version number as the argument (e.g. "0.9.0"). Reads git history and ROADMAP.md to populate content.
scaffold-new-react-component
Scaffold a new React component + paired test file following Gryffin Calorai conventions. Pass the PascalCase component name as the argument.
scaffold-new-react-hook
Scaffold a new custom React hook in apps/web/src/hooks/ with a paired test file. Pass the hook name as the argument (e.g. "useActivitySummary"). Supports two patterns - form hooks and data hooks.
scaffold-zustand-slice
Scaffold a new Zustand store slice in apps/web/src/state/slices/ and wire it into AppState.ts. Pass the slice domain name as the argument (e.g. "notifications"). Follows the existing 8-slice composition pattern exactly.
session-wiki-update
Run the session-end wiki update checklist from project-knowledge/AGENTS.md. Updates wiki pages, appends to log.md, creates a weekly summary if needed, and refreshes index.md.
web-security-audit
Expert guidance on identifying and mitigating common web vulnerabilities from a bug hunter's perspective. Covers access control, XSS, CSRF, SSRF, insecure file uploads, and JWT security with detailed protection strategies, implementation patterns, and verification checklists.
tailwind
Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with `hyperframes init --tailwind`, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to CSS instead of using the browser runtime.
ab-test-setup
When 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," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program," or "experiment playbook." Use this whenever someone is comparing two approaches and wants to measure which performs better, or when they want to build a systematic experimentation practice. For tracking implementation, see analytics-tracking. For page-level conversion optimization, see page-cro.
ad-creative
When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.
ai-seo
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' 'zero-click search,' 'how do I show up in AI answers,' 'LLM mentions,' or 'optimize for Claude/Gemini.' Use this whenever someone wants their content to be cited or surfaced by AI assistants and AI search engines. For traditional technical and on-page SEO audits, see seo-audit. For structured data implementation, see schema-markup.
analytics-tracking
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see ab-test-setup.
aso-audit
When the user wants to audit or optimize an App Store or Google Play listing. Also use when the user mentions 'ASO audit,' 'app store optimization,' 'optimize my app listing,' 'improve app visibility,' 'app store ranking,' 'audit my listing,' 'why aren't people downloading my app,' 'improve my app conversion,' 'keyword optimization for app,' or 'compare my app to competitors.' Use when the user shares an App Store or Google Play URL and wants to improve it.
churn-prevention
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers or wants to build systems to prevent it. For post-cancel win-back email sequences, see email-sequence. For in-app upgrade paywalls, see paywall-upgrade-cro.
ckmbrand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
co-marketing
When the user wants to find co-marketing partners, plan joint campaigns, or brainstorm partnership opportunities. Use when the user says 'co-marketing,' 'partner marketing,' 'joint campaign,' 'who should we partner with,' 'integration marketing,' 'cross-promotion,' 'collaborate with another company,' 'partnership ideas,' or 'co-brand.' For customer referral programs, see referral-program. For launch-specific partnerships, see launch-strategy.
cold-email
Write B2B cold emails and follow-up sequences that get replies. Use when the user wants to write cold outreach emails, prospecting emails, cold email campaigns, sales development emails, or SDR emails. Also use when the user mentions "cold outreach," "prospecting email," "outbound email," "email to leads," "reach out to prospects," "sales email," "follow-up email sequence," "nobody's replying to my emails," or "how do I write a cold email." Covers subject lines, opening lines, body copy, CTAs, personalization, and multi-touch follow-up sequences. For warm/lifecycle email sequences, see email-sequence. For sales collateral beyond emails, see sales-enablement.
community-marketing
Build and leverage online communities to drive product growth and brand loyalty. Use when the user wants to create a community strategy, grow a Discord or Slack community, manage a forum or subreddit, build brand advocates, increase word-of-mouth, drive community-led growth, engage users post-signup, or turn customers into evangelists. Trigger phrases: "build a community," "community strategy," "Discord community," "Slack community," "community-led growth," "brand advocates," "user community," "forum strategy," "community engagement," "grow our community," "ambassador program," "community flywheel."
competitor-alternatives
When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' 'competitive landing pages,' 'how do we compare to X,' 'battle card,' or 'competitor teardown.' Use this for any content that positions your product against competitors. Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. For sales-specific competitor docs, see sales-enablement.
competitor-profiling
When the user wants to research, profile, or analyze competitors from their URLs. Also use when the user mentions 'competitor profile,' 'competitor research,' 'competitor analysis,' 'profile this competitor,' 'analyze competitor,' 'competitive intelligence,' 'competitor deep dive,' 'who are my competitors,' 'competitor landscape,' 'competitor dossier,' 'competitive audit,' or 'research these competitors.' Input is a list of competitor URLs. Output is structured competitor profile markdown files. For creating comparison/alternative pages from profiles, see competitor-alternatives. For sales-specific battle cards, see sales-enablement.
content-strategy
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," "content planning," "editorial calendar," "content marketing," "content roadmap," "what content should I create," "blog topics," "content pillars," or "I don't know what to write." Use this whenever someone needs help deciding what content to produce, not just writing it. For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit. For social media content specifically, see social-content.
copy-editing
When the user wants to edit, review, or improve existing marketing copy, or refresh outdated content. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' 'copy sweep,' 'tighten this up,' 'this reads awkwardly,' 'clean up this text,' 'too wordy,' 'sharpen the messaging,' 'refresh this content,' 'update this page,' 'this content is outdated,' or 'content audit.' Use this when the user already has copy and wants it improved or refreshed rather than rewritten from scratch. For writing new copy, see copywriting.
copywriting
When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see email-sequence. For popup copy, see popup-cro. For editing existing copy, see copy-editing.
customer-research
When the user wants to conduct, analyze, or synthesize customer research. Use when the user mentions "customer research," "ICP research," "talk to customers," "analyze transcripts," "customer interviews," "survey analysis," "support ticket analysis," "voice of customer," "VOC," "build personas," "customer personas," "jobs to be done," "JTBD," "what do customers say," "what are customers struggling with," "Reddit mining," "G2 reviews," "review mining," "digital watering holes," "community research," "forum research," "competitor reviews," "customer sentiment," or "find out why customers churn/convert/buy." Use for both analyzing existing research assets AND gathering new research from online sources. For writing copy informed by research, see copywriting. For acting on research to improve pages, see page-cro.
directory-submissions
When the user wants to submit their product to startup, SaaS, AI, agent, MCP, no-code, or review directories for backlinks, domain rating, and discovery. Also use when the user mentions "directory submissions," "submit to directories," "backlinks from directories," "list my product," "submit to Product Hunt," "BetaList," "TAAFT," "Futurepedia," "G2 listing," "Capterra listing," "AlternativeTo," "SaaSHub," "AI directories," "MCP registry," "agent directory," "dofollow backlinks," "launch directories," or "directory tracker." Use this whenever someone is planning the directory layer of a product launch or an ongoing backlink campaign. For the broader launch moment, see launch-strategy. For programmatic SEO pages that should live behind these backlinks, see programmatic-seo. For AI citation optimization, see ai-seo.
email-sequence
When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," "lifecycle emails," "trigger-based emails," "email funnel," "email workflow," "what emails should I send," "welcome series," or "email cadence." Use this for any multi-email automated flow. For cold outreach emails, see cold-email. For in-app onboarding, see onboarding-cro.
form-cro
When the user wants to optimize any form that is NOT signup/registration — including lead capture forms, contact forms, demo request forms, application forms, survey forms, or checkout forms. Also use when the user mentions "form optimization," "lead form conversions," "form friction," "form fields," "form completion rate," "contact form," "nobody fills out our form," "form abandonment," "too many fields," "demo request form," or "lead form isn't converting." Use this for any non-signup form that captures information. For signup/registration forms, see signup-flow-cro. For popups containing forms, see popup-cro.
free-tool-strategy
When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free tool," "marketing tool," "calculator," "generator," "interactive tool," "lead gen tool," "build a tool for leads," "free resource," "ROI calculator," "grader tool," "audit tool," "should I build a free tool," or "tools for lead gen." Use this whenever someone wants to build something useful and give it away to attract leads or earn links. For downloadable content lead magnets (ebooks, checklists, templates), see lead-magnets.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
image
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'Ideogram,' 'Gemini image,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
aio-neobrutalism
Apply neobrutalism design to a web project — detects tech stack, generates CSS tokens, and transforms existing UI components.
html-design-styles
Use when the user wants to apply a named design style or aesthetic to a frontend interface — e.g., bento, brutalist, neobrutalist, glassmorphism, vaporwave, dark SaaS, kawaii, cyberpunk, art deco, neumorphism, swiss, memphis, scandinavian, cottagecore, y2k, sci-fi HUD, and more. Triggers when the user names a specific style, asks "what design styles do you support", requests "a [style] look" for a page or component, or wants to restyle existing markup with a chosen aesthetic. Provides a curated catalog of 53 design styles each with full color palettes, typography stacks, component patterns, and layout specifications.
html-to-wordpress-theme
Use when converting static HTML files into a production-quality, installable WordPress theme. Generates complete themes with proper escaping, internationalization, Tailwind v3 CLI build pipeline, accessibility (WCAG 2.1 AA), and child-theme compatibility. Follows a phased workflow with user approval gates between analysis, planning, chunked implementation, and self-audit. Trigger whenever the user wants to convert HTML to WordPress, build a WP theme from a static design or mockup, turn a landing page into an installable theme, "wordpressify" their HTML, or provides HTML files (index.html, single.html, mockups) and wants them turned into a working WordPress theme.
wordpress-plugin
Generate a complete, production-ready, enterprise-grade WordPress plugin from scratch — the kind that could be submitted to the WordPress.org repository today. Output is a full file tree with main plugin file, modular OOP classes (Admin, Frontend, Database, AJAX, REST), settings pages using the Settings API, Gutenberg blocks and shortcodes, REST endpoints, custom tables created via dbDelta(), nonce verification, sanitization/escaping/capability checks, prepared statements, asset enqueueing with conditional loading, internationalization with text domain, object-cache-aware queries, PHPDoc on every public method, a README.txt in WordPress.org format, and a complete uninstall.php cleanup script. Follows WordPress VIP coding standards and WordPress Theme/Plugin Review guidelines. Use this skill whenever the user asks to "write a WordPress plugin", "build a WP plugin", "scaffold a WordPress plugin", "create a custom WordPress plugin", "generate a plugin boilerplate", "make me a WordPress plugin that does X", "Word
angular-developer
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, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
artifacts-builder
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 - not for simple single-file HTML/JSX artifacts.
react-nextjs
React 19.2 + Next.js 16 development - Server Components, Cache Components, proxy.ts, View Transitions, App Router, TypeScript 6, and Tailwind CSS v4. Use when building frontend apps, creating components, or asking "how do I set up X?"
artifacts-builder
使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML artifacts 的工具套件。用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts - 不适用于简单的单文件 HTML/JSX artifacts。
senior-frontend
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. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
tailwind-expert
Use when designing, implementing, or refactoring Tailwind CSS systems for consistency, scale, and performance. Invoke for utility composition, design tokens, theme extension, responsive strategy, accessibility styling, and class management patterns.
update-dependencies
Orchestrates dependency management using pnpm. Checks for outdated packages, facilitates user-guided updates, prunes unused dependencies, and deduplicates the dependency tree. Ensures project integrity through automated linting, formatting, testing, and build verification.
epic-ui-guidelines
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
frontend-design
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.
tailwind-configuration
Use when setting up or customizing Tailwind CSS configuration, theme customization, plugins, and build setup. Covers tailwind.config.js setup and content paths.
template-ui
startup-saas-template UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on template-specific conventions (shadcn, folder placement, actions, shared types/hooks/stores).
web-development
Fundamentals of modern web development. Framework selection (React, Vue, Next.js), project architecture, state management, routing, build tools, and CSS strategy best practices.
page-scaffold
Use when the user invokes /page-scaffold followed by a description of a new page to add. This runs a site-aware brainstorming phase, produces a spec doc, then implements via frontend-design, screenshot-feedback, and code-navigation-system. Triggers on an agent call, "/page-scaffold", or any phrase relating to page scaffolding.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
brandkit
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
code-reviewer
Code review automation for TypeScript, JavaScript, Python, Go, Swift, Kotlin. Analyzes PRs for complexity and risk, checks code quality for SOLID violations and code smells, generates review reports. Use when reviewing pull requests, analyzing code quality, identifying issues, generating review checklists.
competitive-teardown
Analyzes competitor products and companies by synthesizing data from pricing pages, app store reviews, job postings, SEO signals, and social media into structured competitive intelligence. Produces feature comparison matrices scored across 12 dimensions, SWOT analyses, positioning maps, UX audits, pricing model breakdowns, action item roadmaps, and stakeholder presentation templates. Use when conducting competitor analysis, comparing products against competitors, researching the competitive landscape, building battle cards for sales, preparing for a product strategy or roadmap session, responding to a competitor's new feature or pricing change, or performing a quarterly competitive review.
database-schema-designer
Use when the user asks to create ERD diagrams, normalize database schemas, design table relationships, or plan schema migrations.
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
dispatching-parallel-agents
Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
executing-plans
Use when you have a written implementation plan to execute in a separate session with review checkpoints
experiment-designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.
finishing-a-development-branch
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
focused-fix
Use when the user asks to fix, debug, or make a specific feature/module/area work end-to-end. Triggers: 'make X work', 'fix the Y feature', 'the Z module is broken', 'focus on [area]'. Not for quick single-bug fixes — this is for systematic deep-dive repair across all files and dependencies.
full-output-enforcement
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
full-page-screenshot
Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page. Handles SPA scroll containers, lazy-loaded images, and very tall pages via Chrome DevTools Protocol with zero external dependencies.
gpt-taste
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
high-end-visual-design
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
image-to-code
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 prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
imagegen-frontend-mobile
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
imagegen-frontend-web
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. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
industrial-brutalist-ui
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
landing-page-generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.
reactive-rails-ui
Build smooth, reactive Rails UIs using Turbo Morphing, the View Transitions API, and Stimulus optimistic UI patterns. Activate when the user is working on a Rails app and wants responsive, SPA-like interactions without client-side state management.
api-design-reviewer
API Design Reviewer
email-template-builder
Email Template Builder
staging-ui-first
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
cloudflare-deploy
Set up and deploy Astro websites to Cloudflare Workers with custom domains. Use this skill when the user wants to deploy a site to Cloudflare, set up Cloudflare Pages/Workers, configure wrangler.toml, add a custom domain, fix deployment issues, troubleshoot DNS for a Cloudflare-hosted site, or verify a deployment is working. Also use when you see @astrojs/cloudflare, wrangler.toml, or .workers.dev in the project.
prd-generation
用户要求创建需求文档，创建PRD文档时，使用此技能生成
dev
Start the development servers (frontend + backend)
web-artifacts-builder
一套用于使用现代前端Web技术（React、Tailwind CSS、shadcn/ui）创建精细、多组件 claude.ai HTML 工件的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件 - 不适用于简单的单文件 HTML/JSX 工件。
deno
Rules for using Deno
accessibility-specialist
Expert in web accessibility, WCAG compliance, screen reader optimization, keyboard navigation, ARIA attributes, and inclusive design. Activates for accessibility improvements, WCAG compliance, a11y audits, and inclusive design tasks.
tailwind-configuration
Use when setting up or customizing Tailwind CSS configuration, theme customization, plugins, and build setup. Covers tailwind.config.js setup and content paths.
responsive-layout-snippets
Proporciona snippets de layout responsive profesionales (grid, flexbox, mobile-first) listos para copiar y pegar, sin necesidad de escribir CSS desde cero.
epic-ui-guidelines
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
wms-component-generator
KH_RnD WMS 프로젝트의 표준에 맞춰 React 컴포넌트(UI 및 대시보드 차트)를 생성하거나 수정하는 스킬.
modern-tailwind
Build clean, scalable UIs with Tailwind CSS using modern utilities and variants
monitoring_kerja_sg
Next.js project for monitoring kerja SG with Prisma ORM and PostgreSQL
staging-ui-first
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
Integration detected automatically from skill content. Some results may be false positives.