Every ui ux

Skill gurbaaz27/every-ui-ux-concept/every-ui-ux

A comprehensive guide to core UI/UX design concepts — affordances, visual hierarchy, grids, typography, color, dark mode, shadows, icons & buttons, feedback & states, micro interactions, and overlays. Use this skill whenever the user is designing interfaces, building component libraries, reviewing UI decisions, implementing frontend styling, or asking how to make their design look more polished or professional. Also useful when the user mentions terms like spacing, layout, hover states, color ramps, or asks "how do I make this look better."From its SKILL.md

Install

npx -y skills add gurbaaz27/every-ui-ux-concept --skill every-ui-ux

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.3 KB, 617 tokens by cl100k_base, as published. Nobody here has run it

Every UI/UX Concept — A Practical Guide

This skill covers the foundational UI/UX concepts that underpin good interface design. These aren't rigid rules — they're patterns that experienced designers internalize over time. The goal is to help you make informed decisions, not to constrain creativity.

How to use this guide

Each concept has its own reference file with detailed explanations, implementation guidance, and practical tips. Read the relevant file when you need depth on a specific topic.

The concepts build on each other:

Affordances & Signifiers — The foundation. How users understand what things do.
Visual Hierarchy — Directing attention. What's important, what's secondary.
Grids, Layouts & Spacing — Structure. Giving content room to breathe.
Typography & Font Sizing — The backbone of UI. Most of your design is text.
Color Theory — Emotion and meaning. Using color with purpose.
Dark Mode — Adapting designs for low-light contexts without losing clarity.
Shadows & Depth — Creating layers and spatial relationships.
Icons & Buttons — Interactive elements. The building blocks of action.
Feedback & States — Responsiveness. Every interaction deserves a response.
Micro Interactions — Delight. Small animations that confirm and guide.
Overlays — Layering content over images without ruining either.

Quick decision guide

You're working on...	Start with...
A new component	Affordances → Hierarchy → States
A landing page	Hierarchy → Typography → Spacing → Color
A dashboard	Grids → Typography → Icons → Dark Mode
Making something "look better"	Spacing → Typography → Shadows → Color
Accessibility concerns	Color → States → Affordances
Dark theme support	Dark Mode → Shadows → Color

Reference files

Read these for detailed guidance on each concept:

references/01-affordances-and-signifiers.md — How UI communicates what it can do
references/02-visual-hierarchy.md — Directing the user's eye
references/03-grids-layouts-spacing.md — Structure and breathing room
references/04-typography.md — Font selection, sizing, and spacing
references/05-color-theory.md — Purposeful use of color
references/06-dark-mode.md — Designing for dark contexts
references/07-shadows-and-depth.md — Creating spatial layers
references/08-icons-and-buttons.md — Interactive element design
references/09-feedback-and-states.md — Responsive interface behavior
references/10-micro-interactions.md — Small moments of delight
references/11-overlays.md — Text and images coexisting gracefully

What ships with it: 11 files

57.6 KB alongside SKILL.md