tikz-flowchart
Creates professional TikZ flowcharts with standardized themes, including Google Material-like and Anthropic-inspired options.
139 repo starsObserved in 1 repos
Design
Design skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
system-diagram-generator
Creates visual representations of system structure including architecture diagrams, data flow diagrams, deployment diagrams, and sequence diagrams. Use when Claude needs to visualize system components, infrastructure, data flows, or interactions. Supports Mermaid (recommended for Markdown/GitHub), PlantUML (for detailed UML), and Graphviz/DOT (for complex networks). Trigger when users request diagrams, visualizations, or ask to "show", "diagram", "visualize", or "map out" system architecture, infrastructure, data flows, or component interactions.
138 repo starsObserved in 2 repos
Design
material-theming
Best practices for Flutter theming using Material 3.
137 repo starsObserved in 2 repos
Design
website-design-system
Envilder website design system: themes, CSS variables, breakpoints, spacing, typography, and component patterns. Use when creating or editing Astro components, adding CSS, or styling website pages. Ensures visual consistency across retro and light themes.
137 repo starsObserved in 1 repos
Design
portfolio-flow
Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit analytics. Deploys to EdgeOne Pages with Edge Functions, KV Storage, JWT auth, and middleware. Use when a user wants to build a personal portfolio site, designer's online showcase, individual brand website, or multi-discipline design portfolio covering landscape, graphic, interior, industrial, or UX/UI design. Triggers include: "做一个设计师作品集" "做一个个人作品集网站" "建一个景观/平面/室内/工业/UX设计师作品集" "PortfolioFlow 建站" "生成作品集" "make a designer portfolio" "build a personal portfolio" "create a designer showcase site" "用 PortfolioFlow 做一个作品集".
136 repo starsObserved in 2 repos
Design
hugeicons-icons
Guidelines for finding and suggesting icons from the Hugeicons package.
136 repo starsObserved in 1 repos
Design
excalidraw-diagram-design
Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams. Use when generating architecture diagrams, flow diagrams, or any visual diagram via create_diagram or mermaid_to_excalidraw.
135 repo starsObserved in 2 repos
Design
pixel-art-storyboard
Convert short scene descriptions, book/album cover briefs, or 2-paragraph synopses into seamless-loop animated pixel-art covers rendered as self-contained HTML+canvas. Companion skill to pixel-art-studio. Use when the user asks to "make a cover for", "animated book cover", "looped pixel scene", "convert this story description to pixel art", "create ambient pixel animation", "обложка для книги в пиксель-арте", "анимированная обложка", "封面 像素画", "픽셀 아트 표지", or provides a short narrative/synopsis and wants a visual result. Covers: 5-element scene framework (Subject + Setting + Lighting + Palette + Motion), iconographic shorthand for symbolic accents, seamless loop techniques (phase-based parametric, sub-pixel breathing, LCM-clean parallax, deterministic particle systems), loop period selection by mood, three prompt registers (LLM agent / human artist / SDXL LoRA), single-HTML-file deliverable in dark-atmospheric style with parametrized canvas rendering. Generates the same engine pattern as the user's `Grass Field with City.html` reference (canvas + requestAnimationFrame + phase-derived parameters). Do NOT use for individual game sprites, character sheets, walk/attack cycles, or PNG/GIF sprite-sheet export; use pixel-art-studio for that (this skill makes looped HTML+canvas scene covers, not raster sprite assets).
135 repo starsObserved in 1 repos
Design
pixel-art-studio
Create production-quality pixel art and animations programmatically. Use when the user asks to "create pixel art", "draw a sprite", "make pixel animation", "generate sprite sheet", "convert image to pixel art", "pixelate this image", "make a pixel character", "пиксель арт", "пиксельная графика", "спрайт", "像素画", "像素艺术", "도트 그래픽", "픽셀 아트", "8-bit/16-bit/hi-bit style", "retro game art", "Aseprite-like output", "indie game sprite". Covers single-frame sprites, frame-by-frame animations, walk cycles, idle/attack/death animations, sprite sheets, GIF/APNG export, image-to-pixel-art preprocessing (downsample + quantize + dither), 30+ bundled palettes (NES, GameBoy, PICO-8, Endesga 32/64, DawnBringer 16/32, Sweetie 16, Resurrect 64, Korean 오방색/단청, Chinese 故宫/青花/五行, Russian Stoneshard-inspired), 5 dithering algorithms (Bayer 2/4/8, Floyd-Steinberg, Atkinson, Ordered, Blue Noise), automated quality scoring (orphan pixels, doublies, banding, pillow-shading, AI-slop detection), and Generator-Evaluator review via the pixel-art-reviewer agent. Do NOT use for seamless-loop animated scene/book/album covers as self-contained HTML+canvas; use pixel-art-storyboard for that (this skill outputs raster sprites and sprite sheets, not narrative loop-cover HTML).
135 repo starsObserved in 1 repos
Design
scientific-image-prompting
Use this skill whenever the user asks for a graphical abstract, mechanism illustration, study design schematic, concept explainer, scientific cover art, or any non-data academic image that may appear in a paper, report, poster, or slides. Always use this skill before image-generation for scientific illustrations. Do not use it for real data figures such as ROC curves, heatmaps, volcano plots, UMAPs, bar charts, or any plot that should come from validated data.
135 repo starsObserved in 1 repos
Design