Design skills

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

clearshot

Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.

131 repo starsObserved in 1 repos
Design
GitHub

customize-response-style

Guide for customizing OhMyCode's terminal output style and rendering. Use when user wants to change colors, formatting, or how responses look in the terminal.

131 repo starsObserved in 1 repos
Design
GitHub

hallmark

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.

130 repo starsObserved in 1 repos
Design
GitHub

react-layout

Use when laying out a page, card header, or action row with `BAIFlex`, choosing spacing values, or migrating `<Space>` / raw `<Flex>` to `BAIFlex`. Covers gap token scale, `token.*` spacing, `BAICard` extra alignment, and responsive grid patterns.

130 repo starsObserved in 1 repos
Design
GitHub

charting-vega-lite

Create interactive data visualizations using Vega-Lite declarative JSON grammar. Supports 20+ chart types (bar, line, scatter, histogram, boxplot, grouped/stacked variations, etc.) via templates and programmatic builders. Use when users upload data for charting, request specific chart types, or mention visualizations. Produces portable JSON specs with inline data islands that work in Claude artifacts and can be adapted for production.

129 repo starsObserved in 4 repos
Design
GitHub

extract-design-system

Extract design primitives from a public website and generate starter token files for your project.

129 repo starsObserved in 4 repos
Design
GitHub

charting

Select the right Python charting library (seaborn, matplotlib, graphviz) and produce publication-quality static visualizations. Use when creating charts, plots, graphs, diagrams, heatmaps, visualizations from data, or when choosing between matplotlib/seaborn/graphviz. Also triggers for network diagrams, flowcharts, dependency trees, state machines, and entity-relationship diagrams. For interactive browser-rendered charts or uploaded data exploration, defer to charting-vega-lite instead.

129 repo starsObserved in 2 repos
Design
GitHub

ui-assets

Use when maintaining shared ui-polish references, helper scripts, demo assets, or bridge documents that support the ui-polish bundle.

129 repo starsObserved in 1 repos
Design
GitHub

ui-core

Use when you need the non-negotiable ui-polish rules for UI direction, color, copy, spacing, readability, button feedback, and layout restraint before making interface decisions.

129 repo starsObserved in 1 repos
Design
GitHub

ui-desktop

Use when designing or reviewing desktop application windows, tool panels, or system-flavored interfaces for Electron, Tauri, or other desktop shells.

129 repo starsObserved in 1 repos
Design
GitHub