Design skills

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

design-blueprint

Produces a structured design specification (DESIGN.md + structural layout + Decision Trace) before any visual artifact is built — the "blueprint" phase that keeps AI-generated design from feeling templated. Use this skill whenever the user asks to design, plan, mock up, or restructure any visual output — PPT / slides / decks, landing pages, dashboards, posters, charts, infographics, marketing pages, UI components, prototypes, illustrations — even when they only say "make a slide about X" or "help me put together a page for Y". Also trigger on requests to critique or improve an existing design when the user wants a principled, spec-driven pass rather than just cosmetic tweaks. Do NOT trigger when the user has already handed you a completed DESIGN.md and only wants code implementation (defer to frontend-design or implement directly).

12.12k repo starsObserved in 2 repos
Design
GitHub

creative-tim-ui

Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.

11.96k repo starsObserved in 4 repos
Design
GitHub

frontend-v2-theming

Theming, design tokens, colors, and visual language in the RomM v2 frontend. Use when styling v2 components, picking colors, adding/using CSS variables, working with light/dark themes, or whenever you'd reach for a hex/rgba literal. Covers the token pipeline (src/v2/tokens/index.ts → build:tokens → tokens.css), the .r-v2 scope classes, the zero-hex-literal policy, and shared state semantics. Trigger on any color/theme/token work under frontend/src/v2/.

11.17k repo starsObserved in 1 repos
Design
GitHub

hive.chart-creation-foundations

Required reading whenever any chart_* tool is available. Teaches the one-tool embedding contract (call chart_render → live chart appears in chat AND a downloadable PNG lands in the queen session dir), the ECharts (data viz) vs Mermaid (structural diagrams) decision, the BI/financial-grade aesthetic baseline (no chartjunk, restrained palette, proper typography, single message per chart), and the canonical spec patterns for the 12 most-common chart types. Skipping this leads to 1990s-Excel charts, missing downloads, and the agent writing markdown image links by hand instead of letting chart_render drive the UI.

10.70k repo starsObserved in 2 repos
Design
GitHub

phoenix-design

Design system conventions for the Phoenix frontend — layout, dialogs, error display, BEM CSS class naming, and CSS design tokens. Use when building UI, naming CSS classes, creating or consuming tokens, handling errors, or designing dialog interactions in app/src/.

10.58k repo starsObserved in 1 repos
Design
GitHub

add-icon

Add new icons to the GitLens GL Icons font

9.87k repo starsObserved in 1 repos
Design
GitHub

ux-review

Use when reviewing a change set for user experience quality — traces user flows instead of code paths, validates that the implementation delivers the right experience against the goals doc's UX spec

9.87k repo starsObserved in 1 repos
Design
GitHub

page-layout

Add or update app page headers and layout using PageHeader and PageLayout. Use when creating a new page, fixing inconsistent headers, or migrating Service Map / Kubernetes / dashboard pages to the shared layout.

9.68k repo starsObserved in 1 repos
Design
GitHub

web-design-engineer

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.

9.67k repo starsObserved in 4 repos
Design
GitHub

keybase-style-analysis

Use when auditing Keybase client styles for helper opportunities, finding border/padding refactor sites, or discovering new style helper candidates.

9.23k repo starsObserved in 1 repos
Design
GitHub