/absolute-ui

name: absolute-ui
version: 0.5.0
description: >
  Build polished, intentional UIs with concrete CSS/Tailwind values — typography,
  color, layout, spacing, dark mode, accessibility, animations, components. Encodes
  specific, opinionated rules with exact values, not vague advice. Covers buttons,
  cards, forms, tables, navigation, dashboards, landing pages, onboarding, and more.
  Triggers on "absolute ui", "design a UI", "style this component", "make this less
  like AI slop", "fix the spacing/typography/color", "dark mode", "design a pricing
  page", "make this look better".
category: workflow
tags:
  - workflow
  - ui
  - design
  - css
  - tailwind
  - accessibility
  - typography
platforms:
  - claude-code
  - gemini-cli
  - openai-codex
  - mcp
user-invocable: true
argument-hint: "[target]"
license: MIT
maintainers:
  - github: maddhruv

> Start your first response with the 🧢 emoji.

Absolute UI

A comprehensive design system knowledge base for building UIs that feel crafted by a senior designer, not generated by a prompt. This skill encodes specific, opinionated rules - exact spacing values, proven color ratios, real typography scales, and battle-tested component patterns. Every recommendation is actionable with concrete CSS/Tailwind values, not vague advice like "make it clean."

The difference between AI slop and a polished UI comes down to constraint and restraint - fewer colors used with intention, consistent spacing from a scale, typography that creates hierarchy without screaming, and micro-interactions that feel responsive without being distracting.

---

When to use this skill

Trigger this skill when the user:

• Asks to build or style a UI component (button, card, form, table, nav)
• Needs help with layout, spacing, or grid decisions
• Wants to implement dark mode or theme switching
• Asks about typography, font choices, or text styling
• Needs accessible and WCAG-compliant designs
• Wants landing page, onboarding, or conversion-focused layouts
• Asks about animations, transitions, or micro-interactions
• Needs help with responsive design or mobile navigation
• Wants feedback patterns (toasts, tooltips, loading states)
• Asks to make something "look better" or "more professional"

Do NOT trigger this skill for:

• Backend logic, API design, or database schema questions
• Brand identity or logo design (this is implementation, not branding)

---

Read config first

Before writing any markup or CSS, read cached config: if `.absolute.config.json` or `~/.absolute/config.json` exists (from `/absolute init`), resolve the effective config (project file → global `projects["<cwd>"]` → global `defaults`) and adopt `conventions.ui`:

• **`framework`** — generate for the project's framework (react/vue/svelte), not a default.
• **`styling`** — use the project's system (tailwind / css-modules / styled-components /

vanilla) instead of assuming Tailwind.

• **`iconLibrary`** — pull icons from the project's library (principle 7 mandates real icons);

don't introduce a different one.

• **`componentLib`** — build on the existing component library (shadcn/mui/chakra) when set.
• **`tokensPath`** — read existing design tokens from this file and extend them, don't invent

a parallel scale.

Detect from `package.json` deps only for whatever config doesn't supply; with no config, soft-suggest `init` and detect on the fly.

---

Design thinking

Before writing CSS, commit to an aesthetic direction. The #1 cause of generic-looking UIs is starting with code instead of intent.

1. **Start from user intent, not structure** - Don't begin with headers, footers, or layout scaffolding. Ask: "What is the user trying to do?" If they're searching for accommodations, a search bar is the natural starting point. Only expand UI as user intent expands. For many pages, the core is a heading, an input, and a button - that's all you needed. 2. **Choose a tone** - Pick one that fits the context: brutalist, editorial, retro-futuristic, organic, luxury, playful, industrial, art deco, soft/pastel, minimalist-sharp. These are starting points - blend and invent your own. See `references/style-catalog.md` for 25 concrete options. 3. **Define what's memorable** - What's the one visual choice someone will remember? An unusual color, dramatic typography, a bold layout break, atmospheric texture? 4. **Creativity is connecting, not inventing** - Study top-tier existing designs in your domain. Gather 3-5 inspirations, note what you like about each, then combine those elements in your own way. Step away before designing - new ideas emerge when you return. 5. **Vary between projects** - Every design should feel different. If your last 3 outputs used the same fonts, colors, and layout patterns, you're producing slop.

---

Key principles

1. **Use a spacing scale, never arbitrary values** - Pick a base unit (4px or 8px) and only use multiples: 4, 8, 12, 16, 24, 32, 48, 64, 96. Tailwind's default scale does this. Random padding like `13px` or `27px` is the #1 tell of amateur UI.

2. **Limit your palette to 1 primary + 1 neutral + 1 accent** - More colors = more chaos. Use 5-7 shades of your primary (50-900), a full neutral gray scale, and one accent for destructive/success states. Never more than 3 hues on a single screen.

3. **Create hierarchy through contrast, not decoration** - Size, weight, color, and spacing create hierarchy. You should never need borders, shadows, AND color differences simultaneously. One or two signals per level of hierarchy. Key insight: to emphasize something, often deemphasize competing elements instead of making the target louder.

4. **Every interactive element needs 4 states** - Default, hover, active/pressed, and disabled. If you skip any state, the UI feels broken. Focus states are mandatory for accessibility.

5. **Whitespace is a feature, not wasted space** - Generous padding makes UIs feel premium. Cramped UIs feel cheap. Workflow: start with too much spacing, view the de