设计
UI/UX 方向、视觉设计与设计系统
user-preference-respect
Owl-Listener
"Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings."
flexible-typography
Owl-Listener
"Design typography systems that adapt to user needs — scaling, spacing, and font preferences. Use when designing type systems, setting font sizes, defining line heights, or reviewing text readability across conditions. Triggers on: typography, font size, line height, letter spacing, word spacing, text scaling, dyslexia font, readable font, type scale, font units, rem, em, px, reading difficulty."
information-density
Owl-Listener
"Design interfaces where information density can be adjusted to suit different cognitive needs and preferences. Use when designing dashboards, data tables, feeds, inboxes, settings panels, or any interface with variable amounts of content. Triggers on: information density, too dense, too sparse, compact view, comfortable view, spacing, whitespace, data density, content density, crowded, breathing room."
simplified-views
Owl-Listener
"Design simplified and reduced-complexity views of interfaces for users who need less visual noise and fewer options. Use when designing settings, dashboards, complex tools, or any interface that could benefit from a simpler mode. Triggers on: simplified view, simple mode, easy mode, basic view, reduce complexity, less clutter, overwhelmed, too many options, beginner mode, essential view, focus mode."
contextual-help-design
Owl-Listener
"Design help systems and support patterns that work for people with cognitive disabilities. Use when designing help content, tooltips, onboarding, FAQs, support flows, documentation, or any context where users need guidance. Triggers on: help, support, FAQ, tooltip, onboarding, tutorial, guidance, stuck, confused, documentation, instructions."
compliance-mapping
Owl-Listener
"Map design decisions to accessibility standards and legal requirements. Use when documenting WCAG conformance, preparing for audits, tracking compliance status, or when legal or procurement requires accessibility documentation. Triggers on: WCAG, compliance, conformance, audit, VPAT, accessibility statement, legal requirement, ADA, EAA, European Accessibility Act, Section 508, EN 301 549, accessibility standard, success criterion."
alt-text-design
Owl-Listener
"Write meaningful alternative text for images, charts, diagrams, and visual content. Use when creating or reviewing alt text, image descriptions, chart summaries, or any visual content that needs a text equivalent. Triggers on: alt text, image description, alternative text, screen reader, decorative image, chart description, infographic, data visualisation, complex image, meaningful alt."
stakeholder-communication
Owl-Listener
"Communicate accessibility decisions, requirements, and value to stakeholders who aren't accessibility specialists. Use when presenting accessibility work to leadership, product managers, engineers, or anyone who needs to understand why accessibility decisions matter. Triggers on: stakeholder, business case, justify accessibility, explain accessibility, leadership, executive, ROI, why accessibility, cost of accessibility, persuade, convince, accessibility presentation."
ifq-design-skills
peixl
Agent-native design engine that makes AI do more useful work: route the prompt, fork a template, weave IFQ ambient craft, verify the artifact, and only install export tooling when requested. One prompt -> shippable HTML, with optional MP4 / GIF / PPTX / PDF / SVG. Triggers include prototype, hi-fi mockup, slide deck, motion demo, infographic, dashboard, whitepaper, changelog, business card, social cover, brand from scratch, design critique, mp4/gif export, 60fps, keynote, PPTX, A-vs-B benchmark. Do not use for production web apps, SEO-critical sites, backend systems, or pure copy edits.
ifq-design-skills
peixl
"Use this skill whenever the user asks for an HTML-first visual design deliverable or design judgment: interactive prototype, slide deck, motion demo, infographic, dashboard, landing page, whitepaper, changelog, business card, social cover, brand system, design critique, multi-variant exploration, or export to MP4, GIF, PPTX, PDF, or SVG. It is optimized to make AI agents do the routing, template selection, verification, and export prep so humans spend less time prompt-engineering. Do not use for production web apps, SEO sites, backend systems, or pure copy edits."
skill-development
MarBlanco
This skill should be used when the user wants to "create a skill", "add a skill to plugin", "write a new skill", "improve skill description", "organize skill content", or needs guidance on skill structure, progressive disclosure, or skill development best practices for Claude Code plugins.
frontend-design
ocrbase-hq
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-design-guidelines
ocrbase-hq
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
aesthetic-excellence
apexscaleai
Use when improving visual quality of existing UI - applies 2025 design principles for hierarchy, spacing systems, color theory, and typography excellence to elevate aesthetic appeal and user experience
design
howells
Create distinctive, non-generic UI designs with aesthetic direction and ASCII wireframes. Use when asked to "design the UI", "create a layout", "wireframe this", or when building UI that should be memorable rather than generic. Avoids AI slop patterns.
detect-ux
parhumm
Repo-driven UX audit with journey mapping and heuristic-based findings. Use when evaluating user experience quality.
detect-design
parhumm
Design system detection with drift findings and evidence blocks. Use when auditing design system consistency.
ppt-creater-skill
Yu-0312
把凌亂的文件（會議逐字稿、多場會議混在一起的檔案、實驗／數據報告、論文、財報）變成可直接上台的設計感簡報的工作流。 Use this skill whenever the user wants to turn a document, meeting notes, transcript, report, spreadsheet, or raw data into slides / a presentation / a deck — 包括他們說「做成簡報」「整理成投影片」「幫我做一份簡報」「把這份報告變簡報」 「turn this into a presentation / slides / a deck」，即使沒有明說步驟。 也適用於「只有主題沒有素材」（如「幫我做一份 AI 發展趨勢的簡報」）——會先做主題研究再進入流程。 也適用於跨 session 銜接（「繼續做 xxx 的簡報」「接上次」）——會定位進度再銜接。 它會先清點內容並把敏感資料（姓名、薪資、競業條款、個資）攔進備援區、停下來等使用者確認範圍， 再把「有設計感」翻成具體色碼與版型規格、生成單一 HTML 簡報， 並對任何圖表用原始數據重算統計值、抓出原文寫錯的數字。 Also use it whenever the user needs figures or charts from a report recomputed from the source data rather than trusted blindly. 也支援 Keynote Magic Move 式的 Morph Transition 轉場（使用者說「Magic Move」「Morph」「物件飛過去的轉場」時）。
go-google-style-decisions
metalagman
Expertise in Go programming decisions according to the Google Go Style Guide. Focuses on specific choices for naming, error handling, and language usage.
go-google-style-guide
metalagman
Expertise in Go programming according to the Google Go Style Guide. Use when the user needs to write, refactor, or review Go code for clarity, simplicity, and maintainability. This skill ensures adherence to Google's official Go idioms, formatting, and the "Least Mechanism" principle.
frontend-design
parhumm
Create distinctive, production-grade frontend interfaces with bold design choices and working code. Use when designing UI components.
go-uber-style-guide
metalagman
Use this skill to write, refactor, or review Go code according to the Uber Go Style Guide. It ensures strict adherence to correctness, safety, and idiomatic patterns.
ios-glass-ui-designer
heyman333
Redesign mobile app UI to feel unmistakably iOS-native with modern Apple-like glass materials (translucency, blur, depth). Use this skill when designing iOS-first interfaces that leverage iOS material hierarchy (ultra-thin/regular/thick), SF Pro typography, safe-area patterns, and system component behaviors—without overdoing glass effects.
figrefer
Takazudo
Read the currently selected Figma element and work with it. Use when: (1) User says 'figrefer', 'figma refer', 'check my figma selection', (2) User wants to implement or analyze a design selected in Figma desktop app, (3) User says 'what am I selecting in figma', 'implement this figma design'