aiblueprint-cli 1.4.92 → 1.4.93
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/agents-config/skills/use-artifacts/SKILL.md +142 -0
- package/agents-config/skills/use-artifacts/agents/openai.yaml +7 -0
- package/agents-config/skills/use-artifacts/assets/codex-icon.svg +18 -0
- package/agents-config/skills/use-artifacts/scripts/create_artifact.py +317 -0
- package/package.json +1 -1
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: use-artifacts
|
|
3
|
+
description: Create Claude-style local HTML artifacts under global ~/.agents/artifacts. Use for artifact requests, variations/options croquis, feature plans, thinking docs, prototypes, visualizations, dashboards, diagrams, or substantial reusable content. Pair with use-style.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Use Artifacts
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Use this skill to simulate Claude Artifacts in agents that do not have a native artifact panel. The artifact is a small global workspace, usually a single self-contained HTML file, created at `~/.agents/artifacts/<id>/` so the user can open, inspect, and iterate on it from any repo.
|
|
11
|
+
|
|
12
|
+
Always create artifacts in the global user directory: `/Users/melvynx/.agents/artifacts/<id>/`. Never create artifacts inside a repo-local `.agents/artifacts` directory, even when the current working directory is a product repo.
|
|
13
|
+
|
|
14
|
+
The HTML is the deliverable. It should turn the agent's public reasoning, plan, findings, examples, and tradeoffs into a polished page the user can scan, not just dump markdown into a file.
|
|
15
|
+
|
|
16
|
+
Research basis: Claude artifacts are useful for substantial, self-contained content that the user may edit, reuse, view, or reference later. Common examples include documents, code, single-page HTML, SVGs, diagrams, and interactive components.
|
|
17
|
+
|
|
18
|
+
## Artifact Criteria
|
|
19
|
+
|
|
20
|
+
Create an artifact when the work is:
|
|
21
|
+
|
|
22
|
+
- substantial enough that inline chat would be hard to inspect or reuse
|
|
23
|
+
- standalone without needing hidden conversation context
|
|
24
|
+
- visual, interactive, document-like, or useful as a reusable reference
|
|
25
|
+
- a feature plan, security review, product brief, implementation plan, or architecture explanation that benefits from visual structure
|
|
26
|
+
- likely to need later iteration
|
|
27
|
+
|
|
28
|
+
Do not create an artifact for a tiny answer, a short code snippet, or a change that belongs directly in an existing product codebase unless the user asks for a separate prototype.
|
|
29
|
+
|
|
30
|
+
## Artifact Modes
|
|
31
|
+
|
|
32
|
+
Default to a thinking/showcase document when the request is about planning, explaining, reviewing, designing, or deciding. This is the Claude-style pattern in which an HTML page presents the answer as a readable artifact:
|
|
33
|
+
|
|
34
|
+
- eyebrow with project/context
|
|
35
|
+
- strong title and lede
|
|
36
|
+
- high-signal finding or recommendation callout near the top
|
|
37
|
+
- sections for model, tradeoffs, flows, edge cases, rollout, or implementation phases
|
|
38
|
+
- code snippets, tables, pills, timelines, diagrams, or cards where they clarify the reasoning
|
|
39
|
+
- final decisions, open questions, and validation notes
|
|
40
|
+
|
|
41
|
+
For any plan artifact (`plan`, `feature-plan`, `implementation-plan`, product plan, launch plan, page plan, or strategy plan), always include both:
|
|
42
|
+
|
|
43
|
+
- a draft of the page/content itself: proposed title, lede, sections, key copy, calls to action, states, or narrative blocks
|
|
44
|
+
- croquis of the page: small visual sketches showing layout, hierarchy, content placement, and option differences
|
|
45
|
+
|
|
46
|
+
The draft answers "what will this say/do?" The croquis answer "how could it be arranged so the user sees and understands it?"
|
|
47
|
+
|
|
48
|
+
Use an interactive artifact when the user asks for a mini app, calculator, simulation, editor, dashboard, visualization, game, or prototype with controls.
|
|
49
|
+
|
|
50
|
+
Use a variations/options artifact when the user asks for variations, options, directions, alternatives, explorations, or "show me a few versions". In this mode, do not build a real UI or final screen. Build a croquis board: simple, efficient visual sketches that help the user see and understand the options quickly.
|
|
51
|
+
|
|
52
|
+
Variation croquis rules:
|
|
53
|
+
|
|
54
|
+
- show 3-6 options on one page as a single vertical sequence: one direction per row, never a multi-column grid
|
|
55
|
+
- give every direction the full available content width so its interface remains legible without opening it
|
|
56
|
+
- start directly with the directions; do not add a masthead, hero, long lede, capability recap, or recommendation callout above them unless the user explicitly asks for that context
|
|
57
|
+
- keep the page chrome minimal: a compact title or view switcher is enough, and omit it when the content is already self-explanatory
|
|
58
|
+
- make each option visibly different in layout, hierarchy, rhythm, or concept
|
|
59
|
+
- use wireframe-like boxes, simple labels, rough placeholders, arrows, swatches, and short notes
|
|
60
|
+
- keep fidelity low-to-mid: enough to compare ideas, not enough to imply implementation is done
|
|
61
|
+
- annotate the tradeoff under each croquis in one or two short lines
|
|
62
|
+
- recommendations are optional, evidence-based, and shown only after all directions; never lead with generic "Best fit", ranking, or promotional copy
|
|
63
|
+
|
|
64
|
+
Do not expose private chain-of-thought. Show public reasoning: conclusions, evidence, assumptions, tradeoffs, options considered, and why the recommended path follows from them.
|
|
65
|
+
|
|
66
|
+
## Required Style Step
|
|
67
|
+
|
|
68
|
+
Always use `$use-style` before designing the artifact UI.
|
|
69
|
+
|
|
70
|
+
Choose the style from the request. When the request has no visual direction,
|
|
71
|
+
default to `black-grid`:
|
|
72
|
+
|
|
73
|
+
- `anthropic`: Claude-like artifacts, writing/research surfaces, calm AI tools
|
|
74
|
+
- `linear`: dense dashboards, admin tools, issue trackers, list/detail workflows
|
|
75
|
+
- `black-grid`: default; developer utilities, technical plans, calculators, indexes, CLI-like tools
|
|
76
|
+
- `grid`: blueprint/product landing pages, structured spec pages, Codelynx-flavored pages
|
|
77
|
+
- `ios-app`: mobile app concepts, iPhone flows, Expo/React Native previews
|
|
78
|
+
- `stripe`: billing, checkout, finance, pricing, account flows
|
|
79
|
+
- `luma`: events, calendars, RSVP, community discovery
|
|
80
|
+
- `gumroad`: loud commerce, creator products, neo-brutalist pages
|
|
81
|
+
- `raycast`: premium dark marketing pages or command-palette products
|
|
82
|
+
- `dusk`: refined dark CRM/data dashboards
|
|
83
|
+
- `new-york-times`: editorial, newspaper, magazine, long-form reading
|
|
84
|
+
- `testspirite`: calm light dev-tool dashboards with onboarding or empty states
|
|
85
|
+
|
|
86
|
+
If no style is inferable and the user did not ask you to choose, use
|
|
87
|
+
`black-grid` and state that choice briefly.
|
|
88
|
+
|
|
89
|
+
## Creation Workflow
|
|
90
|
+
|
|
91
|
+
1. Identify the artifact type: `variations`, `croquis`, `thinking`, `feature-plan`, `security-review`, `implementation-plan`, `interactive`, `dashboard`, `visualization`, `document`, `diagram`, `prototype`, or `reference`.
|
|
92
|
+
2. Pick the `use-style` style and load its file.
|
|
93
|
+
3. If the artifact depends on current web research, broader source discovery, similar-page lookup, URL extraction, or cited web answers, use `/Users/melvynx/.agents/skills/exa-search/SKILL.md`.
|
|
94
|
+
4. Scaffold the workspace:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
python3 /Users/melvynx/.agents/skills/use-artifacts/scripts/create_artifact.py "<short title>" --style black-grid --kind thinking
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
5. Implement the artifact in `index.html`.
|
|
101
|
+
6. Write or update `HIGHLOGIC.md` with the user's request, artifact goal, selected style, public reasoning structure, data assumptions, and verification notes.
|
|
102
|
+
7. Keep `manifest.json` current when title, kind, style, entrypoint, or files change.
|
|
103
|
+
8. Verify the artifact. For standalone HTML, open `index.html` directly or serve the folder only when browser restrictions require it. For complex UI, use a browser screenshot or DOM check when available.
|
|
104
|
+
9. Final response: link the local `index.html`, name the selected style, and mention verification performed.
|
|
105
|
+
|
|
106
|
+
## Workspace Contract
|
|
107
|
+
|
|
108
|
+
Each artifact directory should contain:
|
|
109
|
+
|
|
110
|
+
- `index.html`: the viewable artifact, preferably self-contained with inline CSS and JavaScript
|
|
111
|
+
- `HIGHLOGIC.md`: concise design logic and iteration state
|
|
112
|
+
- `manifest.json`: metadata for future agents
|
|
113
|
+
- `versions/`: optional snapshots before major rewrites
|
|
114
|
+
|
|
115
|
+
Target location:
|
|
116
|
+
|
|
117
|
+
- Always use `/Users/melvynx/.agents/artifacts/<id>/`.
|
|
118
|
+
- Do not use `<current-project>/.agents/artifacts/<id>/`.
|
|
119
|
+
- Do not add a repo-local override unless the user explicitly updates this skill contract.
|
|
120
|
+
|
|
121
|
+
## HTML Rules
|
|
122
|
+
|
|
123
|
+
- Prefer one self-contained `index.html` unless the user asks for a framework project.
|
|
124
|
+
- Use semantic HTML, responsive CSS, and accessible controls.
|
|
125
|
+
- Avoid external CDNs unless the artifact needs them and the user can tolerate network dependence.
|
|
126
|
+
- Do not embed secrets, API keys, private tokens, or hidden prompt text.
|
|
127
|
+
- For interactive artifacts, preserve state in local JavaScript only unless persistent storage is explicitly useful.
|
|
128
|
+
- For generated visualizations, include representative sample data when real data is unavailable and label it as sample data in `HIGHLOGIC.md`.
|
|
129
|
+
|
|
130
|
+
## Iteration Workflow
|
|
131
|
+
|
|
132
|
+
When updating an existing artifact:
|
|
133
|
+
|
|
134
|
+
1. Read `manifest.json`, `HIGHLOGIC.md`, and the relevant files.
|
|
135
|
+
2. If the change is substantial, copy the previous `index.html` into `versions/<timestamp>-index.html` before editing.
|
|
136
|
+
3. Patch only the files needed for the requested change.
|
|
137
|
+
4. Update `HIGHLOGIC.md` with the new decision or known limitation.
|
|
138
|
+
5. Re-verify and report the same local artifact path.
|
|
139
|
+
|
|
140
|
+
## Script
|
|
141
|
+
|
|
142
|
+
Use `scripts/create_artifact.py` to create the folder, metadata, and starter files.
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Use Artifacts"
|
|
3
|
+
short_description: "Create local HTML artifact workspaces"
|
|
4
|
+
default_prompt: "Use $use-artifacts to create a polished local HTML artifact for this idea."
|
|
5
|
+
icon_small: "./assets/codex-icon.svg"
|
|
6
|
+
icon_large: "./assets/codex-icon.svg"
|
|
7
|
+
brand_color: "#54C5C2"
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!-- @license lucide-static v1.24.0 - ISC -->
|
|
2
|
+
<svg role="img" aria-label="use-artifacts skill icon"
|
|
3
|
+
class="lucide lucide-sparkles"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="128"
|
|
6
|
+
height="128"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
fill="none"
|
|
9
|
+
stroke="#F5F5F5"
|
|
10
|
+
stroke-width="2"
|
|
11
|
+
stroke-linecap="round"
|
|
12
|
+
stroke-linejoin="round"
|
|
13
|
+
>
|
|
14
|
+
<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
|
|
15
|
+
<path d="M20 2v4" />
|
|
16
|
+
<path d="M22 4h-4" />
|
|
17
|
+
<circle cx="4" cy="20" r="2" />
|
|
18
|
+
</svg>
|
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
#!/usr/bin/env python3
|
|
2
|
+
"""Scaffold a Claude-style local HTML artifact workspace."""
|
|
3
|
+
|
|
4
|
+
from __future__ import annotations
|
|
5
|
+
|
|
6
|
+
import argparse
|
|
7
|
+
import json
|
|
8
|
+
import re
|
|
9
|
+
from datetime import datetime, timezone
|
|
10
|
+
from pathlib import Path
|
|
11
|
+
|
|
12
|
+
GLOBAL_ARTIFACTS_DIR = Path.home() / ".agents" / "artifacts"
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
def slugify(value: str) -> str:
|
|
16
|
+
slug = re.sub(r"[^a-z0-9]+", "-", value.lower()).strip("-")
|
|
17
|
+
return slug[:48].strip("-") or "artifact"
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
def unique_dir(base: Path, slug: str) -> Path:
|
|
21
|
+
candidate = base / slug
|
|
22
|
+
if not candidate.exists():
|
|
23
|
+
return candidate
|
|
24
|
+
|
|
25
|
+
stamp = datetime.now(timezone.utc).strftime("%Y%m%d-%H%M%S")
|
|
26
|
+
return base / f"{slug}-{stamp}"
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
def html_template(title: str, style: str, kind: str) -> str:
|
|
30
|
+
escaped_title = (
|
|
31
|
+
title.replace("&", "&")
|
|
32
|
+
.replace("<", "<")
|
|
33
|
+
.replace(">", ">")
|
|
34
|
+
.replace('"', """)
|
|
35
|
+
)
|
|
36
|
+
return f"""<!doctype html>
|
|
37
|
+
<html lang="en">
|
|
38
|
+
<head>
|
|
39
|
+
<meta charset="utf-8">
|
|
40
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
41
|
+
<title>{escaped_title}</title>
|
|
42
|
+
<style>
|
|
43
|
+
:root {{
|
|
44
|
+
color-scheme: dark;
|
|
45
|
+
--bg: #000000;
|
|
46
|
+
--panel: #111111;
|
|
47
|
+
--ink: #ffffff;
|
|
48
|
+
--muted: #888888;
|
|
49
|
+
--border: #333333;
|
|
50
|
+
--accent: #0070f3;
|
|
51
|
+
}}
|
|
52
|
+
* {{ box-sizing: border-box; }}
|
|
53
|
+
body {{
|
|
54
|
+
margin: 0;
|
|
55
|
+
min-height: 100vh;
|
|
56
|
+
background: var(--bg);
|
|
57
|
+
color: var(--ink);
|
|
58
|
+
font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
59
|
+
}}
|
|
60
|
+
main {{
|
|
61
|
+
width: min(1120px, calc(100vw - 32px));
|
|
62
|
+
margin: 0 auto;
|
|
63
|
+
padding: 48px 0;
|
|
64
|
+
}}
|
|
65
|
+
.shell {{
|
|
66
|
+
display: grid;
|
|
67
|
+
gap: 24px;
|
|
68
|
+
}}
|
|
69
|
+
.header {{
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-wrap: wrap;
|
|
72
|
+
align-items: end;
|
|
73
|
+
justify-content: space-between;
|
|
74
|
+
gap: 16px;
|
|
75
|
+
border-bottom: 1px solid var(--border);
|
|
76
|
+
padding-bottom: 20px;
|
|
77
|
+
}}
|
|
78
|
+
.eyebrow {{
|
|
79
|
+
margin: 0 0 8px;
|
|
80
|
+
color: var(--accent);
|
|
81
|
+
font-size: 12px;
|
|
82
|
+
font-weight: 700;
|
|
83
|
+
letter-spacing: .08em;
|
|
84
|
+
text-transform: uppercase;
|
|
85
|
+
}}
|
|
86
|
+
h1 {{
|
|
87
|
+
margin: 0;
|
|
88
|
+
max-width: 760px;
|
|
89
|
+
font-size: clamp(40px, 7vw, 88px);
|
|
90
|
+
line-height: .95;
|
|
91
|
+
letter-spacing: -.03em;
|
|
92
|
+
}}
|
|
93
|
+
.meta {{
|
|
94
|
+
color: var(--muted);
|
|
95
|
+
font-size: 14px;
|
|
96
|
+
line-height: 1.5;
|
|
97
|
+
}}
|
|
98
|
+
.panel {{
|
|
99
|
+
min-height: 420px;
|
|
100
|
+
border: 1px solid var(--border);
|
|
101
|
+
border-radius: 8px;
|
|
102
|
+
background: var(--panel);
|
|
103
|
+
padding: 28px;
|
|
104
|
+
}}
|
|
105
|
+
.panel h2 {{
|
|
106
|
+
margin: 0 0 12px;
|
|
107
|
+
font-size: 24px;
|
|
108
|
+
letter-spacing: 0;
|
|
109
|
+
}}
|
|
110
|
+
.panel p {{
|
|
111
|
+
max-width: 680px;
|
|
112
|
+
color: var(--muted);
|
|
113
|
+
font-size: 17px;
|
|
114
|
+
line-height: 1.65;
|
|
115
|
+
}}
|
|
116
|
+
button {{
|
|
117
|
+
border: 0;
|
|
118
|
+
border-radius: 6px;
|
|
119
|
+
background: var(--ink);
|
|
120
|
+
color: var(--bg);
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
font: inherit;
|
|
123
|
+
font-weight: 650;
|
|
124
|
+
padding: 10px 16px;
|
|
125
|
+
}}
|
|
126
|
+
.callout {{
|
|
127
|
+
border: 1px solid var(--border);
|
|
128
|
+
border-radius: 0;
|
|
129
|
+
background: var(--panel);
|
|
130
|
+
padding: 20px;
|
|
131
|
+
}}
|
|
132
|
+
.callout h2 {{ color: var(--ink); }}
|
|
133
|
+
.grid {{
|
|
134
|
+
display: grid;
|
|
135
|
+
gap: 16px;
|
|
136
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
137
|
+
}}
|
|
138
|
+
.croquis {{
|
|
139
|
+
min-height: 180px;
|
|
140
|
+
border: 1px solid var(--border);
|
|
141
|
+
border-radius: 0;
|
|
142
|
+
background: var(--bg);
|
|
143
|
+
padding: 14px;
|
|
144
|
+
}}
|
|
145
|
+
.bar {{
|
|
146
|
+
height: 14px;
|
|
147
|
+
border-radius: 0;
|
|
148
|
+
background: #666666;
|
|
149
|
+
margin-bottom: 10px;
|
|
150
|
+
}}
|
|
151
|
+
.box {{
|
|
152
|
+
height: 52px;
|
|
153
|
+
border: 1px solid var(--border);
|
|
154
|
+
border-radius: 0;
|
|
155
|
+
background: var(--panel);
|
|
156
|
+
margin-bottom: 10px;
|
|
157
|
+
}}
|
|
158
|
+
.note {{
|
|
159
|
+
color: var(--muted);
|
|
160
|
+
font-size: 14px;
|
|
161
|
+
line-height: 1.45;
|
|
162
|
+
}}
|
|
163
|
+
pre {{
|
|
164
|
+
overflow-x: auto;
|
|
165
|
+
border: 1px solid var(--border);
|
|
166
|
+
border-radius: 0;
|
|
167
|
+
background: var(--bg);
|
|
168
|
+
padding: 16px;
|
|
169
|
+
}}
|
|
170
|
+
code {{
|
|
171
|
+
border-radius: 0;
|
|
172
|
+
background: var(--panel);
|
|
173
|
+
padding: 2px 5px;
|
|
174
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
175
|
+
font-size: .92em;
|
|
176
|
+
}}
|
|
177
|
+
</style>
|
|
178
|
+
</head>
|
|
179
|
+
<body>
|
|
180
|
+
<main>
|
|
181
|
+
<section class="shell" aria-label="{escaped_title}">
|
|
182
|
+
<div class="header">
|
|
183
|
+
<div>
|
|
184
|
+
<p class="eyebrow">{kind} artifact</p>
|
|
185
|
+
<h1>{escaped_title}</h1>
|
|
186
|
+
</div>
|
|
187
|
+
<p class="meta">Style: {style}<br>Entrypoint: index.html</p>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="callout">
|
|
190
|
+
<h2>Key finding or recommendation</h2>
|
|
191
|
+
<p>
|
|
192
|
+
Put the highest-signal conclusion near the top. Use this area for the
|
|
193
|
+
main security finding, product decision, implementation warning, or
|
|
194
|
+
core recommendation that frames the rest of the artifact.
|
|
195
|
+
</p>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="panel">
|
|
198
|
+
<h2>Public reasoning surface</h2>
|
|
199
|
+
<p>
|
|
200
|
+
Turn the answer into a readable page: context, model, tradeoffs,
|
|
201
|
+
examples, edge cases, rollout steps, and verification notes. Show
|
|
202
|
+
conclusions and evidence, not private chain-of-thought.
|
|
203
|
+
</p>
|
|
204
|
+
<pre><code>// Add focused snippets when they clarify the plan.
|
|
205
|
+
function example() {{
|
|
206
|
+
return "replace this with the requested artifact content";
|
|
207
|
+
}}</code></pre>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="panel">
|
|
210
|
+
<h2>Page draft</h2>
|
|
211
|
+
<p>
|
|
212
|
+
For plan artifacts, draft the actual page or content structure here:
|
|
213
|
+
title, lede, sections, key copy, calls to action, states, and the
|
|
214
|
+
narrative blocks the user should see.
|
|
215
|
+
</p>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="grid">
|
|
218
|
+
<article class="panel">
|
|
219
|
+
<h2>Page croquis A</h2>
|
|
220
|
+
<div class="croquis">
|
|
221
|
+
<div class="bar" style="width: 72%;"></div>
|
|
222
|
+
<div class="box"></div>
|
|
223
|
+
<div class="box" style="width: 64%;"></div>
|
|
224
|
+
</div>
|
|
225
|
+
<p class="note">Sketch the page hierarchy quickly. This is for seeing and understanding, not final UI.</p>
|
|
226
|
+
</article>
|
|
227
|
+
<article class="panel">
|
|
228
|
+
<h2>Page croquis B</h2>
|
|
229
|
+
<div class="croquis">
|
|
230
|
+
<div class="box" style="height: 84px;"></div>
|
|
231
|
+
<div class="bar" style="width: 46%;"></div>
|
|
232
|
+
<div class="bar" style="width: 78%; opacity: .35;"></div>
|
|
233
|
+
</div>
|
|
234
|
+
<p class="note">Annotate what changes: layout, emphasis, rhythm, audience, or tradeoff.</p>
|
|
235
|
+
</article>
|
|
236
|
+
</div>
|
|
237
|
+
</section>
|
|
238
|
+
</main>
|
|
239
|
+
</body>
|
|
240
|
+
</html>
|
|
241
|
+
"""
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
def highlogic_template(title: str, style: str, kind: str, created_at: str) -> str:
|
|
245
|
+
return f"""# {title}
|
|
246
|
+
|
|
247
|
+
## Intent
|
|
248
|
+
|
|
249
|
+
- Kind: {kind}
|
|
250
|
+
- Style: {style}
|
|
251
|
+
- Created: {created_at}
|
|
252
|
+
|
|
253
|
+
## User Request
|
|
254
|
+
|
|
255
|
+
TODO: Summarize the user's artifact request.
|
|
256
|
+
|
|
257
|
+
## Core Logic
|
|
258
|
+
|
|
259
|
+
TODO: Describe the public reasoning structure, sections, data model, interactions, and key design decisions. Capture conclusions, evidence, assumptions, and tradeoffs without private chain-of-thought.
|
|
260
|
+
|
|
261
|
+
## Verification
|
|
262
|
+
|
|
263
|
+
TODO: Record how the artifact was opened or tested, including browser/runtime checks when relevant.
|
|
264
|
+
|
|
265
|
+
## Iteration Notes
|
|
266
|
+
|
|
267
|
+
- Initial scaffold created.
|
|
268
|
+
"""
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
def main() -> int:
|
|
272
|
+
parser = argparse.ArgumentParser(description="Create a local HTML artifact workspace.")
|
|
273
|
+
parser.add_argument("title", help="Short artifact title or slug")
|
|
274
|
+
parser.add_argument("--style", default="black-grid", help="use-style style name")
|
|
275
|
+
parser.add_argument("--kind", default="thinking", help="artifact kind")
|
|
276
|
+
args = parser.parse_args()
|
|
277
|
+
|
|
278
|
+
base = GLOBAL_ARTIFACTS_DIR.resolve()
|
|
279
|
+
artifact_id = slugify(args.title)
|
|
280
|
+
artifact_dir = unique_dir(base, artifact_id)
|
|
281
|
+
created_at = datetime.now(timezone.utc).isoformat()
|
|
282
|
+
|
|
283
|
+
artifact_dir.mkdir(parents=True, exist_ok=False)
|
|
284
|
+
(artifact_dir / "versions").mkdir()
|
|
285
|
+
|
|
286
|
+
title = args.title.strip()
|
|
287
|
+
(artifact_dir / "index.html").write_text(
|
|
288
|
+
html_template(title, args.style, args.kind),
|
|
289
|
+
encoding="utf-8",
|
|
290
|
+
)
|
|
291
|
+
(artifact_dir / "HIGHLOGIC.md").write_text(
|
|
292
|
+
highlogic_template(title, args.style, args.kind, created_at),
|
|
293
|
+
encoding="utf-8",
|
|
294
|
+
)
|
|
295
|
+
manifest = {
|
|
296
|
+
"id": artifact_dir.name,
|
|
297
|
+
"title": title,
|
|
298
|
+
"kind": args.kind,
|
|
299
|
+
"style": args.style,
|
|
300
|
+
"created_at": created_at,
|
|
301
|
+
"entrypoint": "index.html",
|
|
302
|
+
"files": ["index.html", "HIGHLOGIC.md", "manifest.json"],
|
|
303
|
+
}
|
|
304
|
+
(artifact_dir / "manifest.json").write_text(
|
|
305
|
+
json.dumps(manifest, indent=2) + "\n",
|
|
306
|
+
encoding="utf-8",
|
|
307
|
+
)
|
|
308
|
+
|
|
309
|
+
index_path = artifact_dir / "index.html"
|
|
310
|
+
print(f"created={artifact_dir}")
|
|
311
|
+
print(f"index={index_path}")
|
|
312
|
+
print(f"url={index_path.as_uri()}")
|
|
313
|
+
return 0
|
|
314
|
+
|
|
315
|
+
|
|
316
|
+
if __name__ == "__main__":
|
|
317
|
+
raise SystemExit(main())
|