skill
skills-design
21 agent skills for visual and product design: design systems, UX auditing, accessibility, and brand identity.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/poorvith-mp/skills-design itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
Skills do not use an MCP config. Follow the steps in the README below.
README
synced Oct 22, 2026skills-design
Design skills collection for Claude Code, Gemini App, Gemini CLI, Antigravity, Cursor, Codex, Cline, Roo Code, and npx skills — part of Skillary by Poorvith M P.
- Version:
v4.1.0 - Total Skills:
21 - License: MIT
- Hub Repository: poorvith-mp/skillary
Install
Install the entire collection via npx skills:
npx skills add poorvith-mp/skills-design
Or install individual skills directly:
npx skills add poorvith-mp/skills-design --skill <skill-id>
Gemini App (gemini.google.com)
Upload any SKILL.md file or .skill bundle via Settings → Skills → Import in the Gemini App.
Manual (any agent)
Clone this repo and copy the skill folder to your agent's skills directory:
git clone https://github.com/poorvith-mp/skills-design.git
cp -R skills-design/skills/<skill-id> ~/.gemini/skills/ # Gemini CLI
cp -R skills-design/skills/<skill-id> ~/.claude/skills/ # Claude Code
Skills in this Collection
Research and evaluation
| Skill ID | Title | Description | Reviewed |
|---|---|---|---|
accessibility-review | Accessibility Review | Check a design for contrast, target size, focus order and motion safety before anything gets built. Use when auditing color contrast, focus states, tap targets, or ARIA UX. | 2026-09-06 |
design-critique | Design Critique | Critique a design against heuristics: visual hierarchy, typography, spacing, colour and accessibility. Use when reviewing visual hierarchy, layout balance, spacing, or typography. | 2026-09-06 |
design-taste | Design Taste | Find and fix AI design signatures: gradient blobs, three identical cards, purple-on-white. Not for prose (see writing-taste). Use when eliminating generic AI design tropes and templates. | 2026-09-06 |
ux-research | UX Research | Plan and run usability studies and behavioural analysis, then turn findings into research-backed personas. Use when running usability tests, journey mapping, or observing user behavior. | 2026-09-06 |
Brand
| Skill ID | Title | Description | Reviewed |
|---|---|---|---|
brand-system | Brand System | Build brand identity end to end: voice, logomarks, adaptive logo systems and usage rules. Use when defining brand guidelines, logos, iconography, or visual assets. | 2026-09-06 |
icon-design | Icon Design | Write icon briefs specifying metaphor, style, grid, stroke weight and usage context. Use when crafting custom SVG icon sets, glyphs, or pixel-perfect grids. | 2026-09-06 |
print-packaging | Print Packaging | Produce print-ready packaging with bleed, die lines, CMYK/Pantone profiles and material specs. Use when designing physical packaging, die-lines, CMYK swag, or print assets. | 2026-09-06 |
Direction
| Skill ID | Title | Description | Reviewed |
|---|---|---|---|
color-psychology | Color Psychology | Define color meaning: category conventions, emotional resonance, cultural symbolism, and owner gaps. Use when analyzing color psychology or brand palettes. | 2026-09-06 |
design-direction | Design Direction | Choose the visual genre fitting product and audience: editorial, brutalist, swiss, retro, soft-tech. Use when establishing visual direction or moodboards. | 2026-09-06 |
Design system
| Skill ID | Title | Description | Reviewed |
|---|---|---|---|
color-system | Color System | Turn a chosen direction into a real palette: tints, WCAG contrast, dark mode mapping, elevation and tokens. Use when building semantic color tokens, dark mode palettes, or contrast scales. | 2026-09-06 |
component-library | Component Library | Design the component set with consistent structure, states and semantic naming. Use when creating reusable Figma components, variants, or design libraries. | 2026-09-06 |
responsive-rules | Responsive Rules | Define breakpoint strategy, fluid type scales and adaptive layout behaviour across devices. Use when designing responsive grid breakpoints, fluid spacing, or adaptive layouts. | 2026-09-06 |
type-system | Type System | Build the type scale, font pairing, hierarchy rules, line height and vertical rhythm. Use when defining typographic scales, modular ratios, fonts, or line-heights. | 2026-09-06 |
Interface
| Skill ID | Title | Description | Reviewed |
|---|---|---|---|
delight | Delight | Add personality through microinteractions, copy moments and easter eggs, without harming usability. Use when adding tasteful Easter eggs, celebratory animations, or personality. | 2026-09-06 |
information-architecture | Information Architecture | Structure navigation, hierarchy and content models, and hand engineering an implementable spec. Use when structuring app navigation, sitemaps, hierarchy, or taxonomies. | 2026-09-06 |
interactive-prototype | Interactive Prototype | Turn a design into a clickable prototype with real flows, states and transitions, ready to put in front of users. Use when building clickable Figma prototypes, state flows, or micro-interactions. | 2026-09-06 |
motion-design | Motion Design | Specify UI animation and motion graphics: what moves, easing, timing, audio sync points and export settings. Use when designing UI transitions, spring physics, or micro-interactions. | 2026-09-06 |
ui-copy | UI Copy | Write interface microcopy — buttons, errors, empty states, tooltips — and replace placeholder text with real copy. Use when writing UI microcopy, button labels, empty states, or error messages. | 2026-09-06 |
ui-design | UI Design | Design screen layouts and visual systems for a product surface. Use when designing user interfaces, dashboard screens, or visual layouts. | 2026-09-06 |
Implementation
| Skill ID | Title | Description | Reviewed |
|---|---|---|---|
frontend-design | Frontend Design | Build distinctive, production-grade interfaces in real code, avoiding generic AI-default layouts. Use when implementing pixel-perfect CSS, Tailwind, Flexbox, or responsive code. | 2026-09-06 |
image-prompts | Image Prompts | Write AI image prompts covering subject, lighting and composition, countering the models' bias toward stereotyped depictions. Use when authoring Midjourney, Flux, or DALL-E AI image prompts. | 2026-09-06 |
License
MIT © Poorvith M P