understanding-prime-env 0.1.7 → 0.1.9
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/package.json
CHANGED
|
@@ -1,262 +1,285 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: understand-prime-env
|
|
3
|
-
description: Generate a rich, self-contained HTML report that fully explains a Prime Intellect verifiers environment. Use this skill any time the user asks to understand, explain, document, visualize, or explore a verifiers environment — even if they just say "what does this environment do?", "explain this env", "give me an overview", or "generate an HTML for this environment". The skill reads the Python source files in the current directory, extracts the
|
|
3
|
+
description: Generate a rich, self-contained HTML report that fully explains a Prime Intellect verifiers environment. Use this skill any time the user asks to understand, explain, document, visualize, or explore a verifiers environment — even if they just say "what does this environment do?", "explain this env", "give me an overview", or "generate an HTML for this environment". The skill reads the Python source files in the current directory, extracts the dataset, reward functions, and rollout logic, and writes a visually stunning infographic-style HTML file to the environment folder.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Understand Prime Environment
|
|
7
7
|
|
|
8
8
|
## Goal
|
|
9
9
|
|
|
10
|
-
Produce a single self-contained
|
|
10
|
+
Produce a single self-contained `environment_overview.html`. An ML researcher opens it and **gets the full picture in under 10 seconds** — no reading required. The design is infographic-first: diagrams, flow charts, and big numbers dominate. Text exists only to label what the visuals show. Tapping any section slides open a detail drawer with the full technical depth.
|
|
11
|
+
|
|
12
|
+
The experience has two layers:
|
|
13
|
+
1. **Scan layer** — the full page, visible immediately. Every section is a visual unit: a flow diagram, a metric cluster, a reward breakdown chart. Labels are short. Numbers are big. The researcher understands the environment without reading a word.
|
|
14
|
+
2. **Drill layer** — tap any section → a smooth panel slides in from the right with complete technical detail: exact field names, regex patterns, formula, full example row.
|
|
11
15
|
|
|
12
16
|
---
|
|
13
17
|
|
|
14
18
|
## Step 1 — Read the source
|
|
15
19
|
|
|
16
|
-
Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if
|
|
20
|
+
Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if present. Do not skip helper files — reward logic is often split across modules (`*_checks.py`, `*_prompts.py`, etc.). Read everything before writing a single line of HTML.
|
|
17
21
|
|
|
18
|
-
Extract
|
|
22
|
+
Extract the following. Be precise — do not invent values:
|
|
19
23
|
|
|
20
|
-
###
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
+
### A — Identity
|
|
25
|
+
- Environment name
|
|
26
|
+
- One-line task description (what skill does this train?)
|
|
27
|
+
- GitHub URL only if found verbatim in source or README — otherwise omit entirely
|
|
28
|
+
- 3–5 key stats: dataset size, number of rewards, number of turns, task type, etc.
|
|
24
29
|
|
|
25
|
-
###
|
|
26
|
-
-
|
|
27
|
-
- Every field
|
|
28
|
-
- One complete example row
|
|
30
|
+
### B — Dataset
|
|
31
|
+
- Source: HuggingFace dataset + split, hardcoded list, or generator — one line
|
|
32
|
+
- Every field: name, type, purpose
|
|
33
|
+
- One complete real example row — all fields, real values, nothing truncated
|
|
29
34
|
|
|
30
|
-
###
|
|
31
|
-
- Every reward function: name,
|
|
32
|
-
-
|
|
33
|
-
- If rewards combine into a final score: the exact formula
|
|
35
|
+
### C — Rewards
|
|
36
|
+
- Every reward function: name, what it checks, what earns 0 vs 1 (and any partials), any thresholds or regex
|
|
37
|
+
- If rewards combine: the exact formula
|
|
34
38
|
|
|
35
|
-
###
|
|
36
|
-
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
5. What a perfect response looks like vs a zero-score response
|
|
39
|
+
### D — Rollout
|
|
40
|
+
- How raw row → prompt (exact template if present)
|
|
41
|
+
- What the model is expected to output
|
|
42
|
+
- How each reward fires on a sample output
|
|
43
|
+
- How final score is computed
|
|
44
|
+
- What a perfect response looks like vs a zero-score response
|
|
42
45
|
|
|
43
46
|
---
|
|
44
47
|
|
|
45
48
|
## Step 2 — Generate the HTML
|
|
46
49
|
|
|
47
|
-
Write a single **self-contained** HTML file
|
|
50
|
+
Write a single **self-contained** HTML file. Zero external dependencies — all CSS and JS inline. No framework. No CDN.
|
|
48
51
|
|
|
49
52
|
---
|
|
50
53
|
|
|
51
|
-
###
|
|
54
|
+
### Layout
|
|
55
|
+
|
|
56
|
+
Full-page dark canvas. A single centered column, `max-width: 760px`, generous vertical padding. No sidebar. No nav. No tabs.
|
|
52
57
|
|
|
53
|
-
The
|
|
58
|
+
The page has exactly **four visual sections**, stacked vertically, each separated by `60px` of breathing room:
|
|
54
59
|
|
|
55
60
|
```
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
61
|
+
[HEADER] — name, one-line description, stat chips, GitHub pill
|
|
62
|
+
[DATASET] — schema diagram + tap to see full example row
|
|
63
|
+
[REWARDS] — horizontal bar chart of reward functions + tap for detail
|
|
64
|
+
[ROLLOUT] — horizontal flow diagram → tap any node for step detail
|
|
60
65
|
```
|
|
61
66
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
When card 4 is shown, "Continue →" becomes "Done ✓" and clicking it does nothing (or fades the stack out gracefully).
|
|
67
|
+
Each section is a self-contained card. Each card has a **tap target** — the whole card or a labeled "See details →" affordance — that opens a detail drawer.
|
|
65
68
|
|
|
66
69
|
---
|
|
67
70
|
|
|
68
71
|
### Visual Design
|
|
69
72
|
|
|
70
|
-
**Background:**
|
|
73
|
+
**Background:**
|
|
71
74
|
```css
|
|
72
75
|
body {
|
|
73
|
-
background: #
|
|
76
|
+
background: #080b12;
|
|
74
77
|
background-image:
|
|
75
|
-
radial-gradient(ellipse at
|
|
76
|
-
radial-gradient(ellipse at
|
|
78
|
+
radial-gradient(ellipse at 15% 0%, rgba(99,102,241,0.07) 0%, transparent 45%),
|
|
79
|
+
radial-gradient(ellipse at 85% 100%, rgba(20,184,166,0.05) 0%, transparent 45%);
|
|
77
80
|
min-height: 100vh;
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
align-items: center;
|
|
81
|
-
justify-content: center;
|
|
81
|
+
font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
|
|
82
|
+
color: #e2e8f0;
|
|
82
83
|
}
|
|
83
84
|
```
|
|
84
85
|
|
|
85
86
|
**Card base:**
|
|
86
87
|
```css
|
|
87
|
-
.card {
|
|
88
|
-
position: absolute;
|
|
89
|
-
width: min(600px, 90vw);
|
|
88
|
+
.section-card {
|
|
90
89
|
background: #0d1117;
|
|
91
|
-
border
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
border: 1px solid rgba(255,255,255,0.07);
|
|
91
|
+
border-radius: 16px;
|
|
92
|
+
padding: 28px 32px;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
transition: border-color 0.2s ease;
|
|
95
95
|
}
|
|
96
|
+
.section-card:hover { border-color: rgba(255,255,255,0.15); }
|
|
96
97
|
```
|
|
97
98
|
|
|
98
|
-
**
|
|
99
|
+
**Section accent colors** — used for borders, labels, highlights, chart fills:
|
|
99
100
|
```
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
Header / Identity: #6366f1 (indigo)
|
|
102
|
+
Dataset: #14b8a6 (teal)
|
|
103
|
+
Rewards: #f59e0b (amber)
|
|
104
|
+
Rollout: #f43f5e (rose)
|
|
104
105
|
```
|
|
105
106
|
|
|
106
|
-
|
|
107
|
+
**Typography:**
|
|
108
|
+
- Section label: `0.65rem`, accent color, `letter-spacing: 0.12em`, uppercase, `font-weight: 500`
|
|
109
|
+
- Section title: `1.1rem`, white, `font-weight: 700`
|
|
110
|
+
- Body / labels: `0.8rem`, `#64748b`
|
|
111
|
+
- Big numbers / diagram nodes: `1.6–2.4rem`, white or accent, `font-weight: 800`
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
### Section 1 — Header
|
|
107
116
|
|
|
108
117
|
```
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
┌─────────────────────────────────────────────────────┐
|
|
119
|
+
│ PRIME INTELLECT ENVIRONMENT │
|
|
120
|
+
│ EnvironmentName [↗ GitHub] │
|
|
121
|
+
│ One-line task description │
|
|
122
|
+
│ ───────────────────────────────────────────────── │
|
|
123
|
+
│ [42k rows] [3 rewards] [2 turns] [Math QA] │
|
|
124
|
+
└─────────────────────────────────────────────────────┘
|
|
113
125
|
```
|
|
114
126
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
.
|
|
118
|
-
|
|
119
|
-
0 0 0 1.5px var(--accent),
|
|
120
|
-
0 0 60px var(--glow),
|
|
121
|
-
0 32px 80px rgba(0,0,0,0.6);
|
|
122
|
-
}
|
|
123
|
-
.card[data-depth="1"],
|
|
124
|
-
.card[data-depth="2"],
|
|
125
|
-
.card[data-depth="3"] {
|
|
126
|
-
box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
|
|
127
|
-
}
|
|
128
|
-
```
|
|
127
|
+
- Env name: `2rem`, `font-weight: 800`, white. Monospace.
|
|
128
|
+
- Description: `0.85rem`, `#94a3b8`, `line-height: 1.5`. Below the name.
|
|
129
|
+
- GitHub pill: only if URL was found. `background: rgba(99,102,241,0.1)`, `border: 1px solid rgba(99,102,241,0.3)`, `color: #a5b4fc`, `border-radius: 99px`, `padding: 4px 12px`, `font-size: 0.73rem`. Hover: border and color shift to solid indigo.
|
|
130
|
+
- Stat chips: row of 3–5 pills. `background: rgba(99,102,241,0.08)`, `border: 1px solid rgba(99,102,241,0.18)`, `color: #a5b4fc`, `border-radius: 6px`, `padding: 5px 12px`, `font-size: 0.75rem`, `font-weight: 600`. Label on top in `0.6rem` muted caps, value below in `0.85rem` white.
|
|
129
131
|
|
|
130
|
-
|
|
131
|
-
```css
|
|
132
|
-
font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
|
|
133
|
-
font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* code only */
|
|
134
|
-
```
|
|
132
|
+
No drawer for this section. Static.
|
|
135
133
|
|
|
136
134
|
---
|
|
137
135
|
|
|
138
|
-
###
|
|
136
|
+
### Section 2 — Dataset (tappable)
|
|
139
137
|
|
|
140
|
-
|
|
138
|
+
**Scan face** — a visual schema diagram:
|
|
141
139
|
|
|
142
140
|
```
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
│ ──────────────────────────────────────── │
|
|
151
|
-
│ [progress dots] [Continue → button] │
|
|
152
|
-
└────────────────────────────────────────────┘
|
|
141
|
+
SOURCE ──────────────────────────────────────────────
|
|
142
|
+
HuggingFace · openai/gsm8k · train split
|
|
143
|
+
|
|
144
|
+
FIELDS ──────────────────────────────────────────────
|
|
145
|
+
[question]──str──────────[answer]──str
|
|
146
|
+
[level]──int
|
|
147
|
+
[subject]──str
|
|
153
148
|
```
|
|
154
149
|
|
|
155
|
-
|
|
150
|
+
Render fields as connected pills in a small horizontal/vertical node graph. Each pill: `background: rgba(20,184,166,0.08)`, `border: 1px solid rgba(20,184,166,0.2)`, `border-radius: 6px`, `padding: 4px 10px`. Field name in teal monospace `0.75rem`, type in muted `0.65rem`. Connect them with SVG lines (stroke `rgba(20,184,166,0.2)`, stroke-width 1).
|
|
151
|
+
|
|
152
|
+
At the bottom of the card, a muted "See example row →" in `0.72rem` teal.
|
|
153
|
+
|
|
154
|
+
**Detail drawer content** (slides in on tap — see Drawer spec below):
|
|
156
155
|
|
|
157
|
-
|
|
156
|
+
- `EXAMPLE ROW` label
|
|
157
|
+
- Every field displayed as: field name (teal monospace) + value (white). Long text in a soft box — `background: rgba(255,255,255,0.03)`, `border-radius: 6px`, `padding: 8px 12px`. Nothing truncated.
|
|
158
|
+
- `FIELD GUIDE` label, then each field one per line: name · type · purpose sentence.
|
|
158
159
|
|
|
159
160
|
---
|
|
160
161
|
|
|
161
|
-
|
|
162
|
+
### Section 3 — Rewards (tappable)
|
|
162
163
|
|
|
163
|
-
|
|
164
|
-
- **Description**: 3–4 sentences, `font-size: 0.9rem`, `color: #94a3b8`, `line-height: 1.65`, `margin: 14px 0`
|
|
165
|
-
- **GitHub link** (only if URL was found in source): pill button — `background: rgba(255,255,255,0.05)`, `border: 1px solid rgba(255,255,255,0.1)`, `color: #e2e8f0`, `border-radius: 99px`, `padding: 5px 14px`, `font-size: 0.78rem`. Shows `↗ GitHub`. Hover: `border-color: var(--accent)`, `color: var(--accent)`. If no URL found, this element does not exist.
|
|
166
|
-
- **Stat chips**: row of 3–5 pills. `background: rgba(168,85,247,0.08)`, `border: 1px solid rgba(168,85,247,0.2)`, `color: #c4b5fd`, `border-radius: 99px`, `padding: 4px 11px`, `font-size: 0.73rem`
|
|
164
|
+
**Scan face** — a horizontal stacked bar chart:
|
|
167
165
|
|
|
168
|
-
|
|
166
|
+
Each reward function gets one horizontal bar. The bar represents its contribution to the final score (equal weight if not specified). Left side: reward name in amber monospace `0.8rem`. Right side: bar — `height: 8px`, `border-radius: 4px`, `background: linear-gradient(90deg, #f59e0b, #fbbf24)`. Below the bar: one-phrase description in `0.65rem` muted text.
|
|
169
167
|
|
|
170
|
-
|
|
168
|
+
If there's a final score formula, show it below the bars in a formula chip:
|
|
169
|
+
`background: rgba(245,158,11,0.08)`, `border: 1px solid rgba(245,158,11,0.2)`, `border-radius: 8px`, `padding: 8px 14px`, amber monospace `0.82rem`.
|
|
171
170
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
171
|
+
At the bottom: "See reward logic →" in `0.72rem` amber.
|
|
172
|
+
|
|
173
|
+
**Detail drawer content:**
|
|
174
|
+
|
|
175
|
+
For each reward, a block:
|
|
175
176
|
```
|
|
176
|
-
|
|
177
|
+
format_reward [float 0–1]
|
|
178
|
+
─────────────────────────────────────────────────
|
|
179
|
+
Checks response contains <answer>…</answer>
|
|
177
180
|
|
|
178
|
-
|
|
179
|
-
|
|
181
|
+
✗ 0 Tags absent, or inner content non-numeric
|
|
182
|
+
✓ 1 Tags present, inner content is valid integer
|
|
180
183
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
-
|
|
184
|
-
-
|
|
185
|
-
-
|
|
186
|
-
-
|
|
184
|
+
Pattern: <answer>(\d+)</answer>
|
|
185
|
+
```
|
|
186
|
+
- Name: amber monospace, `font-weight: 700`, `0.88rem`
|
|
187
|
+
- `[float 0–1]` badge: `0.65rem`, `#6b7280`, right-aligned via flex
|
|
188
|
+
- Description: `0.8rem`, `#94a3b8`
|
|
189
|
+
- ✗ / ✓ lines: `0.78rem`. ✗ in `#f87171`, ✓ in `#4ade80`, text in `#94a3b8`
|
|
190
|
+
- Pattern/threshold: monospace, `0.75rem`, `#64748b`
|
|
191
|
+
- Block: `background: rgba(245,158,11,0.04)`, `border: 1px solid rgba(245,158,11,0.1)`, `border-radius: 10px`, `padding: 12px 14px`, `margin-bottom: 10px`
|
|
187
192
|
|
|
188
193
|
---
|
|
189
194
|
|
|
190
|
-
|
|
195
|
+
### Section 4 — Rollout (tappable)
|
|
191
196
|
|
|
192
|
-
|
|
197
|
+
**Scan face** — a horizontal pipeline flow diagram:
|
|
193
198
|
|
|
194
199
|
```
|
|
195
|
-
|
|
196
|
-
Checks response contains <answer>…</answer>
|
|
197
|
-
✗ 0 tags absent or inner content non-numeric
|
|
198
|
-
✓ 1 tags present, content is a valid integer
|
|
200
|
+
[DATA ROW] ──▶ [PROMPT] ──▶ [MODEL] ──▶ [REWARDS] ──▶ [SCORE]
|
|
199
201
|
```
|
|
200
202
|
|
|
201
|
-
|
|
202
|
-
- `[float]` badge: `font-size: 0.68rem`, `color: #6b7280`, right-aligned via `display: flex justify-content: space-between`
|
|
203
|
-
- Description line: `color: #94a3b8`, `font-size: 0.8rem`, `margin: 4px 0 6px`
|
|
204
|
-
- `✗ 0` / `✓ 1` lines: `font-size: 0.78rem`, `✗` in `#f87171`, `✓` in `#4ade80`, text in `#94a3b8`
|
|
205
|
-
- Block: `background: rgba(245,158,11,0.05)`, `border: 1px solid rgba(245,158,11,0.12)`, `border-radius: 10px`, `padding: 12px 14px`, `margin-bottom: 10px`
|
|
203
|
+
Each node: rounded rect, `background: rgba(244,63,94,0.08)`, `border: 1px solid rgba(244,63,94,0.2)`, `border-radius: 10px`, `padding: 10px 16px`. Node label: rose monospace `0.8rem` bold. Below each node: 1 short phrase (≤6 words) in `0.65rem` muted. Arrows: SVG `▶` in `rgba(244,63,94,0.4)`.
|
|
206
204
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
205
|
+
On narrow viewports, collapse to vertical with connecting arrows below each node.
|
|
206
|
+
|
|
207
|
+
At the bottom: "Trace an example →" in `0.72rem` rose.
|
|
208
|
+
|
|
209
|
+
**Detail drawer content:**
|
|
210
|
+
|
|
211
|
+
5 numbered steps. Each:
|
|
212
|
+
- Step number: `2rem`, `font-weight: 800`, rose, `opacity: 0.2`
|
|
213
|
+
- Step title: `0.9rem`, white, `font-weight: 700`
|
|
214
|
+
- Description: `0.82rem`, `#94a3b8`, `line-height: 1.6`
|
|
215
|
+
- Left border: `border-left: 2px solid rgba(244,63,94,0.15)`, `padding-left: 16px`, `margin-left: 10px` (omit on last step)
|
|
216
|
+
- `margin-bottom: 20px`
|
|
217
|
+
|
|
218
|
+
Steps are always:
|
|
219
|
+
1. **Data → Prompt** — how the raw row becomes the exact prompt the model sees (include template if found)
|
|
220
|
+
2. **Model Response** — what the model is expected to produce (format, tags, structure)
|
|
221
|
+
3. **Reward Evaluation** — how each reward fires on a sample output; show scores for a real example
|
|
222
|
+
4. **Score Computation** — the exact formula and resulting score
|
|
223
|
+
5. **Perfect vs Zero** — what earns a full score vs what earns zero; concrete contrasting examples
|
|
214
224
|
|
|
215
225
|
---
|
|
216
226
|
|
|
217
|
-
|
|
227
|
+
### Detail Drawer
|
|
218
228
|
|
|
219
|
-
|
|
229
|
+
A panel that slides in from the **right edge** of the viewport, overlaying the page.
|
|
220
230
|
|
|
231
|
+
```css
|
|
232
|
+
.drawer {
|
|
233
|
+
position: fixed;
|
|
234
|
+
top: 0; right: 0;
|
|
235
|
+
width: min(480px, 95vw);
|
|
236
|
+
height: 100vh;
|
|
237
|
+
background: #0d1117;
|
|
238
|
+
border-left: 1px solid rgba(255,255,255,0.1);
|
|
239
|
+
padding: 32px 28px;
|
|
240
|
+
overflow-y: auto;
|
|
241
|
+
transform: translateX(100%);
|
|
242
|
+
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
243
|
+
z-index: 100;
|
|
244
|
+
}
|
|
245
|
+
.drawer.open { transform: translateX(0); }
|
|
221
246
|
```
|
|
222
|
-
01
|
|
223
|
-
Data → Prompt
|
|
224
|
-
The problem field is inserted into "Solve step by step…"
|
|
225
|
-
as the user message. No system prompt.
|
|
226
|
-
```
|
|
227
247
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
-
|
|
231
|
-
|
|
232
|
-
|
|
248
|
+
**Backdrop:** `position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99` — fades in with `opacity 0.3s`. Clicking it closes the drawer.
|
|
249
|
+
|
|
250
|
+
**Close button:** `×` in the top-right of the drawer. `font-size: 1.1rem`, `color: #475569`, hover rose. Keyboard: `Escape` closes.
|
|
251
|
+
|
|
252
|
+
**Drawer header:**
|
|
253
|
+
- Section label (e.g., `DATASET DETAIL`) in accent color, `0.65rem` caps
|
|
254
|
+
- Section name in white `1.1rem` bold
|
|
255
|
+
- Thin `border-bottom: 1px solid rgba(255,255,255,0.07)`, `padding-bottom: 16px`, `margin-bottom: 20px`
|
|
233
256
|
|
|
234
|
-
|
|
257
|
+
Scroll within the drawer. The rest of the page does not scroll while drawer is open (`body { overflow: hidden }`).
|
|
235
258
|
|
|
236
259
|
---
|
|
237
260
|
|
|
238
|
-
###
|
|
261
|
+
### Motion
|
|
239
262
|
|
|
240
263
|
```css
|
|
241
|
-
@keyframes
|
|
242
|
-
|
|
264
|
+
@keyframes fadeSlideIn {
|
|
265
|
+
from { opacity: 0; transform: translateY(12px); }
|
|
266
|
+
to { opacity: 1; transform: translateY(0); }
|
|
243
267
|
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
to { transform: scale(1) translateY(0); opacity: 1; }
|
|
268
|
+
.section-card {
|
|
269
|
+
animation: fadeSlideIn 0.4s ease both;
|
|
247
270
|
}
|
|
271
|
+
/* Stagger via animation-delay: 0s, 0.08s, 0.16s, 0.24s on the four sections */
|
|
248
272
|
```
|
|
249
273
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
4. Progress dots update with a `0.3s` width transition
|
|
274
|
+
Drawer slide uses CSS transition only (no keyframes). Section cards lift slightly on hover:
|
|
275
|
+
```css
|
|
276
|
+
.section-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
|
|
277
|
+
```
|
|
255
278
|
|
|
256
|
-
|
|
279
|
+
Reduced motion guard:
|
|
257
280
|
```css
|
|
258
281
|
@media (prefers-reduced-motion: reduce) {
|
|
259
|
-
*, *::before, *::after { animation: none !important; transition:
|
|
282
|
+
*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
|
|
260
283
|
}
|
|
261
284
|
```
|
|
262
285
|
|
|
@@ -264,27 +287,39 @@ Guard all animations:
|
|
|
264
287
|
|
|
265
288
|
### Page Chrome
|
|
266
289
|
|
|
267
|
-
**Top
|
|
290
|
+
**Top of page** — above the first card:
|
|
291
|
+
```
|
|
292
|
+
PRIME INTELLECT · ENVIRONMENT OVERVIEW [environment-name]
|
|
293
|
+
```
|
|
294
|
+
`font-size: 0.68rem`, `color: #1e293b`, `letter-spacing: 0.1em`, `margin-bottom: 40px`. Nothing else at the top.
|
|
268
295
|
|
|
269
|
-
**Bottom
|
|
296
|
+
**Bottom of page** — below the last card:
|
|
297
|
+
```
|
|
298
|
+
Generated by Claude · <timestamp>
|
|
299
|
+
```
|
|
300
|
+
`font-size: 0.65rem`, `color: #1e293b`, `margin-top: 48px`, centered.
|
|
270
301
|
|
|
271
|
-
Nothing else. No nav, no
|
|
302
|
+
Nothing else. No nav, no header, no sidebar.
|
|
272
303
|
|
|
273
304
|
---
|
|
274
305
|
|
|
275
306
|
## Step 3 — Confirm and report
|
|
276
307
|
|
|
277
|
-
After writing the file:
|
|
278
|
-
-
|
|
279
|
-
-
|
|
308
|
+
After writing the file, share the full path and say:
|
|
309
|
+
- What the environment trains (one sentence)
|
|
310
|
+
- How it scores (one sentence)
|
|
280
311
|
|
|
281
|
-
|
|
312
|
+
---
|
|
282
313
|
|
|
283
|
-
-
|
|
284
|
-
|
|
285
|
-
- Do not
|
|
286
|
-
- Do not
|
|
287
|
-
- Do not
|
|
288
|
-
- Do not
|
|
289
|
-
- Do not
|
|
290
|
-
- Do not use
|
|
314
|
+
## Anti-patterns — never do these
|
|
315
|
+
|
|
316
|
+
- **Do not write walls of text on the scan face.** Every section face is a diagram or a chart. Text labels only.
|
|
317
|
+
- **Do not truncate the example row.** Full values, all fields, in the drawer.
|
|
318
|
+
- **Do not invent a GitHub URL.** Only include it if found verbatim in source.
|
|
319
|
+
- **Do not hallucinate field names, reward weights, or dataset content.** Extract exactly.
|
|
320
|
+
- **Do not skip helper modules.** Core reward logic is often there.
|
|
321
|
+
- **Do not use a light theme.**
|
|
322
|
+
- **Do not use Inter, Roboto, or any Google Font.**
|
|
323
|
+
- **Do not add tabs, nav, or scroll-within-cards.** The drawer is the only overlay.
|
|
324
|
+
- **Do not add more than four sections.** Header + Dataset + Rewards + Rollout. That's it.
|
|
325
|
+
- **Do not use a card-stack / deck reveal mechanic.** This is a scrollable single-column page.
|
|
@@ -1,494 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: understand-environment
|
|
3
|
-
description: Generate a rich, self-contained HTML report that fully explains a Prime Intellect verifiers environment. Use this skill any time the user asks to understand, explain, document, visualize, or explore a verifiers environment — even if they just say "what does this environment do?", "explain this env", "give me an overview", or "generate an HTML for this environment". The skill reads the Python source files in the current directory, extracts the dataset, reward functions, rollout logic, and configuration parameters, and writes a beautiful HTML file to the environment folder.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Understand Environment
|
|
7
|
-
|
|
8
|
-
## Goal
|
|
9
|
-
|
|
10
|
-
Produce a single self-contained HTML file (`environment_overview.html`) — a **treasure map** that lets a first-timer understand any verifiers environment in under 5 minutes. Everything is visible at once, on one screen, no scrolling, no clicking required. The page answers one question: *"What is this environment training a model to do?"*
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## Step 1 — Read the source
|
|
15
|
-
|
|
16
|
-
Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if they exist. Do not skip helper files — reward logic is often split across modules (e.g. `*_checks.py`, `*_prompts.py`).
|
|
17
|
-
|
|
18
|
-
Extract exactly three things:
|
|
19
|
-
|
|
20
|
-
### 1. The Task — what does the model see?
|
|
21
|
-
- Find 1 real example prompt from the source (a `PROMPTS` list, HuggingFace dataset, or prompt builder).
|
|
22
|
-
- Extract only the **user-facing prompt text** the model actually reads. Truncate to ~300 chars if longer.
|
|
23
|
-
- Note which file it lives in.
|
|
24
|
-
|
|
25
|
-
### 2. The Judge — what counts as a good response?
|
|
26
|
-
- Write 2–3 sentences in plain English describing how the environment scores the model. What is it rewarding? What does a high score look like vs a low score?
|
|
27
|
-
- If there is a composite formula (e.g. `R = (1−hw)×visible + hw×hidden`), include it.
|
|
28
|
-
- Note which file the reward logic lives in.
|
|
29
|
-
|
|
30
|
-
### 3. The Loop — how does one rollout execute?
|
|
31
|
-
- Identify 4–5 steps: what the model receives → what it produces → any tools/sandbox → scoring → final score.
|
|
32
|
-
- Write each step as a 2–4 word label and a single-line description.
|
|
33
|
-
- Note which file the rollout logic lives in.
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## Step 2 — Generate the HTML
|
|
38
|
-
|
|
39
|
-
Write a single self-contained `./environment_overview.html`. No external CDN — all CSS and JS inline.
|
|
40
|
-
|
|
41
|
-
---
|
|
42
|
-
|
|
43
|
-
### Aesthetic Direction: "Cartographic"
|
|
44
|
-
|
|
45
|
-
The page looks like a **premium map artifact** — warm parchment in light mode, deep space in dark mode. Three cards feel like physical territories on the map, slightly lifted off the page. The purple accent (#a855f7) is the single modern intrusion into an otherwise scholarly palette — like a highlighted route drawn over an aged chart.
|
|
46
|
-
|
|
47
|
-
**The one thing a viewer remembers**: the parchment texture and the offset card shadows in light mode — it genuinely feels like a physical object.
|
|
48
|
-
|
|
49
|
-
---
|
|
50
|
-
|
|
51
|
-
### Theme System
|
|
52
|
-
|
|
53
|
-
All colors as CSS custom properties. Toggle swaps `data-theme="dark"` on `<html>`. Persisted via `localStorage`.
|
|
54
|
-
|
|
55
|
-
**Light theme — "Parchment" (default):**
|
|
56
|
-
```css
|
|
57
|
-
--bg-page: #f4efe4; /* warm laid paper */
|
|
58
|
-
--bg-card: #fdfaf3; /* lighter parchment for cards */
|
|
59
|
-
--bg-code: #ece6d4; /* aged paper for code blocks */
|
|
60
|
-
--border: #d6cba8; /* ink-faded edge */
|
|
61
|
-
--border-strong: #b8a87a;
|
|
62
|
-
--text-primary: #1c1410; /* dark iron-gall ink */
|
|
63
|
-
--text-secondary:#5c4f3a; /* brown ink */
|
|
64
|
-
--text-muted: #9c8b6e;
|
|
65
|
-
--accent: #a855f7; /* PI purple — the modern intrusion */
|
|
66
|
-
--accent-soft: rgba(168,85,247,0.12);
|
|
67
|
-
--shadow-card: 4px 6px 0 rgba(168,85,247,0.10), 0 2px 8px rgba(100,70,20,0.12);
|
|
68
|
-
--shadow-hover: 6px 8px 0 rgba(168,85,247,0.18), 0 4px 16px rgba(100,70,20,0.16);
|
|
69
|
-
|
|
70
|
-
/* Parchment noise texture — paste this SVG as a data URI background on body */
|
|
71
|
-
/* background-image: url("data:image/svg+xml,...") — see Noise Texture section */
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
**Dark theme — "Deep Space" (`[data-theme="dark"]`):**
|
|
75
|
-
```css
|
|
76
|
-
--bg-page: #0f0f1a;
|
|
77
|
-
--bg-card: #161627;
|
|
78
|
-
--bg-code: #1a1a2e;
|
|
79
|
-
--border: #2a2a4a;
|
|
80
|
-
--border-strong: #3d3d6b;
|
|
81
|
-
--text-primary: #e8e4f0;
|
|
82
|
-
--text-secondary:#b0a8c8;
|
|
83
|
-
--text-muted: #6b6488;
|
|
84
|
-
--accent: #a855f7;
|
|
85
|
-
--accent-soft: rgba(168,85,247,0.15);
|
|
86
|
-
--shadow-card: 0 0 0 1px rgba(168,85,247,0.15), 0 8px 32px rgba(0,0,0,0.5);
|
|
87
|
-
--shadow-hover: 0 0 0 1px rgba(168,85,247,0.3), 0 12px 40px rgba(168,85,247,0.15);
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
All elements get `transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease` so the toggle animates smoothly.
|
|
91
|
-
|
|
92
|
-
---
|
|
93
|
-
|
|
94
|
-
### Noise Texture (light mode only)
|
|
95
|
-
|
|
96
|
-
Add a subtle grain to `body` in light mode using an inline SVG filter — no external file needed:
|
|
97
|
-
|
|
98
|
-
```html
|
|
99
|
-
<svg style="display:none">
|
|
100
|
-
<filter id="noise">
|
|
101
|
-
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
|
|
102
|
-
<feColorMatrix type="saturate" values="0"/>
|
|
103
|
-
<feBlend in="SourceGraphic" mode="multiply"/>
|
|
104
|
-
</filter>
|
|
105
|
-
</svg>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
Apply to body in light mode:
|
|
109
|
-
```css
|
|
110
|
-
:root body { filter: url(#noise); } /* very subtle — opacity trick below */
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
Better approach — use a pseudo-element overlay:
|
|
114
|
-
```css
|
|
115
|
-
body::before {
|
|
116
|
-
content: '';
|
|
117
|
-
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
|
|
118
|
-
opacity: 0.03;
|
|
119
|
-
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
120
|
-
}
|
|
121
|
-
[data-theme="dark"] body::before { opacity: 0.04; }
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
---
|
|
125
|
-
|
|
126
|
-
### Typography
|
|
127
|
-
|
|
128
|
-
```css
|
|
129
|
-
/* Display — scholarly, map-label feel */
|
|
130
|
-
--font-display: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
|
|
131
|
-
|
|
132
|
-
/* Body — humanist, readable, not generic */
|
|
133
|
-
--font-body: 'Optima', 'Candara', 'Gill Sans', 'Segoe UI', sans-serif;
|
|
134
|
-
|
|
135
|
-
/* Code — typewriter, like coordinates on a map */
|
|
136
|
-
--font-mono: 'Courier New', 'Lucida Console', ui-monospace, monospace;
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
Scale:
|
|
140
|
-
- Env name: `2.2rem`, `var(--font-display)`, `font-weight: 700`, `letter-spacing: -0.02em`, color: `var(--text-primary)`
|
|
141
|
-
- Env description: `0.95rem`, `var(--font-body)`, `color: var(--text-secondary)`, `font-style: italic`
|
|
142
|
-
- Card landmark label: `0.65rem`, `var(--font-body)`, `font-weight: 700`, `letter-spacing: 0.12em`, `text-transform: uppercase`, `color: var(--accent)`
|
|
143
|
-
- Card body text: `0.875rem`, `var(--font-body)`, `line-height: 1.6`, `color: var(--text-primary)`
|
|
144
|
-
- Code: `0.8rem`, `var(--font-mono)`, `color: var(--text-primary)`
|
|
145
|
-
- Filename badge: `0.7rem`, `var(--font-mono)`, `color: var(--text-muted)`
|
|
146
|
-
|
|
147
|
-
---
|
|
148
|
-
|
|
149
|
-
### Layout
|
|
150
|
-
|
|
151
|
-
Full viewport, no scroll. CSS Grid:
|
|
152
|
-
|
|
153
|
-
```css
|
|
154
|
-
html, body { height: 100%; margin: 0; overflow: hidden; }
|
|
155
|
-
|
|
156
|
-
body {
|
|
157
|
-
display: grid;
|
|
158
|
-
grid-template-rows: auto 1fr; /* header + cards */
|
|
159
|
-
padding: 24px 28px 20px;
|
|
160
|
-
gap: 20px;
|
|
161
|
-
box-sizing: border-box;
|
|
162
|
-
background: var(--bg-page);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.cards {
|
|
166
|
-
display: grid;
|
|
167
|
-
grid-template-columns: 1fr 1fr 1fr;
|
|
168
|
-
gap: 18px;
|
|
169
|
-
min-height: 0; /* critical: lets grid row shrink */
|
|
170
|
-
}
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
---
|
|
174
|
-
|
|
175
|
-
### Header
|
|
176
|
-
|
|
177
|
-
```
|
|
178
|
-
┌─ header ──────────────────────────────────────────────────────┐
|
|
179
|
-
│ ⬡ Prime Intellect [light mode: ☀ dark mode: ☾] │
|
|
180
|
-
│ │
|
|
181
|
-
│ ifeval_goblin │
|
|
182
|
-
│ Trains a model to follow format instructions... │
|
|
183
|
-
└───────────────────────────────────────────────────────────────┘
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
- Top row: `⬡ Prime Intellect` in `0.7rem` caps, `var(--accent)`, `letter-spacing: 0.1em` — left. Theme toggle — right.
|
|
187
|
-
- Theme toggle: a small pill `<button>`, `background: var(--accent-soft)`, `border: 1px solid var(--border-strong)`, `border-radius: 99px`, `padding: 4px 12px`, `font-size: 0.75rem`. Shows `☀ Light` or `☾ Dark`. Hover: `background: var(--accent-soft)` stronger, no outline.
|
|
188
|
-
- Env name: large display serif below, with a 2px `var(--accent)` underline that is 40px wide and sits 4px below the baseline — does NOT span the full word. Like a map annotation mark.
|
|
189
|
-
- Description: italic, secondary color, one line beneath.
|
|
190
|
-
|
|
191
|
-
---
|
|
192
|
-
|
|
193
|
-
### Cards
|
|
194
|
-
|
|
195
|
-
Three equal-width cards. Each card is a fixed-height territory on the map.
|
|
196
|
-
|
|
197
|
-
```css
|
|
198
|
-
.card {
|
|
199
|
-
background: var(--bg-card);
|
|
200
|
-
border: 1.5px solid var(--border);
|
|
201
|
-
border-radius: 10px;
|
|
202
|
-
box-shadow: var(--shadow-card);
|
|
203
|
-
padding: 20px;
|
|
204
|
-
display: grid;
|
|
205
|
-
grid-template-rows: auto 1fr auto; /* label | content | filename */
|
|
206
|
-
min-height: 0;
|
|
207
|
-
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.card:hover {
|
|
211
|
-
box-shadow: var(--shadow-hover);
|
|
212
|
-
transform: translateY(-2px);
|
|
213
|
-
}
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
Each card has exactly three zones:
|
|
217
|
-
|
|
218
|
-
**Zone 1 — Landmark label** (top):
|
|
219
|
-
```
|
|
220
|
-
THE TASK THE JUDGE THE LOOP
|
|
221
|
-
━━━━━━━━ ━━━━━━━━━ ━━━━━━━━
|
|
222
|
-
```
|
|
223
|
-
Label in `0.65rem` uppercase caps + accent color. A `1px solid var(--border-strong)` rule beneath it, `margin-bottom: 14px`.
|
|
224
|
-
|
|
225
|
-
**Zone 2 — Content** (middle, `overflow: hidden`):
|
|
226
|
-
Content specific to each card — see below.
|
|
227
|
-
|
|
228
|
-
**Zone 3 — Filename badge** (bottom):
|
|
229
|
-
```
|
|
230
|
-
📍 ifeval_goblin_prompts.py
|
|
231
|
-
```
|
|
232
|
-
`font-size: 0.7rem`, `font-family: var(--font-mono)`, `color: var(--text-muted)`. A `1px solid var(--border)` rule above it, `padding-top: 10px`, `margin-top: 10px`.
|
|
233
|
-
|
|
234
|
-
---
|
|
235
|
-
|
|
236
|
-
### Card 1 — The Task
|
|
237
|
-
|
|
238
|
-
Content zone: the actual prompt text the model sees.
|
|
239
|
-
|
|
240
|
-
```css
|
|
241
|
-
.task-prompt {
|
|
242
|
-
background: var(--bg-code);
|
|
243
|
-
border-left: 3px solid var(--accent);
|
|
244
|
-
border-radius: 0 6px 6px 0;
|
|
245
|
-
padding: 12px 14px;
|
|
246
|
-
font-family: var(--font-mono);
|
|
247
|
-
font-size: 0.78rem;
|
|
248
|
-
line-height: 1.55;
|
|
249
|
-
color: var(--text-primary);
|
|
250
|
-
overflow: hidden;
|
|
251
|
-
display: -webkit-box;
|
|
252
|
-
-webkit-line-clamp: 8; /* truncate at ~8 lines */
|
|
253
|
-
-webkit-box-orient: vertical;
|
|
254
|
-
white-space: pre-wrap;
|
|
255
|
-
word-break: break-word;
|
|
256
|
-
}
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
If the prompt has format constraints embedded (e.g. "do not use the letter g"), highlight those phrases:
|
|
260
|
-
```html
|
|
261
|
-
<mark style="background:rgba(168,85,247,0.15); border-radius:2px; padding:0 2px;">
|
|
262
|
-
do not use the letter g
|
|
263
|
-
</mark>
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
---
|
|
267
|
-
|
|
268
|
-
### Card 2 — The Judge
|
|
269
|
-
|
|
270
|
-
Content zone: plain English scoring description.
|
|
271
|
-
|
|
272
|
-
```css
|
|
273
|
-
.judge-description {
|
|
274
|
-
font-family: var(--font-body);
|
|
275
|
-
font-size: 0.875rem;
|
|
276
|
-
line-height: 1.65;
|
|
277
|
-
color: var(--text-primary);
|
|
278
|
-
}
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
If there is a composite formula, render it below the prose in a formula block:
|
|
282
|
-
|
|
283
|
-
```css
|
|
284
|
-
.formula {
|
|
285
|
-
margin-top: 14px;
|
|
286
|
-
background: var(--accent-soft);
|
|
287
|
-
border: 1px solid var(--accent);
|
|
288
|
-
border-radius: 6px;
|
|
289
|
-
padding: 10px 14px;
|
|
290
|
-
font-family: var(--font-mono);
|
|
291
|
-
font-size: 0.78rem;
|
|
292
|
-
color: var(--accent);
|
|
293
|
-
letter-spacing: 0.02em;
|
|
294
|
-
}
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
If no formula exists, omit the block entirely — don't leave empty space.
|
|
298
|
-
|
|
299
|
-
---
|
|
300
|
-
|
|
301
|
-
### Card 3 — The Loop
|
|
302
|
-
|
|
303
|
-
Content zone: a static pipeline diagram.
|
|
304
|
-
|
|
305
|
-
Layout: vertical stack of step rows connected by short vertical lines (easier to fit in a card than horizontal).
|
|
306
|
-
|
|
307
|
-
```
|
|
308
|
-
● Prompt received
|
|
309
|
-
│
|
|
310
|
-
● Model generates response
|
|
311
|
-
│
|
|
312
|
-
● [Tool call / sandbox] ← only if applicable
|
|
313
|
-
│
|
|
314
|
-
● Scoring applied
|
|
315
|
-
│
|
|
316
|
-
● Final score emitted
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
HTML structure:
|
|
320
|
-
```html
|
|
321
|
-
<div class="pipeline">
|
|
322
|
-
<div class="step">
|
|
323
|
-
<div class="node"></div>
|
|
324
|
-
<div class="step-text">
|
|
325
|
-
<span class="step-label">Prompt received</span>
|
|
326
|
-
<span class="step-desc">64 task prompts with format constraints</span>
|
|
327
|
-
</div>
|
|
328
|
-
</div>
|
|
329
|
-
<div class="connector"></div>
|
|
330
|
-
<!-- repeat -->
|
|
331
|
-
</div>
|
|
332
|
-
```
|
|
333
|
-
|
|
334
|
-
CSS:
|
|
335
|
-
```css
|
|
336
|
-
.pipeline { display: flex; flex-direction: column; gap: 0; }
|
|
337
|
-
|
|
338
|
-
.step { display: flex; align-items: flex-start; gap: 12px; }
|
|
339
|
-
|
|
340
|
-
.node {
|
|
341
|
-
width: 10px; height: 10px; border-radius: 50%;
|
|
342
|
-
background: var(--accent); flex-shrink: 0;
|
|
343
|
-
margin-top: 4px;
|
|
344
|
-
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
.connector {
|
|
348
|
-
width: 1px; height: 14px;
|
|
349
|
-
background: var(--border-strong);
|
|
350
|
-
margin-left: 4.5px; /* aligns with node center */
|
|
351
|
-
border-left: 1.5px dashed var(--border-strong);
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
.step-label {
|
|
355
|
-
display: block;
|
|
356
|
-
font-family: var(--font-body);
|
|
357
|
-
font-size: 0.8rem;
|
|
358
|
-
font-weight: 600;
|
|
359
|
-
color: var(--text-primary);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.step-desc {
|
|
363
|
-
display: block;
|
|
364
|
-
font-family: var(--font-body);
|
|
365
|
-
font-size: 0.72rem;
|
|
366
|
-
color: var(--text-muted);
|
|
367
|
-
line-height: 1.4;
|
|
368
|
-
margin-top: 1px;
|
|
369
|
-
}
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
---
|
|
373
|
-
|
|
374
|
-
### Theme Toggle JS (complete, ~15 lines)
|
|
375
|
-
|
|
376
|
-
```js
|
|
377
|
-
(function() {
|
|
378
|
-
const root = document.documentElement;
|
|
379
|
-
const btn = document.getElementById('theme-toggle');
|
|
380
|
-
const saved = localStorage.getItem('pi-env-theme');
|
|
381
|
-
if (saved) root.setAttribute('data-theme', saved);
|
|
382
|
-
function update() {
|
|
383
|
-
const isDark = root.getAttribute('data-theme') === 'dark';
|
|
384
|
-
btn.textContent = isDark ? '☀ Light' : '☾ Dark';
|
|
385
|
-
}
|
|
386
|
-
update();
|
|
387
|
-
btn.addEventListener('click', function() {
|
|
388
|
-
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
|
389
|
-
root.setAttribute('data-theme', next);
|
|
390
|
-
localStorage.setItem('pi-env-theme', next);
|
|
391
|
-
update();
|
|
392
|
-
});
|
|
393
|
-
})();
|
|
394
|
-
```
|
|
395
|
-
|
|
396
|
-
---
|
|
397
|
-
|
|
398
|
-
### Page Load Animation
|
|
399
|
-
|
|
400
|
-
One single orchestrated entrance — not scattered micro-animations:
|
|
401
|
-
|
|
402
|
-
```css
|
|
403
|
-
@keyframes rise {
|
|
404
|
-
from { opacity: 0; transform: translateY(10px); }
|
|
405
|
-
to { opacity: 1; transform: translateY(0); }
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
.header { animation: rise 0.5s ease both; }
|
|
409
|
-
.card:nth-child(1) { animation: rise 0.5s ease 0.1s both; }
|
|
410
|
-
.card:nth-child(2) { animation: rise 0.5s ease 0.2s both; }
|
|
411
|
-
.card:nth-child(3) { animation: rise 0.5s ease 0.3s both; }
|
|
412
|
-
|
|
413
|
-
@media (prefers-reduced-motion: reduce) {
|
|
414
|
-
* { animation: none !important; }
|
|
415
|
-
}
|
|
416
|
-
```
|
|
417
|
-
|
|
418
|
-
---
|
|
419
|
-
|
|
420
|
-
### Final HTML skeleton
|
|
421
|
-
|
|
422
|
-
```html
|
|
423
|
-
<!DOCTYPE html>
|
|
424
|
-
<html lang="en">
|
|
425
|
-
<head>
|
|
426
|
-
<meta charset="UTF-8">
|
|
427
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
428
|
-
<title>[ENV_NAME] — Prime Intellect Environment</title>
|
|
429
|
-
<style>/* ALL CSS INLINE HERE */</style>
|
|
430
|
-
</head>
|
|
431
|
-
<body>
|
|
432
|
-
<!-- Noise texture SVG (hidden) -->
|
|
433
|
-
<svg style="display:none">...</svg>
|
|
434
|
-
|
|
435
|
-
<header class="header">
|
|
436
|
-
<div class="header-top">
|
|
437
|
-
<span class="pi-logo">⬡ Prime Intellect</span>
|
|
438
|
-
<button id="theme-toggle">☾ Dark</button>
|
|
439
|
-
</div>
|
|
440
|
-
<h1 class="env-name">[ENV_NAME]</h1>
|
|
441
|
-
<p class="env-desc">[ONE_SENTENCE_DESCRIPTION]</p>
|
|
442
|
-
</header>
|
|
443
|
-
|
|
444
|
-
<div class="cards">
|
|
445
|
-
<div class="card">
|
|
446
|
-
<div class="card-label">The Task</div>
|
|
447
|
-
<div class="card-content">
|
|
448
|
-
<pre class="task-prompt">[PROMPT_TEXT]</pre>
|
|
449
|
-
</div>
|
|
450
|
-
<div class="card-file">📍 [FILENAME]</div>
|
|
451
|
-
</div>
|
|
452
|
-
|
|
453
|
-
<div class="card">
|
|
454
|
-
<div class="card-label">The Judge</div>
|
|
455
|
-
<div class="card-content">
|
|
456
|
-
<p class="judge-description">[SCORING_DESCRIPTION]</p>
|
|
457
|
-
<!-- optional -->
|
|
458
|
-
<div class="formula">[FORMULA]</div>
|
|
459
|
-
</div>
|
|
460
|
-
<div class="card-file">📍 [FILENAME]</div>
|
|
461
|
-
</div>
|
|
462
|
-
|
|
463
|
-
<div class="card">
|
|
464
|
-
<div class="card-label">The Loop</div>
|
|
465
|
-
<div class="card-content">
|
|
466
|
-
<div class="pipeline">
|
|
467
|
-
<!-- step + connector pairs -->
|
|
468
|
-
</div>
|
|
469
|
-
</div>
|
|
470
|
-
<div class="card-file">📍 [FILENAME]</div>
|
|
471
|
-
</div>
|
|
472
|
-
</div>
|
|
473
|
-
|
|
474
|
-
<script>/* ALL JS INLINE HERE */</script>
|
|
475
|
-
</body>
|
|
476
|
-
</html>
|
|
477
|
-
```
|
|
478
|
-
|
|
479
|
-
---
|
|
480
|
-
|
|
481
|
-
## Step 3 — Confirm and report
|
|
482
|
-
|
|
483
|
-
After writing the file:
|
|
484
|
-
- Tell the user the full path and `open environment_overview.html`
|
|
485
|
-
- Two sentences: what the environment does and how it scores
|
|
486
|
-
|
|
487
|
-
## Anti-patterns
|
|
488
|
-
|
|
489
|
-
- Do not add any section beyond the three cards
|
|
490
|
-
- Do not add tabs, collapsibles, config tables, file maps, quick-start blocks, or score bars
|
|
491
|
-
- Do not let any card overflow or scroll — truncate content to fit
|
|
492
|
-
- Do not hallucinate prompt text, reward logic, or filenames not found in the source
|
|
493
|
-
- Do not skip helper modules — they often contain the core scoring logic
|
|
494
|
-
- Do not use Inter, Roboto, system-ui, or Space Grotesk — use the Palatino/Optima/Courier stack
|