okforge 0.6.2__py3-none-any.whl
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.
- okforge-0.6.2.dist-info/METADATA +144 -0
- okforge-0.6.2.dist-info/RECORD +54 -0
- okforge-0.6.2.dist-info/WHEEL +4 -0
- okforge-0.6.2.dist-info/entry_points.txt +3 -0
- okforge-0.6.2.dist-info/licenses/LICENSE +190 -0
- openkb/__init__.py +13 -0
- openkb/__main__.py +5 -0
- openkb/_skills/openkb-deck-editorial/SKILL.md +185 -0
- openkb/_skills/openkb-deck-neon/SKILL.md +300 -0
- openkb/_skills/openkb-html-critic/SKILL.md +140 -0
- openkb/agent/__init__.py +1 -0
- openkb/agent/_markdown.py +370 -0
- openkb/agent/chat.py +963 -0
- openkb/agent/chat_session.py +271 -0
- openkb/agent/compiler.py +2435 -0
- openkb/agent/linter.py +119 -0
- openkb/agent/query.py +470 -0
- openkb/agent/skill_runner.py +216 -0
- openkb/agent/skills.py +124 -0
- openkb/agent/tools.py +404 -0
- openkb/cli.py +3032 -0
- openkb/config.py +337 -0
- openkb/converter.py +270 -0
- openkb/deck/__init__.py +34 -0
- openkb/deck/creator.py +122 -0
- openkb/deck/validator.py +246 -0
- openkb/frontmatter.py +138 -0
- openkb/images.py +260 -0
- openkb/indexer.py +196 -0
- openkb/links.py +84 -0
- openkb/lint.py +694 -0
- openkb/locks.py +243 -0
- openkb/log.py +22 -0
- openkb/mutation.py +458 -0
- openkb/okf.py +120 -0
- openkb/prompts/__init__.py +22 -0
- openkb/prompts/skill_create.md +214 -0
- openkb/schema.py +93 -0
- openkb/skill/__init__.py +102 -0
- openkb/skill/creator.py +224 -0
- openkb/skill/evaluator.py +490 -0
- openkb/skill/generator.py +125 -0
- openkb/skill/marketplace.py +118 -0
- openkb/skill/tools.py +103 -0
- openkb/skill/validator.py +277 -0
- openkb/skill/workspace.py +188 -0
- openkb/state.py +127 -0
- openkb/templates/graph.html +907 -0
- openkb/topic_tree.py +229 -0
- openkb/topic_tree_llm.py +104 -0
- openkb/tree_renderer.py +170 -0
- openkb/url_ingest.py +282 -0
- openkb/visualize.py +79 -0
- openkb/watcher.py +101 -0
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: openkb-deck-neon
|
|
3
|
+
description: |
|
|
4
|
+
Use when the user asks the openkb chat to make a deck / slide presentation /
|
|
5
|
+
PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a
|
|
6
|
+
dark, high-tech, neon / glow / glassmorphism look (赛博 / 科技风 / 暗色 /
|
|
7
|
+
霓虹 / 炫酷). Generates a polished single-file HTML deck in the Aurora Glass
|
|
8
|
+
visual direction (near-black background, teal/sky/magenta/amber neon accents,
|
|
9
|
+
glassmorphism panels, aurora gradient atmosphere) — opened in a browser,
|
|
10
|
+
full-screened, shared. For the warm, printed, serif look use
|
|
11
|
+
openkb-deck-editorial instead. Does NOT apply to generating skills
|
|
12
|
+
(`openkb skill new`), research reports, or scrolling long-form documents.
|
|
13
|
+
od:
|
|
14
|
+
mode: deck
|
|
15
|
+
output_path_template: "output/decks/{slug}/index.html"
|
|
16
|
+
deck_grammar:
|
|
17
|
+
kind_attr: data-type
|
|
18
|
+
required: [cover, closing]
|
|
19
|
+
allowed: [cover, chapter, thesis, quote, compare, data, closing]
|
|
20
|
+
min_distinct: 4
|
|
21
|
+
max_consecutive_same: 2
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# Aurora Glass deck skill
|
|
25
|
+
|
|
26
|
+
You are designing a presentation, not writing a research report. Each slide
|
|
27
|
+
carries one idea. In this visual direction, **light, color and glow** organize
|
|
28
|
+
the slide — dark canvas holds it, neon points the eye, glass adds depth.
|
|
29
|
+
|
|
30
|
+
## How this skill is invoked
|
|
31
|
+
|
|
32
|
+
The user typed something like "make a deck about X" (and asked for a dark /
|
|
33
|
+
neon / 科技 look) inside `openkb chat`. You have wiki-read tools in your normal
|
|
34
|
+
tool set, plus a `write_file` tool that can write under `output/**`, plus a
|
|
35
|
+
tool to read this SKILL.md and files in `skills/openkb-deck-neon/` if needed.
|
|
36
|
+
|
|
37
|
+
Pick a kebab-case slug (e.g. `okf-pitch`) and write the output to
|
|
38
|
+
`output/decks/<slug>/index.html`.
|
|
39
|
+
|
|
40
|
+
## Required output
|
|
41
|
+
|
|
42
|
+
Exactly one file: `output/decks/<slug>/index.html`.
|
|
43
|
+
|
|
44
|
+
It must be **self-contained**: NO external `<link rel="stylesheet">`, NO
|
|
45
|
+
external `<script src>`, NO remote `<img>`, **and NO web fonts** (no Google
|
|
46
|
+
Fonts link — that is an external link and breaks self-containment). All CSS in
|
|
47
|
+
one inline `<style>`; keyboard-nav JS in one inline `<script>` at end of
|
|
48
|
+
`<body>` (no scaling script needed — CSS fills the viewport). Use the local font stacks in §Type system — do not reach for Inter,
|
|
49
|
+
Chakra Petch, Orbitron, or any `fonts.googleapis.com` import.
|
|
50
|
+
|
|
51
|
+
The body is a sequence of `<section class="slide" data-type="...">` blocks;
|
|
52
|
+
each `data-type` is one of the 7 values in §Slide grammar. Keyboard nav:
|
|
53
|
+
← / → move between slides, `F` toggles fullscreen, `P` triggers print.
|
|
54
|
+
|
|
55
|
+
## Design system: Aurora Glass
|
|
56
|
+
|
|
57
|
+
Use this fixed design system. Do not improvise nearby colors, do not add a
|
|
58
|
+
fifth accent hue, do not bring in emojis. Glow and gradient are allowed here
|
|
59
|
+
(unlike the editorial skill) — but they are seasoning, not the meal.
|
|
60
|
+
|
|
61
|
+
### Color palette
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
:root {
|
|
65
|
+
--bg: #080b11; /* near-black blue — the canvas, never pure #000 */
|
|
66
|
+
--bg-elev: #0f141d; /* raised surface / slide inner */
|
|
67
|
+
--ink: #eef2f7; /* primary text — body copy uses THIS, not muted */
|
|
68
|
+
--soft: #aeb8c7; /* secondary text */
|
|
69
|
+
--muted: #69748a; /* labels / folio / metadata */
|
|
70
|
+
--line: rgba(255,255,255,.09); /* hairline borders */
|
|
71
|
+
--glass: rgba(255,255,255,.04); /* glassmorphism fill */
|
|
72
|
+
--teal: #2dd4bf; /* PRIMARY accent */
|
|
73
|
+
--sky: #38bdf8; /* secondary accent */
|
|
74
|
+
--magenta: #e879f9; /* tertiary accent */
|
|
75
|
+
--amber: #f6b94b; /* highlight / numbers-in-code only */
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
These 4 neon hues + the neutrals are the **only** colors. No purple-on-white
|
|
80
|
+
gradients, no rainbow, no per-slide recoloring.
|
|
81
|
+
|
|
82
|
+
### Type system (local fonts only — NO web fonts)
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
--font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
86
|
+
"PingFang SC", "Microsoft YaHei", sans-serif; /* heavy weights */
|
|
87
|
+
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
|
|
88
|
+
monospace; /* labels, numbers, code, kickers */
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Display titles use `--font-display` at weight 800 with `letter-spacing:-.02em`.
|
|
92
|
+
The tech character here comes from **mono for every label / number / kicker /
|
|
93
|
+
code**, not from a fancy downloaded display face.
|
|
94
|
+
|
|
95
|
+
Type scale — use `clamp()` so type scales with the viewport (fixed px look tiny
|
|
96
|
+
on a 2560px screen). vw drives the middle value; the rem caps keep it sane:
|
|
97
|
+
* `--type-display`: clamp(2.8rem, 5.2vw, 5.5rem) / 1.05 — cover/chapter titles
|
|
98
|
+
* `--type-title`: clamp(1.9rem, 3.2vw, 3rem) / 1.12 — normal slide titles
|
|
99
|
+
* `--type-body`: clamp(1.05rem, 1.4vw, 1.4rem) / 1.6 — body copy (var(--ink))
|
|
100
|
+
* `--type-quote`: clamp(1.6rem, 2.6vw, 2.2rem) / 1.35 — pull quotes
|
|
101
|
+
* `--type-label`: size `clamp(.66rem,.8vw,.8rem)`, `letter-spacing:.22em`, uppercase, mono — label tracks
|
|
102
|
+
|
|
103
|
+
### Atmosphere (fixed background layers on every slide)
|
|
104
|
+
|
|
105
|
+
1. **Aurora**: 3–4 blurred `radial-gradient`s in teal / sky / magenta / amber,
|
|
106
|
+
low alpha (.10–.16), `filter: blur(14px)`. Positioned off the title.
|
|
107
|
+
2. **Grain**: an inline SVG `feTurbulence` noise data-URI at `opacity:.04`
|
|
108
|
+
(data-URI is inline, NOT an external image — allowed).
|
|
109
|
+
3. Optional faint dot-grid via `radial-gradient` background, alpha < .06.
|
|
110
|
+
|
|
111
|
+
These three layers are what stop the dark background from looking flat/cheap.
|
|
112
|
+
|
|
113
|
+
### Frame (every slide)
|
|
114
|
+
|
|
115
|
+
* **Every slide fills the entire viewport — edge to edge, no letterbox, no
|
|
116
|
+
fixed card.** The slide IS the window; design for a wide canvas and let
|
|
117
|
+
flexbox + `clamp()` sizing adapt to any window ratio:
|
|
118
|
+
```css
|
|
119
|
+
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
|
|
120
|
+
.slide{position:fixed;inset:0;display:none;flex-direction:column;
|
|
121
|
+
justify-content:center;
|
|
122
|
+
padding:clamp(40px,5vh,72px) clamp(56px,5vw,128px)}
|
|
123
|
+
.slide.active{display:flex}
|
|
124
|
+
```
|
|
125
|
+
No scaling/transform tricks — CSS alone fills the viewport. On an ultrawide
|
|
126
|
+
window the slide is simply wider than 16:9; content reflows and the dark
|
|
127
|
+
background + aurora bleed to all four edges — never a centered card with dark
|
|
128
|
+
side-bands. One slide visible at a time; ← / → swap the active slide, `F`
|
|
129
|
+
fullscreen, `P` print (they do not scroll).
|
|
130
|
+
* The aurora, dot-grid, top label row and the bottom signature bar all span the
|
|
131
|
+
FULL viewport width (they live on `.slide`, which is the whole window). Inner
|
|
132
|
+
padding uses the `clamp()` values above so content breathes on any size.
|
|
133
|
+
* **One screen, no scroll — content MUST fit the viewport height.** With
|
|
134
|
+
`overflow:hidden` + `justify-content:center`, a slide taller than the window
|
|
135
|
+
is clipped at BOTH top and bottom and is unreachable. Stay within the
|
|
136
|
+
bullet/word caps (§Failure modes), lean on the `vh` terms in the type scale so
|
|
137
|
+
text shrinks on short viewports, and if a slide would overflow, CUT content —
|
|
138
|
+
never let it clip.
|
|
139
|
+
* **Visual signature:** a glowing 3px bar along the bottom edge, gradient
|
|
140
|
+
`teal → sky → magenta`, with `box-shadow:0 0 14px` of --teal. This is the
|
|
141
|
+
deck's signature — present on every slide.
|
|
142
|
+
* Top label row (mono, --muted): left = chapter id ("CHAPTER 03"), right =
|
|
143
|
+
source mark. Cover/closing use "OPENKB" on the left instead.
|
|
144
|
+
* Bottom folio row (mono): left = `N / Total`, right = source short label.
|
|
145
|
+
|
|
146
|
+
### Glow & glass rules (read this — it is the #1 failure mode)
|
|
147
|
+
|
|
148
|
+
* **Glow only the protagonist** of a slide: the display title, the one big
|
|
149
|
+
number, graph nodes. Body copy, labels, tables NEVER glow. A slide where
|
|
150
|
+
everything glows reads as blurry mush.
|
|
151
|
+
* Glass (`--glass` fill + `backdrop-filter:blur(8px)` + 1px --line border +
|
|
152
|
+
subtle inset highlight) is for **compare columns and data cards only**.
|
|
153
|
+
* Gradient text (teal→sky→magenta via `background-clip:text`) is reserved for
|
|
154
|
+
cover / chapter / closing big titles and `data` numbers — not for body.
|
|
155
|
+
|
|
156
|
+
### Composition rules
|
|
157
|
+
|
|
158
|
+
**Use the WHOLE canvas — never a left sliver with a big empty right half.**
|
|
159
|
+
This is the #1 layout failure under fill-viewport. Every slide must span the
|
|
160
|
+
width via ONE of these (vary them across the deck):
|
|
161
|
+
|
|
162
|
+
* **Split** — default for `thesis` / `chapter` / `closing` (and `cover` when it
|
|
163
|
+
has a visual). A 2-column grid that fills the slide:
|
|
164
|
+
`.inner{display:grid; grid-template-columns:1.05fr .95fr;
|
|
165
|
+
gap:clamp(40px,5vw,96px); align-items:center; width:100%;
|
|
166
|
+
max-width:min(1600px,92vw); margin:0 auto}`. Text in one column; a
|
|
167
|
+
**first-class VISUAL in the other** — a big labeled stat, a schema/spec
|
|
168
|
+
table, stacked labeled cards, or a simple diagram — sized `width:100%` to
|
|
169
|
+
fill its column, NEVER a thumbnail in a corner.
|
|
170
|
+
**Build the visual with HTML + CSS (flex/grid); put every label in its own
|
|
171
|
+
HTML box** so boxes auto-wrap and auto-space and never collide. Do NOT put
|
|
172
|
+
text in `<svg><text>` — SVG text does not wrap or reflow, so multiple labels
|
|
173
|
+
in a narrow column overlap into an unreadable smear. Use SVG ONLY for
|
|
174
|
+
lines / arrows / shapes between the HTML boxes (or skip SVG). Keep it to ≤4
|
|
175
|
+
nodes/cards with SHORT labels (node ≤2 words, caption ≤4 words); if labels run
|
|
176
|
+
long or there are many, use a VERTICAL stack of full-width rows, never a
|
|
177
|
+
cramped horizontal graph.
|
|
178
|
+
* **Full-bleed headline** — `cover`, big `thesis`. The gradient display title
|
|
179
|
+
spans ~70vw across the upper canvas; subtitle + a thin full-width detail row
|
|
180
|
+
(kicker / stat strip / row of chips) beneath. The title fills the width, so
|
|
181
|
+
there is no right-hand void.
|
|
182
|
+
* **Centered focus** — `data`, `quote`. `.inner{max-width:min(900px,72vw);
|
|
183
|
+
margin:0 auto; text-align:center}` with SYMMETRIC breathing room on both
|
|
184
|
+
sides (never one-sided dead space).
|
|
185
|
+
* **`compare`** — `.inner{max-width:min(1180px,90vw); margin:0 auto;
|
|
186
|
+
display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,56px)}`, with
|
|
187
|
+
the glowing teal rule between columns.
|
|
188
|
+
|
|
189
|
+
**Per-slide self-test: is there a large empty right half? Then the layout is
|
|
190
|
+
wrong** — widen the headline, add the visual column, or center it. The closing
|
|
191
|
+
diagram, compare columns, and any flow/graph MUST fill their region, never
|
|
192
|
+
shrink to a corner. Never size a content box to `min-content`/`fit-content`
|
|
193
|
+
(collapses to a sliver).
|
|
194
|
+
|
|
195
|
+
* `data` big number: give it its OWN width — `display:inline-block;
|
|
196
|
+
width:max-content; max-width:92vw; white-space:nowrap; margin:0 auto` — so it
|
|
197
|
+
is NOT clipped by the `.inner` text column, and (with `background-clip:text`)
|
|
198
|
+
the gradient covers the WHOLE string instead of stopping at the column edge
|
|
199
|
+
and leaving the last char unpainted/smeared under the glow. Size a SINGLE
|
|
200
|
+
number with `clamp(3.5rem,11vh,9rem)`; a COMPARISON number (`A → B`, `A vs B`)
|
|
201
|
+
is far wider — drop it to `clamp(2.4rem,7vh,5.5rem)` and keep the whole string
|
|
202
|
+
(incl. the trailing `%`) inside 92vw, never overflowing. Body beneath stays
|
|
203
|
+
centered in the `.inner` as a readable ~3-line paragraph.
|
|
204
|
+
* Cover/chapter titles never wrap an article ("the"/"an"/"to") onto its own line.
|
|
205
|
+
* Contrast: body is `--ink` on `--bg`; never body copy in `--muted`/`--soft`
|
|
206
|
+
(exception: `quote` pull-quotes and cover/closing subtitles may be `--soft`).
|
|
207
|
+
|
|
208
|
+
## Slide grammar (7 permitted `data-type` values)
|
|
209
|
+
|
|
210
|
+
| `data-type` | Use | Neon signature |
|
|
211
|
+
|---|---|---|
|
|
212
|
+
| `cover` | tag + huge gradient title + 1-line subtitle | strongest aurora; mono "OPENKB" top-left; gradient display title |
|
|
213
|
+
| `chapter` | section divider: oversize number + name | number `clamp(4rem,12vh,9rem)` mono, teal with glow; name in `--type-display` |
|
|
214
|
+
| `thesis` | one claim + short explanation | title fills ~60% height; ONE keyword in teal+glow; rest --ink |
|
|
215
|
+
| `quote` | italic pull-quote + attribution | centered; left teal glowing vertical rule; quote in --soft |
|
|
216
|
+
| `compare` | two-column comparison, 3–5 lines each | two glass panels; glowing teal vertical rule between them |
|
|
217
|
+
| `data` | one number + label + one-line read | single number `clamp(3.5rem,11vh,9rem)`; comparison `A → B` `clamp(2.4rem,7vh,5.5rem)`; `width:max-content;max-width:92vw` (per §Composition); micro-copy in `--type-label` |
|
|
218
|
+
| `closing` | mirrors cover; thanks / next step | same scale as cover; aurora dims toward calm |
|
|
219
|
+
|
|
220
|
+
Cover/closing have no chapter context → top-left label is "OPENKB".
|
|
221
|
+
|
|
222
|
+
## Working method
|
|
223
|
+
|
|
224
|
+
1. **Survey first.** Use wiki-read tools to list `concepts/` and `summaries/`
|
|
225
|
+
and read `wiki/index.md`. Build a mental map before deciding the argument.
|
|
226
|
+
2. **Choose a narrative arc.** One-line thesis, then an 8–12 step arc. Each
|
|
227
|
+
step → 1–2 slides, landing 8–15 slides total.
|
|
228
|
+
3. **Read the relevant content.** For each concept the arc touches, read the
|
|
229
|
+
concept page; for cited documents read a targeted slice. **The deck is only
|
|
230
|
+
as expert as the source-reading you do here.** Generic restatements are a
|
|
231
|
+
failure mode — name a specific technique, number, or quote on each slide.
|
|
232
|
+
4. **Outline slides** with concrete `data-type` assignments. Vary types — ≥4
|
|
233
|
+
distinct, no run of 3+ consecutive same type.
|
|
234
|
+
5. **Write** `output/decks/<slug>/index.html` in one `write_file` call. Inline
|
|
235
|
+
all CSS, inline keyboard-nav JS, inline `<svg>` for any graphics, inline
|
|
236
|
+
noise as a data-URI. No external anything.
|
|
237
|
+
6. **Revise** against §Failure modes; touch at least one slide if any match.
|
|
238
|
+
7. **Self-check** the invariants below; fix anything failing.
|
|
239
|
+
8. Report the deck path + a one-line summary of the arc.
|
|
240
|
+
|
|
241
|
+
## Failure modes (negative checklist)
|
|
242
|
+
|
|
243
|
+
1. **External fonts/assets** — any `fonts.googleapis.com`, `<script src>`,
|
|
244
|
+
`<link>`, or remote `<img>`. Breaks self-containment AND the deck validator.
|
|
245
|
+
Use the local stacks; the look does not depend on a downloaded font.
|
|
246
|
+
2. **Glow soup** — more than the protagonist glowing. Body/labels/tables flat.
|
|
247
|
+
3. **Low contrast** — body text in --muted/--soft on dark. Body is --ink.
|
|
248
|
+
4. **Palette drift** — any hue outside teal/sky/magenta/amber + neutrals;
|
|
249
|
+
purple-gradient-on-white; emoji; per-slide recoloring.
|
|
250
|
+
5. **Bullet dump** — >5 bullets. Cut to 3 or restructure into compare/data.
|
|
251
|
+
6. **Wall of text** — slide body >~80 words. Cut or split.
|
|
252
|
+
7. **Visual monotony** — 3+ consecutive slides of one `data-type`.
|
|
253
|
+
8. **Decorative-only viz** — an SVG/graph that says nothing. If you draw a
|
|
254
|
+
graph, its nodes/edges must encode real concepts/links from the KB. On a
|
|
255
|
+
single slide prefer a small, exact, hand-placed SVG over a fake "force layout".
|
|
256
|
+
9. **Generic titles** — "Introduction"/"Background". Titles carry content.
|
|
257
|
+
10. **Definition-grade content** — "X is Y where Y is…" with no named
|
|
258
|
+
technique, number, or source quote. Re-read sources (step 3) first.
|
|
259
|
+
11. **Letterbox / fixed-size card** — capping the slide with `max-width` or a
|
|
260
|
+
fixed `1280×720` box, leaving dark side-bands on a wide window. Slides are
|
|
261
|
+
`position:fixed;inset:0` and fill the viewport edge-to-edge (§Frame).
|
|
262
|
+
12. **Collapsed content column** — a centered / `data` box sizing to
|
|
263
|
+
`min-content` or a tiny `max-width`, squashing text into a narrow sliver on
|
|
264
|
+
a wide screen (and breaking big numbers). Wrap content in an `.inner` with
|
|
265
|
+
an explicit `max-width` (§Composition); big numbers `white-space:nowrap`.
|
|
266
|
+
13. **Invalid SVG sizing** — `height="auto"` written as an SVG *attribute*
|
|
267
|
+
(invalid; fires a console error). Give inline SVG a `viewBox` and size it
|
|
268
|
+
with CSS (`width:100%;height:auto` in a `style`) or fixed `width`/`height`
|
|
269
|
+
attributes — never `height="auto"` as an attribute.
|
|
270
|
+
14. **Left sliver / right void** — content crammed into a left column with a
|
|
271
|
+
large empty right half (the worst look). Use a split / full-bleed / centered
|
|
272
|
+
layout (§Composition) so the right half is content or symmetric space.
|
|
273
|
+
15. **Overflowing big number** — a `data` comparison number (`A → B`/`A vs B`)
|
|
274
|
+
at the single-number font size overruns its container; the trailing `%`
|
|
275
|
+
falls outside the `background-clip:text` gradient and smears under the glow.
|
|
276
|
+
Give the number `width:max-content; max-width:92vw` and the smaller
|
|
277
|
+
comparison font size (§Composition).
|
|
278
|
+
16. **Overlapping diagram labels** — text placed in `<svg><text>` (which never
|
|
279
|
+
wraps) so multiple labels in the narrow visual column collide into a smear.
|
|
280
|
+
Build the visual in HTML/CSS with each label in its own auto-spaced box;
|
|
281
|
+
use SVG for lines/shapes only, ≤4 nodes, short labels (§Composition).
|
|
282
|
+
|
|
283
|
+
## Self-check (before reporting back)
|
|
284
|
+
|
|
285
|
+
1. Does `output/decks/<slug>/index.html` exist with NO external
|
|
286
|
+
`<link>`/`<script src>`/web-font import/remote `<img>`?
|
|
287
|
+
2. At least one `data-type="cover"` and one `data-type="closing"`?
|
|
288
|
+
3. Total slide count between 8 and 15?
|
|
289
|
+
4. At least 4 distinct `data-type` values, no run of 3+ same?
|
|
290
|
+
5. Is body copy in `--ink` (readable on dark) — `quote` pull-quotes and
|
|
291
|
+
cover/closing subtitles in `--soft` being the only allowed exceptions — and
|
|
292
|
+
is glow limited to titles / big numbers / graph nodes only?
|
|
293
|
+
6. Do slides fill the viewport edge-to-edge (`position:fixed;inset:0`, no
|
|
294
|
+
`max-width` / fixed `1280px` box, no letterbox side-bands)?
|
|
295
|
+
7. Is content wrapped in an `.inner` with an explicit `max-width` — no narrow
|
|
296
|
+
sliver / `min-content` collapse, and big numbers `white-space:nowrap`?
|
|
297
|
+
8. Does every slide use the full width (split / full-bleed / centered) with NO
|
|
298
|
+
large empty right half, and do text-heavy slides carry a visual?
|
|
299
|
+
|
|
300
|
+
If any answer is no, revise and re-run this self-check.
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: openkb-html-critic
|
|
3
|
+
description: |
|
|
4
|
+
Use to review a generated HTML deck or single-page artifact for visual
|
|
5
|
+
quality and structural correctness. Especially good at catching CSS
|
|
6
|
+
specificity bugs where slide-modifier classes (.divider, .center, .q,
|
|
7
|
+
.flow etc.) accidentally override the base .slide{display:none} and
|
|
8
|
+
cause one slide to stack on top of every other. Also catches missing
|
|
9
|
+
keyboard navigation, bullet-dump / wall-of-text failure modes, broken
|
|
10
|
+
self-containment (external link/script/img). Patches the file in
|
|
11
|
+
place; never changes the original content (slide text, numbers, named
|
|
12
|
+
entities are the author's work, not yours).
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# HTML deck critic
|
|
16
|
+
|
|
17
|
+
You are a senior front-end designer reviewing an already-generated
|
|
18
|
+
single-file HTML deck. You did NOT write the deck — someone else did,
|
|
19
|
+
and your job is to **patch it for visual correctness without rewriting
|
|
20
|
+
the content**.
|
|
21
|
+
|
|
22
|
+
## How this skill is invoked
|
|
23
|
+
|
|
24
|
+
The user (CLI: `openkb deck new --critique`, chat: `/critique <path>`)
|
|
25
|
+
points you at a single HTML file under `output/`. Read it, find issues
|
|
26
|
+
from the checklist below, and write the corrected version back in **one
|
|
27
|
+
atomic `write_file` call** (full file contents, never partial).
|
|
28
|
+
|
|
29
|
+
The path is in the user intent block above.
|
|
30
|
+
|
|
31
|
+
## Checklist (run in order, report what you found)
|
|
32
|
+
|
|
33
|
+
### 1. CSS specificity — the #1 bug source
|
|
34
|
+
|
|
35
|
+
LLM-written deck CSS typically has:
|
|
36
|
+
|
|
37
|
+
```css
|
|
38
|
+
.slide { display: none; ... }
|
|
39
|
+
.slide.active { display: flex; } /* or display: grid */
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
But then later defines slide-modifier classes:
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
.divider { display: flex; ... } /* ← BUG */
|
|
46
|
+
.center { display: flex; ... } /* ← BUG */
|
|
47
|
+
.q { display: flex; ... } /* ← BUG */
|
|
48
|
+
.hero { display: grid; ... } /* ← BUG */
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Because `.divider` and `.slide` have the same specificity but the
|
|
52
|
+
modifier comes LATER in source order, `.divider` wins. Result: any
|
|
53
|
+
slide with `class="slide divider"` **always displays**, regardless of
|
|
54
|
+
the `active` class. Multiple slides stack on top of each other, the
|
|
55
|
+
deck appears to "not paginate".
|
|
56
|
+
|
|
57
|
+
**Fix:** strip `display: <foo>;` from any single-class selector that
|
|
58
|
+
matches a slide modifier (anything that appears in a `<section
|
|
59
|
+
class="slide X">` where `X` is the modifier name). The remaining
|
|
60
|
+
declarations (flex-direction, gap, alignment, background) stay. After
|
|
61
|
+
the patch, only `.slide` and `.slide.active` (or `.active`) control
|
|
62
|
+
the `display` property.
|
|
63
|
+
|
|
64
|
+
Quick scan: list every `<section class="slide ...">` and collect the
|
|
65
|
+
extra class names. For each, find that class's CSS rule; if it has a
|
|
66
|
+
`display:` declaration, that's the bug. Fix all of them in one pass.
|
|
67
|
+
|
|
68
|
+
### 2. Navigation works
|
|
69
|
+
|
|
70
|
+
There should be JS that:
|
|
71
|
+
|
|
72
|
+
- Listens for ArrowLeft / ArrowRight (and PageUp / PageDown / Space if
|
|
73
|
+
the deck supports them) and toggles `.active`.
|
|
74
|
+
- Optionally reads URL hash (`#3` or `#slide-3`) to deep-link.
|
|
75
|
+
- Optionally listens for `f` / `F` (fullscreen) and `p` / `P` (print).
|
|
76
|
+
|
|
77
|
+
If keyboard nav is broken or missing, add the standard handler. Don't
|
|
78
|
+
invent new keys — stick to the conventions above.
|
|
79
|
+
|
|
80
|
+
### 3. Slide structure invariants
|
|
81
|
+
|
|
82
|
+
- ≥ 1 cover-style slide (the first one).
|
|
83
|
+
- ≥ 1 closing-style slide (the last one).
|
|
84
|
+
- Total count in a reasonable range (typically 6–20).
|
|
85
|
+
- If the deck uses `data-type` attributes, no run of 3+ consecutive
|
|
86
|
+
same-type slides (visual monotony failure).
|
|
87
|
+
|
|
88
|
+
### 4. Self-containment
|
|
89
|
+
|
|
90
|
+
- No `<link rel="stylesheet" href="http...">` — all CSS must be in
|
|
91
|
+
inline `<style>` blocks.
|
|
92
|
+
- No `<script src="http...">` — all JS inline.
|
|
93
|
+
- No `<img src="http...">` — only `data:` URIs or inline `<svg>`.
|
|
94
|
+
(Networked image references break offline use and air-gapped
|
|
95
|
+
presentations.)
|
|
96
|
+
|
|
97
|
+
If any external reference is present, replace with a local equivalent
|
|
98
|
+
if possible or remove the offending element.
|
|
99
|
+
|
|
100
|
+
### 5. Failure modes (touch only obvious cases)
|
|
101
|
+
|
|
102
|
+
These are the editorial discipline rules. Be conservative — if you're
|
|
103
|
+
not sure a slide is "too dense", leave it alone. Only fix the
|
|
104
|
+
unambiguous cases:
|
|
105
|
+
|
|
106
|
+
- **Bullet dump**: any slide with **more than 8 list items** in a single
|
|
107
|
+
list. Cut to the 5 strongest.
|
|
108
|
+
- **Wall of text**: any slide body with **more than 150 words**. Trim
|
|
109
|
+
or split into two slides.
|
|
110
|
+
- **Visual monotony**: 3+ consecutive slides with the exact same
|
|
111
|
+
layout class — break by inserting a divider or rebalancing.
|
|
112
|
+
|
|
113
|
+
## Working method
|
|
114
|
+
|
|
115
|
+
1. **Read the file** at the path given in the user intent. Use the
|
|
116
|
+
`read_output_or_skill_file` tool — it accepts a KB-relative path
|
|
117
|
+
like ``output/decks/foo/index.html`` and returns the full text.
|
|
118
|
+
(The wiki-scoped ``read_file`` tool only sees ``wiki/`` — it cannot
|
|
119
|
+
read ``output/``. Use ``read_output_or_skill_file`` instead.)
|
|
120
|
+
2. **Diagnose**: walk each checklist item, accumulating a list of
|
|
121
|
+
concrete patches.
|
|
122
|
+
3. **Apply patches** mentally: produce the corrected full HTML.
|
|
123
|
+
4. **One atomic write**: call `write_file(path, corrected_html)` once
|
|
124
|
+
with the FULL corrected file. Don't write partial files.
|
|
125
|
+
5. **Report**: in your final message, say what you changed in 2-4
|
|
126
|
+
bullet points (e.g. "Stripped display:flex from .divider and .q —
|
|
127
|
+
they were causing every slide to look the same"). Be specific and
|
|
128
|
+
short.
|
|
129
|
+
|
|
130
|
+
## Hard rule: do NOT change the content
|
|
131
|
+
|
|
132
|
+
The slide text, dollar figures, named products, quotes, attributions —
|
|
133
|
+
all of that is the **original author's** work. You are a visual
|
|
134
|
+
critic, not a content editor. Touch CSS, JS, and structural HTML; do
|
|
135
|
+
NOT rewrite slide bodies.
|
|
136
|
+
|
|
137
|
+
If the content is bad in your view (generic, wrong, etc.), say so in
|
|
138
|
+
your report but leave it. The user can decide whether to regenerate.
|
|
139
|
+
|
|
140
|
+
Begin.
|
openkb/agent/__init__.py
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"""okforge agent package — wiki tool functions and agent definitions."""
|