Feat/optimize naming (#2)
* Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic. * Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic.
This commit is contained in:
Tom Huang
@@ -313,6 +313,22 @@ Decks regress when each turn re-authors the scale-to-fit logic, the keyboard han
|
||||
|
||||
**You do not write any of that. You do not modify any of that.** Your job is to fill content slots only.
|
||||
|
||||
## Workflow — copy framework first, then fill content
|
||||
|
||||
When the user asks for slides, your TodoWrite plan **must** start with "copy the deck framework verbatim" before any content step. The intended order is:
|
||||
|
||||
\`\`\`
|
||||
1. Bind the active direction's palette + fonts to :root in the framework
|
||||
2. Copy the canonical skeleton below as index.html (nothing else first)
|
||||
3. Plan the slide arc and theme rhythm (state aloud before writing)
|
||||
4. Add per-deck classes inside the second <style> block
|
||||
5. Replace each <section class="slide"> SLOT with real content
|
||||
6. Self-check (no rewriting framework chrome / @media print / nav script)
|
||||
7. Emit single <artifact>
|
||||
\`\`\`
|
||||
|
||||
If you find yourself writing \`<style>\` rules for \`.deck-shell\`, \`.deck-stage\`, \`.slide\`, \`.canvas\`, \`fit()\`, \`@media print\`, or a keyboard handler — STOP. The framework already has them. Re-read this directive, then keep going from "fill SLOT content".
|
||||
|
||||
## The contract
|
||||
|
||||
When you start a new deck, your output is a single HTML file built from the canonical skeleton below. **Copy the skeleton verbatim**, including its first \`<style>\` block, the \`.deck-shell\` / \`.deck-stage\` / \`.deck-counter\` / \`.deck-hint\` chrome, and the entire trailing \`<script>\`.
|
||||
|
||||
@@ -142,6 +142,8 @@ The standard plan template (adapt the middle steps to the brief):
|
||||
- 9. Emit single <artifact>
|
||||
\`\`\`
|
||||
|
||||
**Decks especially — framework first, content second.** For \`kind=deck\` projects, step 4 is the load-bearing one: copy the deck framework HTML (the active skill's \`assets/template.html\`, or, if no skill is bound, the canonical skeleton in the deck-mode directive at the bottom of this prompt) **verbatim** before authoring any slide content. Do NOT write your own scale-to-fit logic, keyboard handler, slide visibility toggle, counter, or print stylesheet — every freeform attempt at this re-introduces the same iframe positioning / scaling bugs we have already fixed in the framework. Your job is to drop the framework in, bind the palette, then fill the \`<section class="slide">\` slots. That's it.
|
||||
|
||||
After TodoWrite, immediately update — **mark step 1 \`in_progress\` before starting it, \`completed\` the moment it's done, mark step 2 \`in_progress\`**, etc. Do not batch updates at the end of the turn; the live progress is the point. If the plan changes, edit the list rather than silently abandoning items.
|
||||
|
||||
Step 7 (checklist) and step 8 (critique) are non-negotiable.
|
||||
|
||||
+28
-6
@@ -14,11 +14,17 @@
|
||||
* (`assets/template.html`) and references (`references/layouts.md`,
|
||||
* `references/checklist.md`), we inject a hard pre-flight rule above
|
||||
* the skill body so the agent reads them BEFORE writing any code.
|
||||
* 4. For decks (skillMode === 'deck'), the deck framework directive
|
||||
* (./deck-framework.ts) is pinned LAST so it overrides any softer
|
||||
* slide-handling wording earlier in the stack — this is the
|
||||
* load-bearing nav / counter / scroll JS / print stylesheet contract
|
||||
* that PDF stitching depends on.
|
||||
* 4. For decks (skillMode === 'deck' OR metadata.kind === 'deck'), the
|
||||
* deck framework directive (./deck-framework.ts) is pinned LAST so it
|
||||
* overrides any softer slide-handling wording earlier in the stack —
|
||||
* this is the load-bearing nav / counter / scroll JS / print
|
||||
* stylesheet contract that PDF stitching depends on. We also fire on
|
||||
* the metadata path so deck-kind projects without a bound skill
|
||||
* (skill_id null) still get a framework, instead of having the agent
|
||||
* re-author scaling / nav / print logic from scratch each turn. When
|
||||
* the active skill ships its own seed (skill body references
|
||||
* `assets/template.html`), we defer to that seed and skip the generic
|
||||
* skeleton — the skill's framework wins to avoid double-injection.
|
||||
*
|
||||
* The composed string is what the daemon sees as `systemPrompt` and what
|
||||
* the Anthropic path sends as `system`.
|
||||
@@ -85,7 +91,23 @@ export function composeSystemPrompt({
|
||||
// Decks have a load-bearing framework (nav, counter, scroll JS, print
|
||||
// stylesheet for PDF stitching). Pin it last so it overrides any softer
|
||||
// wording earlier in the stack ("write a script that handles arrows…").
|
||||
if (skillMode === 'deck') {
|
||||
//
|
||||
// We fire on either (a) the active skill is a deck skill OR (b) the
|
||||
// project metadata declares kind=deck. Case (b) catches projects created
|
||||
// without a skill (skill_id null) — without this, a deck-kind project
|
||||
// with no bound skill gets neither a skill seed nor the framework
|
||||
// skeleton, and the agent writes scaling / nav / print logic from scratch
|
||||
// with the same buggy `place-items: center` + transform pattern we keep
|
||||
// having to fix at runtime. Skill seeds (when present) win — they
|
||||
// already define their own opinionated framework (simple-deck's
|
||||
// scroll-snap, guizang-ppt's magazine layout) and re-pinning the generic
|
||||
// skeleton would conflict. The skill-seed path takes over via
|
||||
// `derivePreflight` above, so we only fire the generic skeleton when no
|
||||
// skill seed is on offer.
|
||||
const isDeckProject = skillMode === 'deck' || metadata?.kind === 'deck';
|
||||
const hasSkillSeed =
|
||||
!!skillBody && /assets\/template\.html/.test(skillBody);
|
||||
if (isDeckProject && !hasSkillSeed) {
|
||||
parts.push(`\n\n---\n\n${DECK_FRAMEWORK_DIRECTIVE}`);
|
||||
}
|
||||
|
||||
|
||||
+11
-8
@@ -16,10 +16,10 @@
|
||||
*/
|
||||
export function buildSrcdoc(
|
||||
html: string,
|
||||
options: { deck?: boolean } = {},
|
||||
options: { deck?: boolean } = {}
|
||||
): string {
|
||||
const head = html.trimStart().slice(0, 64).toLowerCase();
|
||||
const isFullDoc = head.startsWith('<!doctype') || head.startsWith('<html');
|
||||
const isFullDoc = head.startsWith("<!doctype") || head.startsWith("<html");
|
||||
const wrapped = isFullDoc
|
||||
? html
|
||||
: `<!doctype html>
|
||||
@@ -68,8 +68,10 @@ function injectSandboxShim(doc: string): string {
|
||||
tryShim('localStorage');
|
||||
tryShim('sessionStorage');
|
||||
})();</script>`;
|
||||
if (/<head[^>]*>/i.test(doc)) return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
|
||||
if (/<body[^>]*>/i.test(doc)) return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
|
||||
if (/<head[^>]*>/i.test(doc))
|
||||
return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
|
||||
if (/<body[^>]*>/i.test(doc))
|
||||
return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
|
||||
return shim + doc;
|
||||
}
|
||||
|
||||
@@ -101,10 +103,10 @@ function injectDeckBridge(doc: string): string {
|
||||
.stage, .deck-stage, .deck-shell { place-content: center !important; }
|
||||
</style>`;
|
||||
const docWithStyle = /<\/head>/i.test(doc)
|
||||
? doc.replace(/<\/head>/i, styleFix + '</head>')
|
||||
? doc.replace(/<\/head>/i, styleFix + "</head>")
|
||||
: /<head[^>]*>/i.test(doc)
|
||||
? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
|
||||
: styleFix + doc;
|
||||
? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
|
||||
: styleFix + doc;
|
||||
doc = docWithStyle;
|
||||
const script = `<script>(function(){
|
||||
function slides(){ return document.querySelectorAll('.slide'); }
|
||||
@@ -265,6 +267,7 @@ function injectDeckBridge(doc: string): string {
|
||||
}
|
||||
observeSlides();
|
||||
})();</script>`;
|
||||
if (/<\/body>/i.test(doc)) return doc.replace(/<\/body>/i, `${script}</body>`);
|
||||
if (/<\/body>/i.test(doc))
|
||||
return doc.replace(/<\/body>/i, `${script}</body>`);
|
||||
return doc + script;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user