Design skills

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

mermaid-skill

Generate Mermaid diagrams (.mmd) and export to PNG/SVG/PDF using mmdc CLI or Kroki API. USE THIS SKILL when user mentions diagram, flowchart, sequence diagram, class diagram, ER diagram, state machine, architecture, visualize, git graph, 画图, 架构图, 流程图, 时序图. PROACTIVELY USE when explaining ANY system with 3+ components, API flows, authentication sequences, class hierarchies, database schemas, or state machines. Supports 12+ diagram types with fully automatic layout.

141 repo starsObserved in 3 repos
Design
GitHub

android-material-guidelines

Use when designing, reviewing, or implementing Android UI or features for phones, tablets, foldables, ChromeOS, desktop windowing, Wear OS, Android TV, Android for Cars, Android XR, widgets, Jetpack Compose, Material 3, Material Design, adaptive layouts, dynamic color, icons, dark theme, edge-to-edge UI, accessibility, or when porting web or iOS features to Android. Ensures current official Android Developers and Material Design guidance is checked and Android conventions are preferred over copying other platforms.

141 repo starsObserved in 1 repos
Design
GitHub

pr-walkthrough

Generate a local static interactive D3 walkthrough of a pull request. Use when the user wants a zoomable PR map, graph/canvas PR orientation, or alternate visualization of PR system components, data flow, code dependencies, and user actions.

141 repo starsObserved in 1 repos
Design
GitHub

beava-design

Use this skill to generate well-branded interfaces and assets for beava (beava.dev, an open-source single-binary feature server for stream processing), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

140 repo starsObserved in 1 repos
Design
GitHub

parameter-design

MUST READ before creating or designing custom parameters on any COMP: pages, styles, ranges, help text, naming, ParGroup gotchas.

140 repo starsObserved in 1 repos
Design
GitHub

visual-aesthetics

MUST READ before building or refining rendered visual output in TouchDesigner: generative art, VJ visuals, shaders, scenes, renders, projections, or anything shown on screen. Principles, verified TD recipes, and named looks for composition, camera, lighting, value, color, contrast, motion, materials, and finishing.

140 repo starsObserved in 1 repos
Design
GitHub

hf-architecture-tikz

Draw Sebastian-Raschka-gallery-style TikZ architecture diagrams for any HuggingFace decoder-only LLM, with per-block parameter formulas and concrete numbers. Supports MHA, GQA, MLA, DeepSeek-V4-Flash (Hyper-Connections + Sparse Attention with learned indexer), dense and MoE FFNs (incl. hash routing), and MTP heads. Use when the user asks to visualize / diagram / illustrate a transformer or LLM architecture (DeepSeek, Qwen, Llama, Mistral, gpt-oss, etc.), wants a Raschka-style figure, or wants a TikZ/LaTeX rendering of an HF model.

139 repo starsObserved in 1 repos
Design
GitHub

html-flowchart-anthropic

Create and revise pure HTML/CSS flowcharts using an Anthropic-inspired design language. Use when Codex needs to produce process diagrams, decision trees, pipelines, or system flows that should share warm ivory backgrounds, transparent dashed grouping containers, pastel node fills, SF Pro-style sans-serif labels, smaller rounded corners, quiet orthogonal connectors, and theme-tinted text hierarchy in standalone `.html` outputs.

139 repo starsObserved in 1 repos
Design
GitHub

openai-dotcom-viz

Build figures in OpenAI's blog / research / system-card "dotcom" visual style — both (a) bar charts (monochrome bars with a darker same-hue stroke, rounded corners, a black y-axis with outward ticks and no gridlines, circle legend markers left-aligned to the y-axis, value labels above bars, angled category labels) and (b) flow / process diagrams (rounded boxes, monospace uppercase pills, pink highlights, thin open-chevron "arrow" connectors with rounded corners, dashed = negative branch). Everything uses the real OpenAI Sans font and is emitted as self-contained HTML/SVG with zero dependencies. Use this whenever the user wants a chart, pipeline/flow diagram, or figure that looks like OpenAI's website / posts / papers, asks to reproduce an OpenAI figure, or is building a deck or page in an OpenAI-flavored style. Prefer this over generic charting (matplotlib/Chart.js/Recharts) or generic diagram tools (Mermaid) when the aesthetic should match OpenAI.

139 repo starsObserved in 1 repos
Design
GitHub

reorganise-comfy-workflow

Reorganise an existing ComfyUI workflow layout without changing runtime behavior. Use when the user asks to clean up a messy graph, make it readable, regroup or align nodes, or run the explicit `/reorganise_comfy_workflow` agent route.

139 repo starsObserved in 1 repos
Design
GitHub