absolute-ui

Name: absolute-ui
Author: maddhruv

199stars32forks

How to install absolute-ui?

maddhruv/absolute/absolute-ui

$npx -y skills add maddhruv/absolute --skill absolute-ui

Installs into the current project.

Summary

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, das

Files · 1

View on GitHub

SKILL.md

1	> Start your first response with the 🧢 emoji.
2
3	## Absolute UI
4
5	A comprehensive design system knowledge base for building UIs that feel crafted
6	by a senior designer, not generated by a prompt. This skill encodes specific,
7	opinionated rules - exact spacing values, proven color ratios, real typography
8	scales, and battle-tested component patterns. Every recommendation is actionable
9	with concrete CSS/Tailwind values, not vague advice like "make it clean."
10
11	The difference between AI slop and a polished UI comes down to constraint and
12	restraint - fewer colors used with intention, consistent spacing from a scale,
13	typography that creates hierarchy without screaming, and micro-interactions that
14	feel responsive without being distracting.
15
16	---
17
18	## When to use this skill
19
20	Trigger this skill when the user:
21	- Asks to build or style a UI component (button, card, form, table, nav)
22	- Needs help with layout, spacing, or grid decisions
23	- Wants to implement dark mode or theme switching
24	- Asks about typography, font choices, or text styling
25	- Needs accessible and WCAG-compliant designs
26	- Wants landing page, onboarding, or conversion-focused layouts
27	- Asks about animations, transitions, or micro-interactions
28	- Needs help with responsive design or mobile navigation
29	- Wants feedback patterns (toasts, tooltips, loading states)
30	- Asks to make something "look better" or "more professional"
31
32	Do NOT trigger this skill for:
33	- Backend logic, API design, or database schema questions
34	- Brand identity or logo design (this is implementation, not branding)
35
36	---
37
38	## Read config first
39
40	Before writing any markup or CSS, read cached config: if `.absolute.config.json` or
41	`~/.absolute/config.json` exists (from `/absolute init`), resolve the effective config
42	(project file → global `projects["<cwd>"]` → global `defaults`) and adopt `conventions.ui`:
43
44	- `framework` — generate for the project's framework (react/vue/svelte), not a default.
45	- `styling` — use the project's system (tailwind / css-modules / styled-components /
46	vanilla) instead of assuming Tailwind.
47	- `iconLibrary` — pull icons from the project's library (principle 7 mandates real icons);
48	don't introduce a different one.
49	- `componentLib` — build on the existing component library (shadcn/mui/chakra) when set.
50	- `tokensPath` — read existing design tokens from this file and extend them, don't invent
51	a parallel scale.
52
53	Detect from `package.json` deps only for whatever config doesn't supply; with no config,
54	soft-suggest `init` and detect on the fly.
55
56	---
57
58	## Design thinking
59
60	Before writing CSS, commit to an aesthetic direction. The #1 cause of generic-looking UIs is starting with code instead of intent.
61
62	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.
63	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.
64	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?
65	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.
66	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.
67
68	---
69
70	## Key principles
71
72	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 paddin

People who liked this also viewed

6 picks

Type

absolute-ui

199stars32forks

View on GitHub

How to install absolute-ui?

maddhruv/absolute/absolute-ui

$npx -y skills add maddhruv/absolute --skill absolute-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> Start your first response with the 🧢 emoji.
2
3	## Absolute UI
4
5	A comprehensive design system knowledge base for building UIs that feel crafted
6	by a senior designer, not generated by a prompt. This skill encodes specific,
7	opinionated rules - exact spacing values, proven color ratios, real typography
8	scales, and battle-tested component patterns. Every recommendation is actionable
9	with concrete CSS/Tailwind values, not vague advice like "make it clean."
10
11	The difference between AI slop and a polished UI comes down to constraint and
12	restraint - fewer colors used with intention, consistent spacing from a scale,
13	typography that creates hierarchy without screaming, and micro-interactions that
14	feel responsive without being distracting.
15
16	---
17
18	## When to use this skill
19
20	Trigger this skill when the user:
21	- Asks to build or style a UI component (button, card, form, table, nav)
22	- Needs help with layout, spacing, or grid decisions
23	- Wants to implement dark mode or theme switching
24	- Asks about typography, font choices, or text styling
25	- Needs accessible and WCAG-compliant designs
26	- Wants landing page, onboarding, or conversion-focused layouts
27	- Asks about animations, transitions, or micro-interactions
28	- Needs help with responsive design or mobile navigation
29	- Wants feedback patterns (toasts, tooltips, loading states)
30	- Asks to make something "look better" or "more professional"
31
32	Do NOT trigger this skill for:
33	- Backend logic, API design, or database schema questions
34	- Brand identity or logo design (this is implementation, not branding)
35
36	---
37
38	## Read config first
39
40	Before writing any markup or CSS, read cached config: if `.absolute.config.json` or
41	`~/.absolute/config.json` exists (from `/absolute init`), resolve the effective config
42	(project file → global `projects["<cwd>"]` → global `defaults`) and adopt `conventions.ui`:
43
44	- `framework` — generate for the project's framework (react/vue/svelte), not a default.
45	- `styling` — use the project's system (tailwind / css-modules / styled-components /
46	vanilla) instead of assuming Tailwind.
47	- `iconLibrary` — pull icons from the project's library (principle 7 mandates real icons);
48	don't introduce a different one.
49	- `componentLib` — build on the existing component library (shadcn/mui/chakra) when set.
50	- `tokensPath` — read existing design tokens from this file and extend them, don't invent
51	a parallel scale.
52
53	Detect from `package.json` deps only for whatever config doesn't supply; with no config,
54	soft-suggest `init` and detect on the fly.
55
56	---
57
58	## Design thinking
59
60	Before writing CSS, commit to an aesthetic direction. The #1 cause of generic-looking UIs is starting with code instead of intent.
61
62	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.
63	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.
64	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?
65	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.
66	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.
67
68	---
69
70	## Key principles
71
72	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 paddin

People who liked this also viewed

6 picks

Type