portable-agent-layer 0.29.1 → 0.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/skills/consulting-report/tools/generate-pdf.ts +4 -5
- package/assets/skills/create-skill/SKILL.md +55 -18
- package/assets/skills/presentation/README.md +11 -5
- package/assets/skills/presentation/SKILL.md +93 -17
- package/assets/skills/presentation/demo/slides/011a-big-stat.md +6 -0
- package/assets/skills/presentation/demo/slides/011b-metric-grid.md +22 -0
- package/assets/skills/presentation/demo/slides/011c-pull-quote.md +6 -0
- package/assets/skills/presentation/demo/slides/012-closing.md +2 -2
- package/assets/skills/presentation/template/README.md +4 -3
- package/assets/skills/presentation/theme-base/base.css +193 -35
- package/assets/skills/presentation/theme-base/layouts.css +224 -42
- package/assets/skills/presentation/tools/build.ts +70 -26
- package/assets/skills/presentation/tools/doctor.ts +406 -0
- package/assets/skills/presentation/tools/new-deck.ts +9 -2
- package/package.json +3 -1
- package/src/targets/lib.ts +1 -4
- package/assets/skills/presentation/tools/present.ts +0 -70
|
@@ -1,34 +1,134 @@
|
|
|
1
1
|
/* presentation skill — theme-base/base.css
|
|
2
|
-
* Brand-neutral
|
|
3
|
-
*
|
|
2
|
+
* Brand-neutral design system. Templates declare two anchors (--brand-primary,
|
|
3
|
+
* --brand-accent) and the rest of the system derives from them via color-mix.
|
|
4
|
+
*
|
|
5
|
+
* Token layers (low → high specificity):
|
|
6
|
+
* 1. Anchor — template-supplied (--brand-primary, --brand-accent, --brand-logo)
|
|
7
|
+
* 2. Neutral — pure greys, brand-agnostic
|
|
8
|
+
* 3. Brand scales— derived from anchors via color-mix(in oklch, ...)
|
|
9
|
+
* 4. Semantic — bg/fg/muted/surface/divider, point at neutral by default
|
|
10
|
+
* 5. Type/space/radius/shadow/motion — primitives consumed by all layouts
|
|
11
|
+
*/
|
|
4
12
|
|
|
5
13
|
:root {
|
|
14
|
+
/* ── 1. Anchors ── overridable by template */
|
|
6
15
|
--brand-primary: #0E1335;
|
|
7
|
-
--brand-accent:
|
|
8
|
-
--brand-
|
|
9
|
-
--brand-fg: #111827;
|
|
10
|
-
--brand-muted: #6B7280;
|
|
11
|
-
--brand-surface: #F9FAFB;
|
|
12
|
-
--brand-divider: #E5E7EB;
|
|
16
|
+
--brand-accent: #2563EB;
|
|
17
|
+
--brand-logo: none;
|
|
13
18
|
|
|
14
|
-
|
|
19
|
+
/* ── 2. Neutral scale ── pure grey, never branded */
|
|
20
|
+
--neutral-50: #FAFAFA;
|
|
21
|
+
--neutral-100: #F4F4F5;
|
|
22
|
+
--neutral-200: #E4E4E7;
|
|
23
|
+
--neutral-300: #D4D4D8;
|
|
24
|
+
--neutral-400: #A1A1AA;
|
|
25
|
+
--neutral-500: #71717A;
|
|
26
|
+
--neutral-600: #52525B;
|
|
27
|
+
--neutral-700: #3F3F46;
|
|
28
|
+
--neutral-800: #27272A;
|
|
29
|
+
--neutral-900: #18181B;
|
|
30
|
+
--neutral-950: #09090B;
|
|
15
31
|
|
|
32
|
+
/* ── 3. Brand scales ── derived from anchor via color-mix
|
|
33
|
+
* 50–400 lighten toward white, 600–900 darken toward black, 500 = anchor. */
|
|
34
|
+
--brand-primary-50: color-mix(in oklch, var(--brand-primary) 6%, white);
|
|
35
|
+
--brand-primary-100: color-mix(in oklch, var(--brand-primary) 12%, white);
|
|
36
|
+
--brand-primary-200: color-mix(in oklch, var(--brand-primary) 24%, white);
|
|
37
|
+
--brand-primary-300: color-mix(in oklch, var(--brand-primary) 40%, white);
|
|
38
|
+
--brand-primary-400: color-mix(in oklch, var(--brand-primary) 60%, white);
|
|
39
|
+
--brand-primary-500: var(--brand-primary);
|
|
40
|
+
--brand-primary-600: color-mix(in oklch, var(--brand-primary) 92%, black);
|
|
41
|
+
--brand-primary-700: color-mix(in oklch, var(--brand-primary) 80%, black);
|
|
42
|
+
--brand-primary-800: color-mix(in oklch, var(--brand-primary) 65%, black);
|
|
43
|
+
--brand-primary-900: color-mix(in oklch, var(--brand-primary) 50%, black);
|
|
44
|
+
|
|
45
|
+
--brand-accent-50: color-mix(in oklch, var(--brand-accent) 6%, white);
|
|
46
|
+
--brand-accent-100: color-mix(in oklch, var(--brand-accent) 12%, white);
|
|
47
|
+
--brand-accent-200: color-mix(in oklch, var(--brand-accent) 24%, white);
|
|
48
|
+
--brand-accent-300: color-mix(in oklch, var(--brand-accent) 40%, white);
|
|
49
|
+
--brand-accent-400: color-mix(in oklch, var(--brand-accent) 60%, white);
|
|
50
|
+
--brand-accent-500: var(--brand-accent);
|
|
51
|
+
--brand-accent-600: color-mix(in oklch, var(--brand-accent) 92%, black);
|
|
52
|
+
--brand-accent-700: color-mix(in oklch, var(--brand-accent) 80%, black);
|
|
53
|
+
--brand-accent-800: color-mix(in oklch, var(--brand-accent) 65%, black);
|
|
54
|
+
--brand-accent-900: color-mix(in oklch, var(--brand-accent) 50%, black);
|
|
55
|
+
|
|
56
|
+
/* ── 4. Semantic colors ── named for intent, point at neutrals by default
|
|
57
|
+
* Templates may override directly for dark themes, brand-tinted surfaces, etc. */
|
|
58
|
+
--brand-bg: #FFFFFF;
|
|
59
|
+
--brand-fg: var(--neutral-900);
|
|
60
|
+
--brand-muted: var(--neutral-500);
|
|
61
|
+
--brand-surface: var(--neutral-100);
|
|
62
|
+
--brand-divider: var(--neutral-200);
|
|
63
|
+
|
|
64
|
+
/* ── 5. Typography */
|
|
16
65
|
--font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
17
66
|
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
18
67
|
--font-mono: "JetBrains Mono", "Menlo", "Consolas", monospace;
|
|
19
68
|
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
69
|
+
--text-xs: 0.65em;
|
|
70
|
+
--text-sm: 0.8em;
|
|
71
|
+
--text-base: 1em;
|
|
72
|
+
--text-lg: 1.2em;
|
|
73
|
+
--text-xl: 1.5em;
|
|
74
|
+
--text-2xl: 2em;
|
|
75
|
+
--text-3xl: 2.6em;
|
|
76
|
+
--text-4xl: 3.2em;
|
|
77
|
+
--text-5xl: 4em;
|
|
78
|
+
--text-6xl: 5em;
|
|
79
|
+
--text-display: 7em;
|
|
80
|
+
|
|
81
|
+
--leading-tight: 1.15;
|
|
82
|
+
--leading-snug: 1.3;
|
|
83
|
+
--leading-normal: 1.5;
|
|
84
|
+
--leading-relaxed: 1.7;
|
|
85
|
+
|
|
86
|
+
--tracking-tighter: -0.025em;
|
|
87
|
+
--tracking-tight: -0.015em;
|
|
88
|
+
--tracking-normal: 0;
|
|
89
|
+
--tracking-wide: 0.05em;
|
|
90
|
+
|
|
91
|
+
/* ── 6. Spacing */
|
|
92
|
+
--space-0: 0;
|
|
93
|
+
--space-px: 1px;
|
|
94
|
+
--space-0\.5: 0.25rem;
|
|
95
|
+
--space-1: 0.5rem;
|
|
96
|
+
--space-2: 1rem;
|
|
97
|
+
--space-3: 1.5rem;
|
|
98
|
+
--space-4: 2.5rem;
|
|
99
|
+
--space-5: 4rem;
|
|
100
|
+
--space-6: 6rem;
|
|
101
|
+
--space-7: 8rem;
|
|
102
|
+
|
|
103
|
+
/* ── 7. Radius */
|
|
104
|
+
--radius-sm: 4px;
|
|
105
|
+
--radius-md: 8px;
|
|
106
|
+
--radius-lg: 16px;
|
|
107
|
+
--radius-xl: 24px;
|
|
108
|
+
--radius-full: 9999px;
|
|
109
|
+
|
|
110
|
+
/* ── 8. Shadows */
|
|
111
|
+
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.08);
|
|
112
|
+
--shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.10);
|
|
113
|
+
--shadow-lg: 0 10px 25px rgba(0,0,0,0.10), 0 20px 50px rgba(0,0,0,0.15);
|
|
114
|
+
--shadow-xl: 0 20px 50px rgba(0,0,0,0.20), 0 30px 60px rgba(0,0,0,0.25);
|
|
115
|
+
|
|
116
|
+
/* ── 9. Motion */
|
|
117
|
+
--duration-fast: 120ms;
|
|
118
|
+
--duration-base: 240ms;
|
|
119
|
+
--duration-slow: 480ms;
|
|
120
|
+
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
121
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
25
122
|
}
|
|
26
123
|
|
|
124
|
+
/* ── Base reveal */
|
|
27
125
|
.reveal {
|
|
28
126
|
font-family: var(--font-body);
|
|
29
127
|
font-size: 48px;
|
|
30
128
|
font-weight: 400;
|
|
31
129
|
color: var(--brand-fg);
|
|
130
|
+
-webkit-font-smoothing: antialiased;
|
|
131
|
+
-moz-osx-font-smoothing: grayscale;
|
|
32
132
|
}
|
|
33
133
|
.reveal-viewport { background: var(--brand-bg); }
|
|
34
134
|
|
|
@@ -38,53 +138,70 @@
|
|
|
38
138
|
* Bottom reserve protects the chrome (logo + slide-number) anchored at canvas-bottom.
|
|
39
139
|
* Special layouts (title/section/quote/closing) override below in layouts.css. */
|
|
40
140
|
.reveal .slides > section {
|
|
41
|
-
padding:
|
|
141
|
+
padding: var(--space-4) var(--space-5) var(--space-5);
|
|
42
142
|
box-sizing: border-box;
|
|
43
143
|
}
|
|
44
144
|
|
|
45
|
-
|
|
145
|
+
/* ── Typography */
|
|
46
146
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
|
47
147
|
font-family: var(--font-display);
|
|
48
148
|
color: var(--brand-fg);
|
|
49
|
-
letter-spacing: -
|
|
50
|
-
line-height:
|
|
149
|
+
letter-spacing: var(--tracking-tight);
|
|
150
|
+
line-height: var(--leading-tight);
|
|
51
151
|
margin: 0 0 var(--space-3) 0;
|
|
52
152
|
text-transform: none;
|
|
153
|
+
font-feature-settings: "ss01", "cv11";
|
|
53
154
|
}
|
|
54
|
-
.reveal h1 { font-size:
|
|
55
|
-
.reveal h2 { font-size:
|
|
56
|
-
.reveal h3 { font-size:
|
|
57
|
-
.reveal h4 { font-size:
|
|
155
|
+
.reveal h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tighter); }
|
|
156
|
+
.reveal h2 { font-size: var(--text-2xl); font-weight: 600; }
|
|
157
|
+
.reveal h3 { font-size: var(--text-xl); font-weight: 600; }
|
|
158
|
+
.reveal h4 { font-size: var(--text-lg); font-weight: 600; }
|
|
159
|
+
.reveal h5 { font-size: var(--text-base); font-weight: 600; }
|
|
160
|
+
.reveal h6 { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-muted); }
|
|
58
161
|
|
|
59
|
-
.reveal p { line-height:
|
|
162
|
+
.reveal p { line-height: var(--leading-normal); margin: 0 0 var(--space-2) 0; }
|
|
60
163
|
|
|
61
164
|
.reveal ul, .reveal ol {
|
|
62
165
|
margin: 0 0 var(--space-2) 1.4em;
|
|
63
|
-
line-height:
|
|
166
|
+
line-height: var(--leading-normal);
|
|
64
167
|
}
|
|
65
168
|
.reveal li { margin-bottom: var(--space-1); }
|
|
66
169
|
.reveal li > ul, .reveal li > ol { margin-top: var(--space-1); margin-bottom: 0; }
|
|
170
|
+
.reveal ul li::marker { color: var(--brand-accent); }
|
|
67
171
|
|
|
68
172
|
.reveal a {
|
|
69
173
|
color: var(--brand-accent);
|
|
70
174
|
text-decoration: none;
|
|
71
175
|
border-bottom: 1px solid currentColor;
|
|
176
|
+
transition: color var(--duration-fast) var(--ease-out);
|
|
177
|
+
}
|
|
178
|
+
.reveal a:hover { color: var(--brand-accent-700); }
|
|
179
|
+
|
|
180
|
+
.reveal strong { color: var(--brand-primary); font-weight: 700; }
|
|
181
|
+
.reveal em { font-style: italic; }
|
|
182
|
+
.reveal small { font-size: var(--text-sm); color: var(--brand-muted); }
|
|
183
|
+
.reveal hr {
|
|
184
|
+
border: 0;
|
|
185
|
+
border-top: 1px solid var(--brand-divider);
|
|
186
|
+
margin: var(--space-3) 0;
|
|
72
187
|
}
|
|
73
188
|
|
|
74
189
|
.reveal blockquote {
|
|
75
|
-
border-left:
|
|
76
|
-
margin: 0;
|
|
190
|
+
border-left: 3px solid var(--brand-accent);
|
|
191
|
+
margin: 0 0 var(--space-2) 0;
|
|
77
192
|
padding: var(--space-2) var(--space-3);
|
|
78
193
|
background: var(--brand-surface);
|
|
79
194
|
font-style: italic;
|
|
195
|
+
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
80
196
|
}
|
|
81
197
|
|
|
198
|
+
/* ── Code */
|
|
82
199
|
.reveal pre {
|
|
83
|
-
background:
|
|
84
|
-
border-radius:
|
|
200
|
+
background: var(--neutral-900);
|
|
201
|
+
border-radius: var(--radius-md);
|
|
85
202
|
font-size: 0.7em;
|
|
86
|
-
line-height:
|
|
87
|
-
box-shadow:
|
|
203
|
+
line-height: var(--leading-normal);
|
|
204
|
+
box-shadow: var(--shadow-md);
|
|
88
205
|
}
|
|
89
206
|
.reveal pre code {
|
|
90
207
|
padding: var(--space-2);
|
|
@@ -94,17 +211,21 @@
|
|
|
94
211
|
.reveal :not(pre) > code {
|
|
95
212
|
background: var(--brand-surface);
|
|
96
213
|
padding: 0.1em 0.4em;
|
|
97
|
-
border-radius:
|
|
214
|
+
border-radius: var(--radius-sm);
|
|
98
215
|
font-family: var(--font-mono);
|
|
99
216
|
font-size: 0.85em;
|
|
100
217
|
color: var(--brand-primary);
|
|
101
218
|
}
|
|
102
219
|
|
|
220
|
+
/* ── Tables */
|
|
103
221
|
.reveal table {
|
|
104
222
|
width: 100%;
|
|
105
223
|
border-collapse: collapse;
|
|
106
224
|
margin: var(--space-2) 0;
|
|
107
|
-
font-size:
|
|
225
|
+
font-size: var(--text-sm);
|
|
226
|
+
border-radius: var(--radius-md);
|
|
227
|
+
overflow: hidden;
|
|
228
|
+
box-shadow: var(--shadow-sm);
|
|
108
229
|
}
|
|
109
230
|
.reveal th {
|
|
110
231
|
background: var(--brand-primary);
|
|
@@ -112,14 +233,45 @@
|
|
|
112
233
|
text-align: left;
|
|
113
234
|
padding: var(--space-1) var(--space-2);
|
|
114
235
|
font-weight: 600;
|
|
236
|
+
letter-spacing: var(--tracking-wide);
|
|
237
|
+
font-size: var(--text-xs);
|
|
238
|
+
text-transform: uppercase;
|
|
115
239
|
}
|
|
116
240
|
.reveal td {
|
|
117
241
|
padding: var(--space-1) var(--space-2);
|
|
118
242
|
border-bottom: 1px solid var(--brand-divider);
|
|
119
243
|
}
|
|
120
244
|
.reveal tr:nth-child(even) td { background: var(--brand-surface); }
|
|
245
|
+
.reveal tr:last-child td { border-bottom: 0; }
|
|
121
246
|
|
|
122
|
-
/*
|
|
247
|
+
/* ── Image utilities (composable on any <img> or wrapper) */
|
|
248
|
+
.reveal .image-rounded img,
|
|
249
|
+
.reveal img.image-rounded { border-radius: var(--radius-md); }
|
|
250
|
+
.reveal .image-shadow img,
|
|
251
|
+
.reveal img.image-shadow { box-shadow: var(--shadow-lg); }
|
|
252
|
+
.reveal .image-bleed img,
|
|
253
|
+
.reveal img.image-bleed { width: 100%; height: 100%; object-fit: cover; }
|
|
254
|
+
/* Duotone — converts image to brand-primary tinted monochrome via filter chain */
|
|
255
|
+
.reveal .image-duotone img,
|
|
256
|
+
.reveal img.image-duotone {
|
|
257
|
+
filter: grayscale(1) contrast(1.1);
|
|
258
|
+
mix-blend-mode: multiply;
|
|
259
|
+
background: var(--brand-primary-200);
|
|
260
|
+
}
|
|
261
|
+
/* Overlay — for headline-image style, applies a brand gradient scrim */
|
|
262
|
+
.reveal .image-overlay { position: relative; }
|
|
263
|
+
.reveal .image-overlay::after {
|
|
264
|
+
content: "";
|
|
265
|
+
position: absolute; inset: 0;
|
|
266
|
+
background: linear-gradient(
|
|
267
|
+
to bottom,
|
|
268
|
+
transparent 40%,
|
|
269
|
+
color-mix(in oklch, var(--brand-primary) 75%, transparent) 100%
|
|
270
|
+
);
|
|
271
|
+
pointer-events: none;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
/* ── Footer logo — pseudo on .slides (the canvas) so it inherits Reveal's scale+translate
|
|
123
275
|
* transforms and stays at canvas-bottom-right regardless of the configured `margin`. */
|
|
124
276
|
.reveal .slides::after {
|
|
125
277
|
content: '';
|
|
@@ -134,7 +286,7 @@
|
|
|
134
286
|
z-index: 10;
|
|
135
287
|
}
|
|
136
288
|
|
|
137
|
-
/* Slide number — JS hook in skeleton.html re-parents Reveal's .slide-number into .slides,
|
|
289
|
+
/* ── Slide number — JS hook in skeleton.html re-parents Reveal's .slide-number into .slides,
|
|
138
290
|
* so it shares the same canvas coordinate system as the logo. */
|
|
139
291
|
.reveal .slides > .slide-number {
|
|
140
292
|
position: absolute;
|
|
@@ -148,7 +300,7 @@
|
|
|
148
300
|
font-size: 0.55em;
|
|
149
301
|
font-weight: 400;
|
|
150
302
|
line-height: 28px;
|
|
151
|
-
letter-spacing:
|
|
303
|
+
letter-spacing: var(--tracking-wide);
|
|
152
304
|
padding: 0;
|
|
153
305
|
pointer-events: none;
|
|
154
306
|
z-index: 10;
|
|
@@ -165,3 +317,9 @@
|
|
|
165
317
|
.reveal .slides:has(> section.present[data-layout="closing"]) > .slide-number {
|
|
166
318
|
display: none !important;
|
|
167
319
|
}
|
|
320
|
+
|
|
321
|
+
/* ── Progress bar (Reveal's built-in, themed to brand) */
|
|
322
|
+
.reveal .progress {
|
|
323
|
+
color: var(--brand-accent);
|
|
324
|
+
height: 2px;
|
|
325
|
+
}
|