GitHub Copilot Agent Skills

花叔Design——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审。根据任务embody对应专家（UX/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、做个HTML页面、做个可视化、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、设计方向、配色方案、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、长视频科普、voiceover、narration、5分钟讲清楚什么是X

You are an expert in AGUI (AgentUser Interaction Protocol), the open standard by CopilotKit for connecting AI agents to frontend UIs. You help developers stream agent actions, tool calls, state updates, and text generation to React components in realtime — enabling rich agent UIs where users see what the agent is think

Build distinctive, production-grade interfaces with Ralph Wiggum velocity. Ships working code — web or mobile — with modern CSS, fluid typography, purposeful motion, and zero generic AI aesthetics. Use when: 'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'fronten

Add strategic color to monochromatic or dull interfaces using oklch for perceptually uniform palettes. Generates harmonious color systems with automatic light/dark variants and accessible contrast ratios.

Autonomous UX copy improvement — rewrites unclear labels, error messages, microcopy, CTAs, tooltips, and onboarding text. Makes every word earn its place. Supports web and mobile.

Extract, consolidate, and modernize design tokens — oklch color scales, fluid spacing with clamp(), typography scales, motion timing, and shadow depths. Builds a systematic token architecture from scattered values. Use when: 'extract design tokens', 'create design system tokens', 'consolidate styles', 'modernize CSS va

Orchestrates the Claude Design ↔ Claude Code /design-sync handoff loop — imports your design system into the active project, validates generated UI components against design tokens, and round-trips edits back to Claude Design so prototypes always start from real components rather than approximations.

Extract and formalize a design system from existing UI code. Scans for every hardcoded color, font size, spacing value, border radius, and shadow across the codebase, deduplicates near-identical values, generates framework-appropriate tokens (CSS custom properties, Tailwind config, Flutter ThemeData, SCSS variables), b

Audit game user experience across HUD clarity, menu navigation, tutorial effectiveness, control responsiveness, camera systems, feedback loops, loading screens, and settings completeness. Detects game engine (Unity UGUI/UI Toolkit, Unreal UMG, Godot Control, web-based), maps all UI screens and input contexts, evaluates

Runtime sweep that catches mobile-layout bugs: content clipped off the edge of a phone screen, touch targets smaller than 44×44px, text inside a button or input that overflows its visible width, and modals that extend past the viewport. Loads the running web app in headless Chromium at 360px / 390px / 768px and reports

Audit and fix responsive design issues across all breakpoints. Scans for fixed widths that cause mobile overflow, missing media query variants, non-responsive images, undersized touch targets below 48px, unreadable typography, and horizontal scroll violations. Auto-detects framework (Flutter, Tailwind, React, Vue, Angu

Polishes UI primitives one at a time using 2026 research-backed patterns — adds loading/icon states to buttons, replaces inline skeletons with primitives, adds secondary actions to errors, ensures 48px touch targets and visible focus indicators, applies a standard motion token ladder. Use when: 'make the UI feel more p

Autonomous design effectiveness evaluation — visual hierarchy, information architecture, emotional resonance, and craft quality. Produces actionable feedback with specific before/after recommendations.

Dual-mode UX quality skill — runs a heuristic/accessibility/motion audit on the current codebase, or validates implementation against design mockups. Fixes all issues found and commits.

Add moments of joy — success celebrations, subtle hover reactions, personality in empty states, easter eggs, and contextual surprises. Elevates functional to memorable without being annoying.

Design or improve onboarding flows, empty states, and first-time experiences. Progressive disclosure over feature dumps. Contextual guidance over tutorials. Makes users successful in minutes.

Turn a design into production-quality frontend code: extract a design system with tokens and components, make layouts responsive across breakpoints, add dark mode with WCAG-compliant theming, then run a UX audit to validate everything. Use when implementing UI from Figma, adding theming, making an app responsive, or ov

Set up internationalization by extracting all hardcoded user-facing strings to locale files. Auto-detects framework (Flutter, Next.js, React, Vue, Angular, iOS, Android) and configures the appropriate i18n library (react-intl, next-intl, vue-i18n, flutter_localizations, NSLocalizedString, strings.xml), generates namesp

HTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design

Reduce visual intensity without losing design quality. Softens aggressive colors, calms excessive animations, balances overwhelming layouts, and restores visual breathing room.

Make interfaces bulletproof — error boundaries, loading states, empty states, text overflow, i18n readiness, offline handling, and every edge case that breaks in production. Makes interfaces resilient. Use when: 'harden the UI', 'add error states', 'handle edge cases', 'add loading states', 'make it production ready',

Normalize a codebase to its design system — replace hardcoded values with tokens, enforce consistent component usage, align spacing/typography/color with the established system. Makes every screen look like it belongs. Use when: 'normalize the UI', 'enforce design system', 'make it consistent', 'align to design tokens'

Autonomous performance optimization for interfaces — content-visibility, CSS containment, scroll-driven animations replacing JS, view transitions replacing SPA transitions, image optimization, and bundle trimming. Use when: 'optimize UI performance', 'speed up the frontend', 'reduce bundle size', 'improve web vitals',

Final autonomous quality pass before shipping. Fixes alignment, spacing, consistency, typography hierarchy, color harmony, motion timing, and every micro-detail that separates good from great. The last 10% that takes 90% of the craft. Use when: 'polish the UI', 'make it pixel perfect', 'final design pass', 'fix visual

One-time autonomous design context discovery. Scans the codebase to extract design tokens, typography, colors, spacing, brand patterns, and tech stack, then writes a Design Context section to CLAUDE.md. Zero questions asked. Use when: 'setup design', 'design context', 'design tokens', 'brand discovery', 'design system

Strip interfaces to their essence — remove unnecessary complexity, reduce visual noise, simplify navigation, and eliminate redundant UI elements. Great design is simple, powerful, and clean.

Comprehensive autonomous design quality audit across accessibility (WCAG 2.2), performance, theming, responsive/adaptive design, and anti-pattern detection. Produces a prioritized report with severity ratings and fix recommendations. Use when: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI qu

Guide users through configuring key MongoDB MCP server options. Use this skill when a user has the MongoDB MCP server installed but hasn't configured the required environment variables, or when they ask about connecting to MongoDB/Atlas and don't have the credentials set up.