Design skills

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

agf-design-discipline

Use when uiux-designer is about to produce a design spec (spec.md) or static HTML prototype, or frontend-dev is about to build UI from a design. Provides the anti-AI-slop design discipline layer — Brief Inference (Design Read), three aesthetic dials tuned for product UI, AI Tells blacklist with overrides, mechanically-checkable Pre-Flight. Sits above the token layer (DESIGN.md) and mechanical review (code-reviewer); does not redeclare tokens or guide non-shadcn design systems. Inspired by taste-skill, cropped for AGF product UI per ADR-013.

742 repo starsObserved in 2 repos
Design
GitHub

Chart Visualization

Render research-style PNG charts for trends, comparisons, distributions, and scatter relationships when a visual materially improves the answer

742 repo starsObserved in 1 repos
Design
GitHub

Image Generation

Generate dynamic portfolio screenshots, stock-analysis infographics, or general-style images. Real data must be fetched first

742 repo starsObserved in 1 repos
Design
GitHub

moonbridge-webui-design

Moon Bridge webui design and component rules. Use whenever changing files under webui/src that affect UI structure, controls, styling, theme tokens, layouts, or interaction behavior.

739 repo starsObserved in 1 repos
Design
GitHub

signup-login-page-generator

When the user wants to create, optimize, or audit signup and login pages. Also use when the user mentions "signup page," "login page," "registration page," "auth page," "sign up form," "create account," "student discount at signup," or "auth subdomain." For indexing/auth URLs, use indexing.

736 repo starsObserved in 2 repos
Design
GitHub

color-tools

Work with colors: convert between HEX/RGB/HSL, build palettes, find complementary/analogous colors, and check text contrast for accessibility (WCAG). Use when users ask to convert a color, lighten/darken it, build a color scheme, or check if a color combo is readable. Triggers on mentions of color, colour, hex, rgb, hsl, palette, contrast, complementary, shade, 颜色, 配色, 色值, 对比度, 调色板.

730 repo starsObserved in 1 repos
Design
GitHub

designing-bench-task

Use when designing a new bench_env task suite, adding several new tasks to an existing suite, or critiquing a task-set proposal for a mobile-gym App — before any `class FooTask(...)` is written under `bench_env/task/`.

721 repo starsObserved in 1 repos
Design
GitHub

ad-design

Generate DESIGN.md at the repo root by scanning existing design tokens (Figma export, tailwind.config, tokens.json, stylesheet) and synthesizing W3C-compatible YAML frontmatter + Markdown rationale per the Google Labs design.md spec. Use when the user wants to bootstrap, scaffold, generate, document, or audit DESIGN.md (visual contract — colors, typography, spacing, motion). Frontend projects only.

708 repo starsObserved in 2 repos
Design
GitHub

ui-web

Web UI - glassmorphism, Tailwind, dark mode, accessibility

701 repo starsObserved in 3 repos
Design
GitHub

user-journeys

User experience flows - journey mapping, UX validation, error recovery

701 repo starsObserved in 2 repos
Design
GitHub