Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

interaction-review

Use to evaluate or design a user interaction flow — states, edge cases, microinteractions, motion, and feedback patterns.

359 repo starsObserved in 1 repos
Design

ux-copy

Use to write or review microcopy — CTAs, error messages, empty states, confirmation dialogs, tooltips, onboarding text.

359 repo starsObserved in 1 repos
Design

visual-system-review

Use to evaluate visual consistency, hierarchy, and design-system adherence — typography, color, spacing, density, tokens.

359 repo starsObserved in 1 repos
Design

pymol-visualization

Generate publication-quality molecular visualization images using PyMOL. Use this skill whenever the user mentions PyMOL, molecular visualization, protein rendering, structure figures, PDB visualization, ray tracing molecules, or wants to create images of proteins, ligands, binding sites, protein-protein interactions, or any biomolecular structure. Also trigger when the user wants to: make a figure of a crystal structure for a paper or presentation; render a protein surface; show binding pockets; visualize protein-ligand interactions; create Goodsell-style illustrations; produce cartoon representations with highlighted residues; compare multiple structures side by side; or generate any molecular graphics output — even if they don't mention "PyMOL" by name. Trigger for any request involving PDB files, molecular surfaces, cartoon ribbons, stick models, electron density, or structural biology figures.

357 repo starsObserved in 1 repos
Design

review-cmsds-accessibility

Reviews CMS Design System (CMSDS) accessibility guidance and accessibility testing documentation for components, patterns, layouts, and foundations. Use when users ask for "CMSDS accessibility guidance", "review CMSDS accessibility", "CMSDS accessibility testing", or "fix CMSDS accessibility issues".

357 repo starsObserved in 1 repos
Design

ui-aesthetics

Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use in any supported agent or IDE when generating, reviewing, or refactoring UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated, or when the user asks for a cleaner, more premium, more polished, more minimal, more refined, or more product-grade interface.

353 repo starsObserved in 1 repos
Design

hatch-pet-v2

Create, repair, validate, visually QA, and package Codex-compatible v2 animated pets from character art, generated images, company or prospect brand cues, or visual references. Use for any new Codex pet, custom mascot, non-pixel pet style, brand-inspired pet, existing-pet repair, or 8x11 spritesheet workflow requiring all 9 standard animation rows, 16 look directions, deterministic assembly, QA artifacts, and spriteVersionNumber 2 packaging.

350 repo starsObserved in 1 repos
Design

banner-creator

各種SNS・広告プラットフォーム向けのバナー/クリエイティブを生成するスキル。 X, Facebook, Instagram, PRTimes, YouTube, LINE, Web広告に対応。 「バナーを作って」「広告画像を生成」「SNS用の画像」「クリエイティブ制作」等のリクエストで発動。

346 repo starsObserved in 1 repos
Design

data-visualization

Python (matplotlib, seaborn, plotly) でデータ可視化を行うスキル。 「グラフを作って」「チャート作成」「データを可視化して」等のリクエストで発動。 チャート選定、デザイン原則、アクセシビリティ対応も含む。

346 repo starsObserved in 1 repos
Design

lp-designer

LP/HP作成ワークフロー。ヒアリング→訴求整理→WF→Pencilデザイン→HTML実装→Vercelデプロイの全フローをガイド。 「LPを作って」「ランディングページ作成」「HPデザイン」「Webページ制作」等のリクエストで発動。

346 repo starsObserved in 1 repos
Design