Design

learning-design-review

by vishalsachdev

Review educational content against the Four Learning Design Pillars framework. Use when users want to evaluate course materials, lessons, tutorials, e-learning modules, or any instructional content for alignment with evidence-based learning design principles. Provides structured feedback with specific principle references (e.g., 1.1.1, 2.3.4) and actionable recommendations.

ios-ui-design-guide

by muheun

Apply iOS/SwiftUI design principles following Apple Human Interface Guidelines when building any iOS UI component. Only execute this when the current project is an iOS project and involves UI-related work. Use this skill for SwiftUI views, UIKit components, or iOS app development. Ensures HIG compliance with Clarity, Deference, and Depth principles, system colors with Dark Mode support, 8pt grid spacing, SF Pro typography with Dynamic Type, and native iOS interaction patterns. Prevents common anti-patterns like fixed text sizes, Dark Mode neglect, and Safe Area violations.

gas-review

by whichguy

Unified GAS code review - runs BOTH gas-code-review AND gas-ui-review. ALWAYS PREFER THIS over gas-code-review or gas-ui-review individually. This agent provides cross-file analysis and parallel execution. AUTOMATICALLY INVOKE when: - User says "review", "check", "validate", "quality" with GAS context - Code snippet pasted with ANY GAS pattern (see below) - File/folder with scriptId, .gs files, or .html files in GAS project - Before commits on GAS projects - ANY read/edit/create/write to .gs or .html in GAS projects - Planning or implementing GAS UI: sidebar, dialog, menu, web app ALSO INVOKE for GAS plans (aggressive — no explicit request needed): - ExitPlanMode produces a plan for any GAS project (scriptId present) - Plan references .gs files, .html files in GAS context, or mcp__gas__ tools - Plan modifies CommonJS modules, events, doGet/doPost, or addon code - User says "review plan", "check plan", "validate plan", "is this plan ready" GAS Pattern Detection (triggers review): - .gs code: _main, defineModule, require(), module.exports, events, global - .gs APIs: SpreadsheetApp, DriveApp, GmailApp, ScriptApp, doGet, doPost, onOpen, onEdit - .html code: HtmlService, <?=, <?!=, google.script.run, createGasServer, exec_api - .html patterns: createTemplateFromFile, setXFrameOptionsMode, IFRAME embedding GAS UI/UX topics (with GAS context): - sidebar, dialog, modal, toast, menu, form in GAS projects - Google Picker, file upload, web app deployment - /exec vs /dev URLs, ContentService, CORS NOT for: General JS/TS (use code-reviewer), non-GAS HTML (use standard review)

architect

by whichguy

Design system architecture and make technology decisions. Dispatches to system-architect agent for comprehensive design work. AUTOMATICALLY INVOKE when: - "design architecture", "what tech stack", "system design" - "how should I structure", "architecture for", "design system" - "technology recommendation", "compare frameworks" NOT for: Implementation (use /develop), task breakdown (use /tasks)

way-brand-identity

by way-platform

Write copy and use colors according to the Way brand.

ui-ux-pro-max

by ThrownLemon

"UI/UX design intelligence. 57 styles, 96 palettes, 50 font pairings, 25 charts, 11 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Search and apply design best practices."

schematica

by tester2024

"Schematica is a Python toolkit and interactive REPL for building Minecraft Java Edition schematics, exposed as an AI skill. Use this skill when the user asks to build, generate, design, or export Minecraft structures, schematics, .schem/.schematic/.litematic files, voxel maps, or 3D builds programmatically; when the user wants a procedural or creative toolkit for Minecraft builds; when the user mentions shapes, polygons, geometry, heightmaps, meshes, sessions, previews, Sponge schematics, MCEdit schematics, or Litematica; or when the user wants to script Minecraft map construction from Python or a REPL with undo/redo, block palettes, and multi-view PNG previews. Also use for tasks involving minecraft-data block catalogs, blockstate validation, trimesh/shapely geometry voxelization, or Perlin terrain. The AI agent is the creative driver: it composes shapes, blocks, and generators from this toolkit to realize the user's request."

frontend-design

by fairchild

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.

aesthetic

by zircote

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

distributed-systems-patterns

by adibhanna

Apply distributed-systems, messaging, and integration patterns to architectural decisions, message contracts, runbooks, and launch decisions for event-driven, microservice, queue, broker, saga, outbox, CDC, workflow, scaling, resilience, and multi-region work. Triggers include Kafka, RabbitMQ, SQS/SNS/EventBridge, Pub/Sub, NATS, Pulsar, Temporal, Step Functions, Debezium, CloudEvents, AsyncAPI, OpenTelemetry, plus idempotency, DLQs, retries, ordering, schema evolution, replay, sharding, backpressure, circuit breaking, autoscaling, SLOs, RFCs, and ADRs. Six commands produce durable artifacts; the skill does not generate implementation code or tests.

way-go-style

by way-platform

Guide for writing idiomatic, effective, and standard Go code. Use this skill when writing, refactoring, or reviewing Go code to ensure adherence to established conventions and best practices.

SKILL.md — OpenClaw Agent Skill

by freaxnx01

产品大牛转md

by monsignorlaw1015

"将产品大牛（pmdaniu.com）上托管的 Axure 原型文档转换为结构化 Markdown，供 AI 知识库（RAG）和团队共享使用。 支持单个文档链接转换，自动处理多页 sitemap、截图、Vision 理解、Markdown 输出。 触发场景：用户给出产品大牛链接（u.pmdaniu.com 短链或 pmdaniu.com 长链）并要求转为 Markdown 或导入知识库。

drip-cli

by TheBlueBear02

you want to add a complete style to your project with one command only

Accessibility Color Checker

by Eli-yu-first

"Validates color combinations against WCAG contrast ratios and suggests accessible alternatives"

flutter-skill

by thruthesky

"본 스킬은 Flutter 프레임워크로 앱을 개발하는 데 반드시 따라야 하는 UI/UX 디자인, 상태관리, 네트워킹, API 연동에 관한 가이드라인 제공합니다. 본 스킬은 선택적인 정보를 제공하는 것이 아니라 Flutter 앱 개발에 필수적인 지침을 제공하며 반드시 준수해야 할 사항들을 제공합니다. 개발자가 디자인, UI, UX, 디자인 효과, 상태관리, 라우팅, 네트워킹, API 연동에 관한 요청, 코믹디자인, Comic 관련 요청, 채팅, FCM, 푸시 알림, 메시지, 알림에 관한 요청이 있을 때 반드시 본 스킬을 사용해서 본 스킬이 제공하는 대로 작업을 수행해야 합니다. 각 스킬 문서에의 상단에는 반드시 따라야 할 Workflow 가 있습니다. 반드시 그 Workflow 를 따라야 합니다. 추가 트리거 키워드 - 딥링크, deep link, 캐싱, cache, 아이콘, FontAwesome, Isolate, 동시성, concurrency, 카카오톡, KakaoTalk, Crashlytics, 크래시 리포팅, 공유, share, share_plus, 공유 버튼 (project)"

Responsive Breakpoint Advisor

by Eli-yu-first

"Advises on responsive design breakpoints based on analytics data and device usage patterns"

creative-direction

by ozten

"Develop brand creative treatments from GTM data. Use when the user says 'creative direction', 'brand treatments', 'brand tone', 'creative brief', 'brand identity direction', or wants to develop visual/verbal brand direction from their GTM decomposition."

Branding

by eyadsibai

This skill should be used when the user asks about "branding", "brand identity", "logo design", "color palette", "brand guidelines", "visual identity", "brand voice", "style guide", or mentions brand-related decisions.

ui-design-iteration

by ozten

Iterates on data-intensive UI designs to improve scannability, hierarchy, accessibility, and systematization. Use when improving an existing UI, reviewing a design for UX issues, or transforming a functional-but-flat interface into a polished product.

frontend-design

by benshapyro

Create distinctive, memorable user interfaces that avoid generic AI aesthetics. Use when designing UI/UX, planning visual direction, or building pages and layouts.

frontend-design-ultimate

by kesslerio

Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.

structural-grid

by nabinkhair42

Structural Grid (Exposed Grid / Rail Layout) design system for modern SaaS landing pages. Use when building dark-themed marketing sites, landing pages, or SaaS product pages inspired by Linear, Vercel, Resend, and Planetscale. Provides CSS foundations, section patterns, component recipes, and responsive border logic for the visible-grid aesthetic.

psd-brand-guidelines

by krishagel

Apply Peninsula School District official brand colors, typography, and logos to artifacts