Absolute UI Skill: Concrete CSS Values for AI Agents

What is the absolute-ui skill?

The absolute-ui skill lives in the skills/absolute-ui folder of maddhruv/absolute, a repo of workflow skills for AI coding agents. Its SKILL.md is a design rulebook with concrete CSS and Tailwind values, backed by 25 reference guides loaded when a task needs them.

Before writing markup, the skill checks for a project config file and adopts the framework, styling system, icon library and token file it names, instead of assuming defaults. It also tells the agent to open its first reply with a cap emoji.

What changes in your agent's output

• Spacing snaps to a scale on a 4px or 8px base, such as 4, 8, 12, 16, 24, 32, 48, 64 and 96, instead of arbitrary padding like 13px.
• Palettes stay small: one primary, one neutral and one accent, with no more than three hues on a screen. Separately, its 60-30-10 rule gives 60 percent to a dominant neutral background, 30 percent to secondary areas such as cards and sections, and 10 percent to accent.
• Every interactive element gets default, hover, active and disabled states, and focus states are treated as mandatory.
• Icons come from a real SVG library such as Lucide React, and emoji are ruled out as icons.
• Dark mode uses dark blue-gray surfaces like #0f172a rather than pure black, and text softens to #f1f5f9.

What the rules cover

• Foundations: spacing, a 1.25 ratio type scale, palette limits, hierarchy through contrast and optical alignment.
• Components: button hierarchy, cards, forms, tables, navigation, toasts and other feedback patterns.
• Layouts: responsive CSS Grid, dashboards, landing pages and onboarding flows.
• Finish: color and theming, accessibility, micro-animations, images and performance, each with its own reference guide.

Who the absolute-ui skill is for

Best for

• Styling a component or page when you want exact values instead of advice like make it clean.
• Cleaning up an interface that looks generated. The skill makes the agent pick a tone, such as brutalist, editorial or luxury, before it writes CSS. See anti-ui-slop for a narrower take on the same problem.
• Dashboards, onboarding and forms, which have dedicated guides.

Not for

• Backend logic, API design or database schema questions. SKILL.md says not to trigger on these.
• Brand identity or logo design. The skill states that it covers implementation, not branding.
• Auditing code you already have against a fixed checklist. See web-design-guidelines among the other skills here.

Use it with UiChemy

Absolute UI shapes the page your agent builds. To land it in WordPress, bring it in with UiChemy AI to WordPress, or route the design through Figma first, then refine it in Composer. Click Get Started on uichemy.com.

How to install Absolute UI Skill: Concrete CSS Values for AI Agents

git clone https://github.com/maddhruv/absolute.git

1. Clone the repository

   Run git clone https://github.com/maddhruv/absolute.git. The skill sits in the skills/absolute-ui folder, next to ten other skills from the same repo.

2. Copy the skill folder

   Copy skills/absolute-ui into your agent's skills folder. The README describes project installs as ./<agent>/skills/ and global installs as ~/<agent>/skills/. For Claude Code, use the .claude version of that pattern.

3. Add project config, optional

   The separate absolute-init skill from the same repo writes .absolute.config.json for a project, or ~/.absolute/config.json globally. absolute-ui reads it to match your framework and styling.

4. Ask for UI work

   Invoke it as /absolute-ui "Design a pricing page", the README's own example, or use phrases from the skill description such as make this look better or fix the spacing.

Check that it loaded

Ask the agent to style a button or design a pricing page. The first reply should start with the cap emoji that SKILL.md requires, and the output should follow the spacing, type and color rules above.

Read the official instructions on GitHub

Key features

• Spacing scaleSpacing uses a 4px or 8px base and its multiples. Component heights are 32px, 40px and 48px, and padding sticks to 8, 12, 16 and 24px.
• Palette limitsOne primary with five to seven shades, a full neutral scale and one accent for destructive or success states. Never more than three hues on one screen. See color-system for deeper palette work.
• Type scaleA modular scale with a 1.25 ratio on a 16px base, from 12px captions to a 48px hero heading, with line heights of 1.25, 1.5 and 1.75. Two font families at most. For scale tooling, see typography-scale.
• Button hierarchyThree levels: primary filled, secondary outlined and ghost text only. One primary button per visual section, and a 36px minimum height for touch targets.
• Dark mode rulesBackgrounds use dark blue-gray values, text drops to #f1f5f9 instead of pure white and shadows get higher opacity. The skill says never to just invert colors. See dark-mode-design.
• Four interactive statesDefault, hover, active and disabled for every interactive element, with focus states required for accessibility.
• Design thinking stepBefore any CSS, the agent starts from user intent, chooses a tone and names one memorable visual choice. Each project should feel different from the last.
• Atmosphere and iconsFlat white or gray backgrounds are flagged as a default of generated interfaces. The skill suggests gradient meshes, grain or tinted surfaces, and real icon libraries instead of emoji.
• Responsive gridCard grids use auto-fill with minmax, so they need no media queries. Content width tops out at 1280px for apps and 720px for reading, with lines under 75 characters.

Frequently asked questions