| """Prompts for the toolkit module: the task text plus the API reference of the toolkit for its category. |
| The toolkits (kits/) are written by Claude; the system inlines them into the answer (scripts/kit_inline.py). |
| kit_prompt(task_text, category) -> prompt; category(task_text) guesses svg / html / canvas / three for free requests. |
| """ |
| import re |
|
|
| THREE = """Use the kit3d toolkit. The page already contains it: it creates the renderer, camera, lights, shadows, orbit \ |
| controls and the animation loop, so you only build the scene. Import it in your module script: |
| import { setup, box, sphere, cylinder, cone, torus, plane, group, onFrame } from 'kit3d'; |
| |
| API (sizes in world units, angles in degrees, colours like 0xff8800 or '#ff8800'; the y axis points up, the ground is \ |
| the plane y = 0, so an object of height h stands on it at y = h/2): |
| setup({ background, camera: [x,y,z], target: [x,y,z], ground: colour|true, groundSize, shadows, fog, autoRotate }) |
| -> { scene, camera, renderer, controls, THREE }. Call it first. The camera looks at target (default [0,0,0]); |
| autoRotate: true makes the camera circle slowly around the target. |
| Every shape is added to the scene (or to `parent`) and returned as a three.js mesh: |
| box({ size: [w,h,d], color, at: [x,y,z], rot: [rx,ry,rz], parent }), sphere({ r, color, at }), |
| cylinder({ r, h, rTop, rBottom, color, at, rot }), cone({ r, h, color, at, rot }), torus({ r, tube, color, at, rot }), |
| capsule({ r, h }), ring({ inner, outer }), plane({ size: [w,d], color, at }) (horizontal), |
| poly({ kind: 'tetra'|'octa'|'dodeca'|'icosa', r }), extrude({ points: [[x,y],...], depth }) (a flat outline made 3D), |
| lathe({ points: [[radius,y],...] }) (a profile turned around the vertical axis), tube({ points: [[x,y,z],...], r }). |
| Material options on every shape: metal (0..1), rough (0..1), glow (emissive strength), opacity (0..1), flat, wire. |
| group({ at, rot, parent }) -> an empty object for compound things: create parts with parent: g, then move/rotate g. |
| points({ positions: [[x,y,z],...], colors: [...], size, glow }) and movePoints(pts, flatArray) for particles; |
| stars({ count, radius }); line({ points: [[x,y,z],...], color }); label({ text, at, size, color }) (faces the camera). |
| light.point({ color, intensity, at }), light.spot({ color, intensity, at, target, angle }). |
| onFrame((t, dt) => { ... }) runs every frame (t = seconds since start): animate by changing mesh.position, |
| mesh.rotation (radians), mesh.scale or material properties here. |
| |
| Example (a red ball bouncing next to a blue box): |
| <script type="module"> |
| import { setup, box, sphere, onFrame } from 'kit3d'; |
| setup({ background: 0xdfe8f5, camera: [5, 4, 8], ground: 0xb8c4a8 }); |
| box({ size: [1.5, 1.5, 1.5], color: 0x3b6fd8, at: [-1.5, 0.75, 0], rot: [0, 30, 0] }); |
| const ball = sphere({ r: 0.6, color: 0xe0453a, at: [1.2, 0.6, 0] }); |
| onFrame((t) => { ball.position.y = 0.6 + Math.abs(Math.sin(t * 3)) * 1.5; }); |
| </script> |
| |
| Answer with one complete HTML file in a single ```html code block: the import map from the task in <head>, then \ |
| <script type="module"> with your scene code that imports from 'kit3d'. Do not copy the toolkit itself.""" |
|
|
| CANVAS = """Use the kit2d toolkit. The page already contains it as the global Kit: it creates a full-window canvas and \ |
| runs the animation loop, so you only write what to draw and how things move. |
| const app = Kit.canvas({ background: '#101820', trail: 0 }); |
| app.ctx (2D context), app.w, app.h (size), app.mouse {x, y, down}, app.keys (Set of pressed key names), app.t |
| app.frame((dt, t) => { ...update, then draw... }) every frame (dt, t in seconds); the screen is cleared first |
| (trail between 0 and 1 fades the previous frame instead, for motion trails). |
| app.onClick((x, y) => ...), app.onKey((key) => ...) |
| Drawing (ctx = app.ctx): Kit.circle(ctx, x, y, r, fill, stroke, lineWidth), Kit.ellipse(ctx, x, y, rx, ry, rotation, |
| fill), Kit.rect(ctx, x, y, w, h, fill, stroke, lineWidth, radius), Kit.line(ctx, x1, y1, x2, y2, stroke, width), |
| Kit.poly(ctx, [[x,y],...], fill, stroke), Kit.arc(ctx, x, y, r, fromDeg, toDeg, stroke, width), |
| Kit.text(ctx, 'text', x, y, { size, color, align, baseline, weight }), Kit.glow(ctx, blur, color), Kit.noGlow(ctx). |
| Math: Kit.polar(cx, cy, r, deg) -> [x, y] with 0 deg = up, clockwise; Kit.rand(a, b), Kit.randInt(a, b), |
| Kit.choice(array), Kit.clamp(v, a, b), Kit.lerp(a, b, t), Kit.dist(x1, y1, x2, y2), Kit.hsl(h, s, l, a), |
| Kit.ease.inOut(t) / Kit.ease.out(t). |
| Collisions: Kit.circlesHit(a, b) for {x, y, r}; Kit.rectsHit(a, b) for {x, y, w, h}; Kit.circleRectHit(circle, rect). |
| Particles: const ps = Kit.particles(); ps.add({ x, y, vx, vy, life, size, color }); ps.update(dt, { gravity, drag, |
| wind }); ps.draw(ctx, { additive: true, shrink: true }) (velocities in pixels per second, life in seconds). |
| Grid: const g = Kit.grid(cols, rows); g.get(c, r), g.set(c, r, v); g.layout(app) -> { size, x0, y0 } (square cells |
| that fit the screen and the top-left corner of the grid). |
| Overlays: Kit.hud('Score: 3') (top-left text), Kit.message('Game over', true) / Kit.message('', false), |
| Kit.button('Restart', onClick, { top: '20px', right: '20px' }). |
| |
| Example (a square moving along a curve with a trail; clicks add dots): |
| <script> |
| const app = Kit.canvas({ background: '#0f172a', trail: 0.15 }); |
| const dots = []; |
| app.onClick((x, y) => dots.push({ x, y, r: Kit.rand(6, 14) })); |
| app.frame((dt, t) => { |
| const x = app.w / 2 + Math.sin(t) * 200, y = app.h / 2 + Math.cos(t * 2) * 80; |
| Kit.rect(app.ctx, x - 20, y - 20, 40, 40, Kit.hsl((t * 60) % 360), null, 0, 8); |
| for (const d of dots) Kit.circle(app.ctx, d.x, d.y, d.r, '#f8fafc'); |
| Kit.hud('Dots: ' + dots.length); |
| }); |
| </script> |
| |
| Answer with one complete HTML file in a single ```html code block with your code in a <script> at the end of <body>. \ |
| Do not copy the toolkit itself and do not use other libraries.""" |
|
|
| UI = """Use the ui.css design system: put <link rel="stylesheet" href="ui.css"> in <head> and \ |
| <script src="ui.js"></script> at the end of <body> (the system inlines both). Write semantic HTML with its classes and \ |
| add your own <style> only for details the kit does not cover. |
| Themes: <body data-theme="warm|forest|ocean|dark"> (default: indigo on light grey). |
| Layout: .container (centred, max 1120px), .narrow, .section (vertical padding), .section-alt (tinted band), |
| .section-title, .grid (auto-fit columns; style="--min:200px" changes the column width), .grid-2 .grid-3 .grid-4, |
| .row (flex row with gap; .between .end .top), .grow, .stack (vertical spacing), |
| .layout-sidebar > .sidebar + .main (app layout), .topbar. |
| Navigation and hero: .navbar > .container > .brand + .nav-links > a (.active); .hero (centred; h1 + p.lead + buttons), |
| .hero.hero-dark. |
| Content: .card (.card-hover, .featured), .media + .ph or .ph-1 ... .ph-8 (gradient image placeholders), |
| .btn (.btn-outline .btn-ghost .btn-accent .btn-light .btn-danger .btn-lg .btn-sm .btn-block), |
| .badge (.badge-primary .badge-success .badge-warning .badge-danger), .tags > .tag, .avatar (initials inside; |
| .avatar-sm .avatar-lg), .icon (tile with an emoji or symbol), .price (with <small>/month</small>), .stars, |
| .list-check (check-mark list; li.no shows a cross), .kpi > .value + .label (.up .down), .progress > span |
| (style="width:60%"), .eyebrow, .lead, .muted, .small, .center. |
| Forms: .field > label + input / select / textarea + .error; .check (checkbox or radio with its text); toggle switch: |
| <label class="switch"><input type="checkbox"><span></span></label>; <input type="range" data-show="outId"> writes |
| its value into #outId. |
| Tables: <table class="table">, .num for right-aligned numbers; <table class="table" data-sortable> with <th data-sort> |
| or <th data-sort="number"> sorts on click; wrap in .table-wrap for a sticky header. |
| Interactive: tabs <div data-tabs><div class="tab-list"><button>One</button><button>Two</button></div> |
| <div class="tab-panel">...</div><div class="tab-panel">...</div></div>; |
| accordion <details class="accordion"><summary>Question</summary><p>Answer</p></details>; |
| modal <button class="btn" data-open="m1">Open</button> <div class="modal" id="m1"><div class="modal-box"> |
| <button class="close" data-close>×</button>...</div></div> (Escape also closes); |
| UI.toast('Saved', 'success' | 'warning' | 'error'). |
| Also: .timeline > .item (alternating sides), .steps > .step (.active .done), .bubble.me / .bubble.them (chat), |
| .prose (article text), blockquote, pre / code, figure + figcaption, .footer, .divider. |
| |
| Example (a card with a badge and two buttons): |
| <div class="container section"><div class="card" style="max-width:420px"> |
| <span class="badge badge-primary">New</span><h3>Trail Backpack</h3><p class="muted">Light, waterproof, 28 litres.</p> |
| <div class="row between"><span class="price">$89</span><button class="btn">Buy now</button></div> |
| </div></div> |
| |
| Answer with one complete HTML file in a single ```html code block. Do not copy the toolkit itself.""" |
|
|
| SVG = """Do not write the SVG by hand. Write a Python 3 program that draws it with the svgkit toolkit and prints it: |
| from svgkit import * |
| s = SVG(width, height, bg='#ffffff') # viewBox 0 0 width height; y grows downwards |
| Shapes (extra keyword arguments become SVG attributes, e.g. stroke='#333', stroke_width=3, opacity=0.8): |
| s.rect(x, y, w, h, fill, rx=None), s.circle(cx, cy, r, fill), s.ellipse(cx, cy, rx, ry, fill, rotate=0), |
| s.line(x1, y1, x2, y2, stroke, width), s.polyline(points, stroke, width), s.polygon(points, fill), s.path(d, fill), |
| s.text(x, y, 'label', size=16, fill='#222', anchor='middle' | 'start' | 'end', weight='bold') |
| Geometry (angles in degrees clockwise from 12 o'clock: 0 = up, 90 = right, 180 = down, 270 = left): |
| polar(cx, cy, r, deg) -> (x, y); s.regular_polygon(cx, cy, r, n, rotate=0, fill=...); |
| s.star(cx, cy, r_out, r_in, n=5, fill=...); s.slice(cx, cy, r, start_deg, end_deg, r_inner=0, fill=...) |
| (pie slice, donut segment when r_inner > 0); s.arc(cx, cy, r, start_deg, end_deg, stroke, width) (open arc: gauges, |
| rings, angle marks); s.radial_lines(cx, cy, r1, r2, n, start=0, stroke, width) (n evenly spaced ticks, rays, |
| spokes); s.radial_text(cx, cy, r, ['A', 'B', 'C', 'D'], start=0, size=...) (labels evenly around a circle); |
| s.smooth(points, closed=False, fill, stroke) (smooth curve through points); s.wave(x0, x1, y, amplitude, |
| wavelength, bottom=None, fill) (bottom=y closes it into a filled band); s.arrow(x1, y1, x2, y2, stroke, width, |
| head=10); s.connector(x1, y1, x2, y2) (arrow with right-angle bends). |
| Paint: fill=s.linear_gradient([(0, '#87ceeb'), (1, '#ffffff')]) (top to bottom; x2=1, y2=0 for left to right), |
| s.radial_gradient([...]), filter=s.shadow(), filter=s.glow(8). |
| Structure: with s.group(translate=(x, y), rotate=(deg, cx, cy), scale=k): ...; with s.mirror(x): ... (everything |
| drawn inside appears again mirrored around the vertical line x); with s.repeat_around(cx, cy, n): ... (what you draw |
| pointing up from the centre is repeated n times around it). Later shapes are drawn on top of earlier ones. |
| Charts: y = Scale((min_value, max_value), (bottom_px, top_px)); y(v) -> pixel; s.axis_y(y, x, values, x_end=...) |
| (tick labels and grid lines), s.axis_x(y_px, x0, x1, labels, positions), s.legend(x, y, [(colour, label), ...]); |
| mix(c1, c2, t) blends two colours. |
| |
| Example (a flower): |
| from svgkit import * |
| s = SVG(400, 400, bg='#eef6ee') |
| s.line(200, 210, 200, 380, stroke='#3f7d3a', width=8) |
| with s.repeat_around(200, 170, 8): |
| s.ellipse(200, 110, 26, 55, fill='#f472b6') |
| s.circle(200, 170, 34, fill='#fbbf24') |
| print(s) |
| |
| Answer with the program in a single ```python code block. It must print the finished SVG.""" |
|
|
| KITS = {"three": THREE, "canvas": CANVAS, "html": UI, "svg": SVG} |
|
|
|
|
| def category(text): |
| if re.search(r"three\.js", text, re.I): |
| return "three" |
| if re.search(r"\bsvg\b", text, re.I) and not re.search(r"\bhtml\b", text, re.I): |
| return "svg" |
| if re.search(r"\bcanvas\b", text, re.I): |
| return "canvas" |
| return "html" |
|
|
|
|
| def kit_prompt(text, cat=None): |
| """The task without its answer-format sentence, then the toolkit reference and the new answer format.""" |
| cat = cat or category(text) |
| body = re.split(r"\n\nAnswer with", text)[0].strip() |
| imap = re.search(r'<script type="importmap">.*?</script>', text, re.S) |
| if cat == "three" and imap: |
| body += "\n\nUse three.js through this import map: " + imap.group(0) |
| return body + "\n\n" + KITS[cat] |
|
|
|
|
| CPLIB = """You may use cplib, a library of tested building blocks: write `from cplib import *` at the top of your \ |
| program and the system pastes the library in, so do not copy it. Use it when it fits; otherwise write the code yourself. |
| - Input: read() (one line), ints() (the integers on one line), all_ints() (every integer of the input, fastest). |
| - DSU(n): find(x), union(a, b) (False if already joined), same(a, b), size(x), groups(). |
| - Fenwick(n) (positions 0..n-1): add(i, v), sum(i) = sum of [0, i), range_sum(l, r) = sum of [l, r), lower_bound(k); |
| RangeAddSum(n): add(l, r, v) adds v to [l, r), range_sum(l, r). |
| - SegTree(values, op, identity): set(i, v), get(i), query(l, r) over [l, r); e.g. SegTree(a, min, INF), |
| SegTree(a, max, -INF), SegTree(a, lambda x, y: x + y, 0). SparseTable(a, op=min).query(l, r) for a fixed array. |
| - Graphs (adjacency lists, vertices 0..n-1): bfs(adj, s) -> distances (-1 = unreachable); bfs_grid(grid, (r, c), |
| wall='#'); dijkstra(adj, s) with adj[u] = [(v, w), ...] -> distances (INF = unreachable); zero_one_bfs(adj, s); |
| topo_sort(adj) -> order or None if there is a cycle; scc(adj) -> component id per vertex (in topological order); |
| is_bipartite(adj) -> (ok, colours); kruskal(n, [(w, u, v), ...]) -> (total weight, edges). |
| - Trees: tree_order(adj, root) -> (parent, order, depth), parents before children (loop over reversed(order) for |
| bottom-up DP without recursion); subtree_sizes(adj, root); LCA(adj, root).lca(u, v) and .dist(u, v). |
| - Numbers and counting: MOD = 998244353, MOD7 = 10**9 + 7; Comb(n_max, mod).C(n, k), .P(n, k), .fact, .inv_fact; |
| sieve(n), spf_table(n), factorize(x) -> {prime: exponent}, divisors(x), modinv(a, m), mat_pow(M, k, mod). |
| - Binary search on the answer: first_true(lo, hi, pred) (smallest x with pred(x) true), last_true(lo, hi, pred). |
| - Sequences: prefix_sums(a), prefix_2d(grid), compress(a) -> (ranks, sorted values), lis_length(a, strict=True), |
| next_greater(a), sliding_max(a, k), count_inversions(a). |
| - Strings: prefix_function(s), find_all(text, pattern), z_function(s), RollingHash(s).get(l, r). |
| - Bits: popcount(x), submasks(mask). |
| - Already imported for you: sys, math, heapq, bisect, deque, defaultdict, Counter, lru_cache, reduce, accumulate, |
| combinations, permutations, product, INF.""" |
|
|
|
|
| def cplib_prompt(text): |
| """The code task with the cplib reference placed before its final instruction.""" |
| m = re.search(r"\n\n(Write a Python 3 program|Complete the following starter code|Write a Python function)", text) |
| if not m: |
| return text + "\n\n" + CPLIB |
| return text[:m.start()] + "\n\n" + CPLIB + text[m.start():] |
|
|
