Design skills

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

code-map-visualization

Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow), drawing tens of thousands of cells on Canvas2D + WebGL/deck.gl inside a 16ms frame budget, placing and decluttering labels, GPU or spatial-index picking, camera animation and level-of-detail crossfades, and keyboard plus screen-reader accessibility for the canvas. Sits on top of geohash-spatial-code-maps, which owns the geohash encoding, projection, tiling, and navigation math. Also covers nature-inspired rendering — Voronoi, circle packing, phyllotaxis, metaball hulls, edge bundling. Trigger even when the user does not say "visualisation" — if the work involves drawing, colouring, labelling, animating, or making navigable a code map, spatial heatmap, or large cell/point layer on the web, this is the skill.

180 repo starsObserved in 1 repos

Design

GitHub

diagram-quality

PlantUML diagram quality on the agent-uml collaborative canvas — three tiers: rendering safety (syntax that prevents HTTP 400 blank canvas), conversation mechanics (when to push a version vs ask a question, what to write in the message parameter), and design effectiveness (decomposition thresholds, cross-diagram traceability, export readiness). Trigger whenever calling agent-uml MCP tools (design_create, diagram_upsert, design_feedback, design_export) — even when the task seems simple, since a missing `as alias` makes elements un-annotatable and a skinparam mismatch makes diagrams unreadable.

180 repo starsObserved in 1 repos

Design

GitHub

expo-design-system

Airbnb-DLS-aligned design system engineering for Expo / React Native apps targeting both web and native iOS, built on Unistyles v3, Reanimated, Skia, and FlashList. Use whenever building, reviewing, or refactoring shared UI — design tokens, theming, variant-driven component APIs, typography, spacing, cross-platform web/iOS parity, native-feel performance, or complex surfaces like calendars and drawing canvases (examples use a clinic app). Covers token architecture, theming, component API contracts (variants over style props), web/iOS parity (Unistyles `_web` hover/focus/cursor, Platform splits, one shared theme), the Unistyles styling engine, and governance. Trigger even when the user does not say "design system" but is creating or changing reusable React Native components, tokens, theme code, or making a component behave natively on both web and iOS. Teaches how to BUILD the design system; pair with expo-react-native-coder for features and expo-ios-hig for iOS native-feel decisions.

180 repo starsObserved in 1 repos

Design

GitHub

expo-ios-hig

Expo / React Native iOS interface conforming to Apple Human Interface Guidelines (iOS 26) — native navigation (Expo Router native stack and tabs), platform controls (Alert, ActionSheetIOS, SF Symbols via expo-symbols), safe areas, dark mode, Dynamic Type, haptics, Liquid Glass, accessibility, and 60fps motion. Covers architecture and styling decisions made in React Native/TypeScript; for the @expo/ui SwiftUI component API use the expo-ui skill, and for native Swift use ios-hig. Trigger when building, reviewing, or refactoring such an app — even when the user does not say "HIG" or "native feel" but is writing TSX screens, navigation, lists, forms, or styling for iOS in Expo.

180 repo starsObserved in 1 repos

Design

GitHub

ios-design-system

Clinic-architecture-aligned iOS design system engineering for SwiftUI (iOS 26 / Swift 6.2) covering token architecture, color/typography/spacing systems, component style libraries, asset governance, and theming. Enforces @Equatable on views and keeps design-system usage compatible with Feature-to-Domain+DesignSystem boundaries. Use when building or refactoring DesignSystem infrastructure for the clinic modular MVVM-C stack.

180 repo starsObserved in 1 repos

Design

GitHub

ios-taste

Designs iOS 18+ SwiftUI experiences with real taste — starting from user goals, not pixels. Use this skill whenever the user asks you to build SwiftUI views, screens, or experiences. Trigger when the user says "build a settings screen", "create a detail view", "design this properly", "I want this to feel like a native app", or any SwiftUI UI task. Also trigger when reviewing SwiftUI code for design quality, or when the user says the output "looks like a demo" or "feels generic." When building any user-facing SwiftUI view, lean toward triggering this skill.

180 repo starsObserved in 1 repos

Design

GitHub

ios-ui-refactor

Principal-level SwiftUI UI review and refactoring patterns for iOS 26 / Swift 6.2 clinic-architecture apps, grounded in Rams, Segall, and Edson principles. Use when auditing or improving existing SwiftUI screens, transitions, animations, and visual systems while preserving brand identity and respecting clinic Domain/Data/App boundaries.

180 repo starsObserved in 1 repos

Design

GitHub

phantom-motion

交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词，通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器，实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。当用户提到「幻象」「phantom」「motion graphic」「代码动画」「HTML 动画」「视觉叙事」「动态视觉」「生成动画」「motiongraphic」或表达「生成一个关于 XXX 的动画」「做一个 XXX 的视觉体验」意图时触发此技能。（支持 MIT 协议的 SVGL 库，内置 1500+ 品牌 Logo 资产）

180 repo starsObserved in 1 repos

Design

GitHub

web-rules

Strict design and UX rules for React 19 + Next.js 16 (App Router) + Tailwind CSS 4. Covers navigation, interaction design, accessibility, user feedback, UX patterns, and visual design. Use when designing, building, or reviewing any user-facing web feature on this stack. Trigger when the user asks to "build a settings page", "add a dialog", "design this form", "review for accessibility", "fix dark mode", or any Next.js App Router / React 19 / Tailwind UI task. Also trigger when the user says output "looks off", "isn't accessible", or "doesn't follow best practices."

180 repo starsObserved in 1 repos

Design

GitHub

web-taste

Designs React 19 + Next.js 16 + Tailwind CSS experiences with real taste — starting from user goals, not pixels. Use this skill whenever the user asks you to build a page, screen, form, dashboard, or any user-facing web UI. Trigger when the user says "build a settings page", "create a dashboard", "design this properly", "I want this to feel premium", "make it look like Linear/Stripe/Vercel", or any Next.js App Router / React / Tailwind UI task. Also trigger when reviewing UI for design quality, or when the user says the output "looks like a wireframe", "feels like Bootstrap", or "looks AI-generated." When building any user-facing web view, lean toward triggering this skill.

180 repo starsObserved in 1 repos

Design

GitHub