design-elevation

Name: design-elevation
Author: cuellarfr

128installs3forks

How to install design-elevation?

cuellarfr/design-skills/design-elevation

$npx -y skills add cuellarfr/design-skills --skill design-elevation

Installs into the current project.

Summary

Comprehensive design elevation system that automatically transforms functional visual outputs into polished, professional designs. Use when creating ANY visual output including presentations (pptx), spreadsheets (xlsx), dashboards, reports, HTML artifacts, PDFs, web pages, or dat

Files · 1

View on GitHub

SKILL.md

1	# Design Elevation System
2
3	This skill transforms functional visual outputs into polished, professional designs by applying systematic design thinking and refinement protocols.
4
5	## Design Philosophy
6
7	Follow Alla Kholmatova's design systems framework: every design decision is either a functional pattern (what users interact with — structure, layout, components) or a perceptual pattern (how it feels — color, typography, spacing, motion). Both layers must be intentional.
8
9	### Canonical Design Tokens: Tailwind CSS
10
11	All design decisions should map to Tailwind CSS as the shared design language. This means:
12	- Colors from Tailwind's palette (gray, blue, emerald, amber, rose, violet, etc.)
13	- Spacing from Tailwind's scale (1 = 0.25rem/4px, 2 = 0.5rem/8px, 4 = 1rem/16px, etc.)
14	- Typography from Tailwind's type scale (text-xs through text-9xl)
15	- Border radius from Tailwind's system (rounded-sm through rounded-2xl)
16	- Shadows from Tailwind's elevation (shadow-sm through shadow-2xl)
17
18	When writing CSS or HTML, use Tailwind utility classes. When defining design tokens for other formats (presentations, documents), translate Tailwind values into the target medium.
19
20	## Activation Protocol
21
22	When creating ANY visual output:
23
24	1. Start with function — Create a working version first
25	2. Define functional patterns — What does the user interact with? What's the structure? Use `references/grid-systems.md`
26	3. Define perceptual patterns — How should it feel? What's the personality? Use `references/elevation-protocol.md`
27	4. Apply interrogation — Question every default choice using `references/design-interrogation.md`
28	5. Elevate with techniques — Use specific moves from `references/technique-catalog.md`
29	6. Polish data visualizations — If any charts/data, apply `references/data-visualization.md`
30	7. Final check — Ensure output feels hand-crafted, not templated
31
32	## Functional Patterns by Output Type
33
34	### For Presentations (PPTX)
35	- Start with information hierarchy, not decoration
36	- Apply grid systems from `references/grid-systems.md`
37	- One idea per slide — if it needs two ideas, it needs two slides
38	- Build complexity gradually across the slide sequence
39
40	### For Dashboards & Data Visualization
41	- Begin with data relationships, not chart types
42	- Apply Tufte's data-ink ratio from `references/data-visualization.md`
43	- Structure: KPI bar → Primary chart → Supporting charts → Detail tables
44	- Use small multiples over multi-series charts when comparing 4+ categories
45	- Default to Tailwind's gray scale for non-data elements; reserve color for data
46
47	### For Documents & Reports
48	- Structure with clear typographic hierarchy
49	- Apply document grids from `references/grid-systems.md`
50	- Use Tailwind's type scale for consistent sizing
51
52	### For Web/HTML Artifacts
53	- Design with responsive grid foundations (Tailwind's grid/flex utilities)
54	- Use Tailwind utility classes directly
55	- Apply animation restraint — `transition-all duration-200 ease-out` as default
56
57	## Perceptual Patterns
58
59	### Typography Excellence
60	Tailwind's type scale is the foundation. Layer these refinements:
61	- Use `font-sans` (Inter/system) for UI, `font-serif` for editorial
62	- Apply `tracking-tight` for display text (text-3xl and above)
63	- Apply `leading-relaxed` for body text
64	- Use `font-semibold` for emphasis over `font-bold` — subtler hierarchy
65	- For numbers in data contexts: always `tabular-nums`
66	- Refer to `references/typography-scales.md` for scale selection
67
68	### Color Sophistication
69	Tailwind's palette is the source of truth:
70	- Build from `gray` neutrals (not pure black/white)
71	- `text-gray-900` for primary text, `text-gray-500` for secondary, `text-gray-400` for tertiary
72	- `bg-white` or `bg-gray-50` for backgrounds — never stark white with stark black
73	- Accent color: pick ONE from Tailwind's palette (blue, emerald, violet, etc.)
74	- Apply 60-30-10: 60% neutrals, 30% secondary, 10% accent
75	- Refer to `references/color-systems.md` for full system
76
77	### Spatial Systems
78	Tailwind's spacing scale provides the rhythm:
79	- Base unit: `4` (1rem / 16px) for most UI
80	- Component padding: `p-4` to `p-6` (16-24px)
81	- Section spacing: `py-12` to `py-20` (48-80px)
82	- Gaps: `gap-4` for tight, `gap-6` for comfortable, `gap-8` for spacious
83	- Use Tailwind's spacing sc

People who liked this also viewed

6 picks

Type

design-elevation

128installs3forks

View on GitHub

How to install design-elevation?

cuellarfr/design-skills/design-elevation

$npx -y skills add cuellarfr/design-skills --skill design-elevation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Elevation System
2
3	This skill transforms functional visual outputs into polished, professional designs by applying systematic design thinking and refinement protocols.
4
5	## Design Philosophy
6
7	Follow Alla Kholmatova's design systems framework: every design decision is either a functional pattern (what users interact with — structure, layout, components) or a perceptual pattern (how it feels — color, typography, spacing, motion). Both layers must be intentional.
8
9	### Canonical Design Tokens: Tailwind CSS
10
11	All design decisions should map to Tailwind CSS as the shared design language. This means:
12	- Colors from Tailwind's palette (gray, blue, emerald, amber, rose, violet, etc.)
13	- Spacing from Tailwind's scale (1 = 0.25rem/4px, 2 = 0.5rem/8px, 4 = 1rem/16px, etc.)
14	- Typography from Tailwind's type scale (text-xs through text-9xl)
15	- Border radius from Tailwind's system (rounded-sm through rounded-2xl)
16	- Shadows from Tailwind's elevation (shadow-sm through shadow-2xl)
17
18	When writing CSS or HTML, use Tailwind utility classes. When defining design tokens for other formats (presentations, documents), translate Tailwind values into the target medium.
19
20	## Activation Protocol
21
22	When creating ANY visual output:
23
24	1. Start with function — Create a working version first
25	2. Define functional patterns — What does the user interact with? What's the structure? Use `references/grid-systems.md`
26	3. Define perceptual patterns — How should it feel? What's the personality? Use `references/elevation-protocol.md`
27	4. Apply interrogation — Question every default choice using `references/design-interrogation.md`
28	5. Elevate with techniques — Use specific moves from `references/technique-catalog.md`
29	6. Polish data visualizations — If any charts/data, apply `references/data-visualization.md`
30	7. Final check — Ensure output feels hand-crafted, not templated
31
32	## Functional Patterns by Output Type
33
34	### For Presentations (PPTX)
35	- Start with information hierarchy, not decoration
36	- Apply grid systems from `references/grid-systems.md`
37	- One idea per slide — if it needs two ideas, it needs two slides
38	- Build complexity gradually across the slide sequence
39
40	### For Dashboards & Data Visualization
41	- Begin with data relationships, not chart types
42	- Apply Tufte's data-ink ratio from `references/data-visualization.md`
43	- Structure: KPI bar → Primary chart → Supporting charts → Detail tables
44	- Use small multiples over multi-series charts when comparing 4+ categories
45	- Default to Tailwind's gray scale for non-data elements; reserve color for data
46
47	### For Documents & Reports
48	- Structure with clear typographic hierarchy
49	- Apply document grids from `references/grid-systems.md`
50	- Use Tailwind's type scale for consistent sizing
51
52	### For Web/HTML Artifacts
53	- Design with responsive grid foundations (Tailwind's grid/flex utilities)
54	- Use Tailwind utility classes directly
55	- Apply animation restraint — `transition-all duration-200 ease-out` as default
56
57	## Perceptual Patterns
58
59	### Typography Excellence
60	Tailwind's type scale is the foundation. Layer these refinements:
61	- Use `font-sans` (Inter/system) for UI, `font-serif` for editorial
62	- Apply `tracking-tight` for display text (text-3xl and above)
63	- Apply `leading-relaxed` for body text
64	- Use `font-semibold` for emphasis over `font-bold` — subtler hierarchy
65	- For numbers in data contexts: always `tabular-nums`
66	- Refer to `references/typography-scales.md` for scale selection
67
68	### Color Sophistication
69	Tailwind's palette is the source of truth:
70	- Build from `gray` neutrals (not pure black/white)
71	- `text-gray-900` for primary text, `text-gray-500` for secondary, `text-gray-400` for tertiary
72	- `bg-white` or `bg-gray-50` for backgrounds — never stark white with stark black
73	- Accent color: pick ONE from Tailwind's palette (blue, emerald, violet, etc.)
74	- Apply 60-30-10: 60% neutrals, 30% secondary, 10% accent
75	- Refer to `references/color-systems.md` for full system
76
77	### Spatial Systems
78	Tailwind's spacing scale provides the rhythm:
79	- Base unit: `4` (1rem / 16px) for most UI
80	- Component padding: `p-4` to `p-6` (16-24px)
81	- Section spacing: `py-12` to `py-20` (48-80px)
82	- Gaps: `gap-4` for tight, `gap-6` for comfortable, `gap-8` for spacious
83	- Use Tailwind's spacing sc

People who liked this also viewed

6 picks

Type