10-experience-and-design-system

Name: 10-experience-and-design-system
Author: heymegabyte

18stars4forks

How to install 10-experience-and-design-system?

heymegabyte/claude-skills/10-experience-and-design-system

$npx -y skills add heymegabyte/claude-skills --skill 10-experience-and-design-system

Installs into the current project.

Summary

Anti-AI-slop design system for distinctive, premium interfaces. Bold typography, dark-first #060610, fluid clamp() type, cascade layers + native nesting + container queries, OKLCH color, @starting-style, View Transitions API, DTCG tokens.

Files · 1

View on GitHub

SKILL.md

1	# 10 — Experience and Design System
2
3	Build anti-AI-slop premium interfaces: dark-first OKLCH color, fluid `clamp()` type, DTCG tokens, View Transitions on every public-facing surface.
4
5	Apple Test — after every design: two elements compete → remove one; crowded → add whitespace; busy type → reduce sizes, increase weight contrast; final feel: effortless, inevitable.
6
7	## CSS Patterns
8
9	- Overlay `rgba(0,0,0,0.81)` · Text shadow `1px 1px 1px rgba(255,255,255,0.333)` · Box shadow `2px 2px 2px rgba(0,0,0,0.69)`
10	- Border-radius 5px interactive, 10px containers (never 0, never pill)
11	- Hero padding 40px · Max text 720px · Line-height 1.4
12	- Letter-spacing: 0.4px labels, 0.5px nav, 1px titles, 1.4px CTAs
13	- CTA uppercase always · Button 700 always · Reference: Linear, Notion, Stripe
14
15	## Typography
16
17	- Body: Sora 400/500 · Headings: Space Grotesk 600/700 · Mono: JetBrains Mono 400/500 · Display: Clash Display 700 (hero only)
18	- Variable fonts: WOFF2, subset, self-host (never Google Fonts CDN), `font-display:swap`
19	- Body min 16px (prefer 18) · Line-height 1.6 body, 1.1-1.2 headings · Letter-spacing -0.02em >2rem · Max 65ch
20	- Never skip levels. Scale: Minor Third 1.2 general, Perfect Fourth 1.333 marketing
21	- `text-wrap:balance` headings, `text-wrap:pretty` paragraphs
22
23	```css
24	:root {
25	--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
26	--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
27	--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
28	--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
29	--text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
30	--text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2rem);
31	--text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
32	--text-4xl: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
33	--text-hero: clamp(3rem, 2rem + 5vw, 6rem);
34	}
35	```
36
37	## Color (Dark Default)
38
39	```css
40	:root {
41	color-scheme: light dark;
42	--bg-primary: #060610; --bg-secondary: #0a0a1a; --bg-tertiary: #121225;
43	--bg-card: #0f0f1f; --bg-elevated: #1a1a35;
44	--text-primary: #f0f0f5; --text-secondary: #a0a0b5; --text-muted: #606080;
45	--accent-cyan: #00E5FF; --accent-blue: #50AAE3; --accent-purple: #8B5CF6;
46	--gradient-primary: linear-gradient(135deg, #00E5FF, #50AAE3);
47	--gradient-accent: linear-gradient(135deg, #50AAE3, #8B5CF6);
48	--border-subtle: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.12);
49	--shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
50	--shadow-lg: 0 8px 32px rgba(0,0,0,0.5); --shadow-glow: 0 0 20px rgba(0,229,255,0.15);
51	}
52	```
53
54	- Never `#000` (use `#060610`) · Never `#fff` (use `#f0f0f5`)
55	- Cyan: primary CTAs · Blue: secondary · Gradients on buttons only · 6% borders · Subtle glow on primary interactive
56	- Elevation via lightness not shadows: base → surface 1 → surface 2 → surface 3
57	- `color-scheme:light dark` · `data-theme="dark\|light"` user override · `localStorage` persistence · `prefers-color-scheme` system default · Always provide toggle
58	- OKLCH perceptually uniform · `color-mix()` · Relative `oklch(from var(--brand) l c calc(h + 30))` · `light-dark()` theme-aware
59	- Contrast 4.5:1 normal, 3:1 large/UI (WCAG 2.2 AA) · Target size min 24×24 px (2.5.8) · Focus 2px thick, 3:1 contrast (2.4.13)
60
61	## CSS Architecture (2026)
62
63	```css
64	@layer reset, base, tokens, components, utilities, overrides;
65	```
66
67	- Native nesting · Container queries (`container-type:inline-size`, `@container`) · `:has()` replaces JS
68	- `@scope` bounded styling · Anchor positioning replaces Floating UI · Scroll-state queries `@container scroll-state(stuck: top)` (Baseline 2026)
69	- CSS `if()` · Typed `attr()` · `sibling-index()` / `sibling-count()` stagger: `transition-delay: calc((sibling-index() - 1) * 40ms)`
70	- `appearance:base-select` native `<select>` (Chrome 135+) · `@supports` for progressive enhancement
71	- Baseline 2026: `@scope` · Anchor positioning · Scroll-state queries · `@starting-style` · `interpolate-size: allow-keywords` · `field-sizing: content` · `text-wrap: pretty` · `@property`
72
73	## W3C DTCG Design Tokens (2025.10 Stable)
74
75	- JSON `.tokens` / `.tokens.json`, MIME `application/design-tokens+json`
76	- Token: `$value` (required), `$type`, `$description`, `$deprecated`, `$extensions`
77	- Types: color \| dimension \| duration \| fontFamily \| fontWeight \| cubicBezier \| number + composites (shadow, border, gradient, typography, transition)
78	-

People who liked this also viewed

6 picks

Type

10-experience-and-design-system

18stars4forks

View on GitHub

How to install 10-experience-and-design-system?

heymegabyte/claude-skills/10-experience-and-design-system

$npx -y skills add heymegabyte/claude-skills --skill 10-experience-and-design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 10 — Experience and Design System
2
3	Build anti-AI-slop premium interfaces: dark-first OKLCH color, fluid `clamp()` type, DTCG tokens, View Transitions on every public-facing surface.
4
5	Apple Test — after every design: two elements compete → remove one; crowded → add whitespace; busy type → reduce sizes, increase weight contrast; final feel: effortless, inevitable.
6
7	## CSS Patterns
8
9	- Overlay `rgba(0,0,0,0.81)` · Text shadow `1px 1px 1px rgba(255,255,255,0.333)` · Box shadow `2px 2px 2px rgba(0,0,0,0.69)`
10	- Border-radius 5px interactive, 10px containers (never 0, never pill)
11	- Hero padding 40px · Max text 720px · Line-height 1.4
12	- Letter-spacing: 0.4px labels, 0.5px nav, 1px titles, 1.4px CTAs
13	- CTA uppercase always · Button 700 always · Reference: Linear, Notion, Stripe
14
15	## Typography
16
17	- Body: Sora 400/500 · Headings: Space Grotesk 600/700 · Mono: JetBrains Mono 400/500 · Display: Clash Display 700 (hero only)
18	- Variable fonts: WOFF2, subset, self-host (never Google Fonts CDN), `font-display:swap`
19	- Body min 16px (prefer 18) · Line-height 1.6 body, 1.1-1.2 headings · Letter-spacing -0.02em >2rem · Max 65ch
20	- Never skip levels. Scale: Minor Third 1.2 general, Perfect Fourth 1.333 marketing
21	- `text-wrap:balance` headings, `text-wrap:pretty` paragraphs
22
23	```css
24	:root {
25	--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
26	--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
27	--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
28	--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
29	--text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
30	--text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2rem);
31	--text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
32	--text-4xl: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
33	--text-hero: clamp(3rem, 2rem + 5vw, 6rem);
34	}
35	```
36
37	## Color (Dark Default)
38
39	```css
40	:root {
41	color-scheme: light dark;
42	--bg-primary: #060610; --bg-secondary: #0a0a1a; --bg-tertiary: #121225;
43	--bg-card: #0f0f1f; --bg-elevated: #1a1a35;
44	--text-primary: #f0f0f5; --text-secondary: #a0a0b5; --text-muted: #606080;
45	--accent-cyan: #00E5FF; --accent-blue: #50AAE3; --accent-purple: #8B5CF6;
46	--gradient-primary: linear-gradient(135deg, #00E5FF, #50AAE3);
47	--gradient-accent: linear-gradient(135deg, #50AAE3, #8B5CF6);
48	--border-subtle: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.12);
49	--shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
50	--shadow-lg: 0 8px 32px rgba(0,0,0,0.5); --shadow-glow: 0 0 20px rgba(0,229,255,0.15);
51	}
52	```
53
54	- Never `#000` (use `#060610`) · Never `#fff` (use `#f0f0f5`)
55	- Cyan: primary CTAs · Blue: secondary · Gradients on buttons only · 6% borders · Subtle glow on primary interactive
56	- Elevation via lightness not shadows: base → surface 1 → surface 2 → surface 3
57	- `color-scheme:light dark` · `data-theme="dark\|light"` user override · `localStorage` persistence · `prefers-color-scheme` system default · Always provide toggle
58	- OKLCH perceptually uniform · `color-mix()` · Relative `oklch(from var(--brand) l c calc(h + 30))` · `light-dark()` theme-aware
59	- Contrast 4.5:1 normal, 3:1 large/UI (WCAG 2.2 AA) · Target size min 24×24 px (2.5.8) · Focus 2px thick, 3:1 contrast (2.4.13)
60
61	## CSS Architecture (2026)
62
63	```css
64	@layer reset, base, tokens, components, utilities, overrides;
65	```
66
67	- Native nesting · Container queries (`container-type:inline-size`, `@container`) · `:has()` replaces JS
68	- `@scope` bounded styling · Anchor positioning replaces Floating UI · Scroll-state queries `@container scroll-state(stuck: top)` (Baseline 2026)
69	- CSS `if()` · Typed `attr()` · `sibling-index()` / `sibling-count()` stagger: `transition-delay: calc((sibling-index() - 1) * 40ms)`
70	- `appearance:base-select` native `<select>` (Chrome 135+) · `@supports` for progressive enhancement
71	- Baseline 2026: `@scope` · Anchor positioning · Scroll-state queries · `@starting-style` · `interpolate-size: allow-keywords` · `field-sizing: content` · `text-wrap: pretty` · `@property`
72
73	## W3C DTCG Design Tokens (2025.10 Stable)
74
75	- JSON `.tokens` / `.tokens.json`, MIME `application/design-tokens+json`
76	- Token: `$value` (required), `$type`, `$description`, `$deprecated`, `$extensions`
77	- Types: color \| dimension \| duration \| fontFamily \| fontWeight \| cubicBezier \| number + composites (shadow, border, gradient, typography, transition)
78	-

People who liked this also viewed

6 picks

Type