Design skills

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

ui-ux-feedback

Capture UI and UX feedback plus feature requests. Use when a customer shares design feedback or asks for product changes.

498 repo starsObserved in 2 repos
Design

UISkills

Opinionated constraints for building better interfaces with agents. USE WHEN building UI components, React interfaces, frontend work, or any user-facing interface development.

498 repo starsObserved in 2 repos
Design

utopia-grid-layout

CSS Grid utilities using Utopia fluid spacing. Reference for the grid variables and utility classes defined in this project.

498 repo starsObserved in 2 repos
Design

ux-animation-motion

Animation patterns using Anime.js v4 for UI feedback, transitions, and celebrations. Use when implementing hover effects, transitions, loading animations, or gamification feedback. Includes reduced motion handling. (project)

498 repo starsObserved in 2 repos
Design

ux-clarity-refactor

General UX/UI refactor patterns for dense information products, including layout compression, view-mode clarity, selection-to-results flow, research workspace design (non-chat), and enforcing a no-emoji UI policy. Use when restructuring existing UIs for clarity while preserving all features.

498 repo starsObserved in 2 repos
Design

ux-flow-chooser

判断と再設計のためのUIフロー選択ガイド。タイムラインUIとトポロジーUIのどちらを選ぶか、またはハイブリッドにするかを、ヒアリング質問→判定→パターン提示の手順で決める。情報の鮮度・塊化可能性・優先度分布・並行コンテキスト・デバイス制約・滞在時間を聞き取り、タイムライン⇔トポロジー変換のチェックリストと事例を提供する。

498 repo starsObserved in 2 repos
Design

ux-flow-creation

Generate user experience flow documentation following the UX-FLOW template. Use when designing UI flows, documenting user journeys, or when the user asks for UX documentation.

498 repo starsObserved in 2 repos
Design

ux-iconography

Icon usage patterns using Material Symbols v3. Use when adding icons to buttons, navigation, or status indicators. Covers sizing, accessibility, animations, and color integration with project tokens.

498 repo starsObserved in 2 repos
Design

Video Content Accessibility

Accessibility guidelines for video content including contrast, timing, and readable typography. Use this when designing video layouts, choosing colors/fonts, setting animation durations, or ensuring emoji and visual elements are accompanied by text alternatives.

498 repo starsObserved in 2 repos
Design

visual-asset-generator

Generate research visuals (figures, diagrams) with constraints, evidence alignment, and confidence ceilings.

498 repo starsObserved in 2 repos
Design