feat(workflows): add coding-backwards-design workflow for copilot and claude agents - #641
feat(workflows): add coding-backwards-design workflow for copilot and claude agents#641pranavsankar2 wants to merge 6 commits into
Conversation
Claude's ReviewThanks for adding this — codifying "Coding Backwards" into a reproducible pipeline is a neat use of the staged workflow API. Leaving findings below, ordered by severity. Blocking1. Every other workflow in export default defineWorkflow({ name: "…", inputs: [...] })
.for<"copilot">()
.run(async (ctx) => { … })
.compile();Please apply the same pattern here; otherwise 2. Load-bearing inputs are prompt: `…crawl ${ctx.inputs.target_url}. …`
prompt: `…target aesthetic: "${ctx.inputs.design_reference}". …`If a user omits them, the agent gets Important3. Prompt-injection surface via 4. 5. Template-literal indentation bleeds into prompts. Because the template literals live inside an indented callback, every line after the first carries ~10 leading spaces (e.g. 6. Stage 3 saving Nitpicks
Nice bits
Once the API-shape fix (#1) lands and the required-input gap (#2) is closed, the rest is polish. Happy to look again after a push. |
Implements a complete portfolio site with component-based CSS architecture (tokens, components, utilities) and modular JS (gallery, film, library, about sections with routing, lightbox, and filter bar). Includes preview server, inline HTML entry point, and design documentation. Assistant-model: Claude Code
The .atomic/workflows/** files were reported with relative ../ paths, bypassing the existing .atomic/** ignore pattern. Adds **/.atomic/** to catch both path forms, and excludes the new src/css, src/js, and preview directories since they are static site assets. Assistant-model: Claude Code
PR Review —
|
Implement the "Coding Backwards" frontend pipeline for the Claude Agent SDK with 7 orchestrated stages: design discovery, critique, architecture plan, scaffold, parallel progressive build, Ralph-style QA/review loop, and documentation. Assistant-model: Claude Code
PR Review: feat(workflows): add coding-backwards design workflow for copilotThanks for this PR — the "Coding Backwards" methodology is an interesting approach and the workflow structure is well-thought-out. Below is my review covering code quality, bugs, security, performance, and test coverage. Security (P0 — must fix before merge)1. Path traversal vulnerability in The // preview/server.js:131
if (pathname.startsWith("/src/")) {
return join(ROOT, pathname);
}
return join(PREVIEW_DIR, pathname);
Fix: Resolve the path and then verify it stays within the allowed root: function resolveFilePath(pathname) {
const decoded = decodeURIComponent(pathname);
let resolved;
if (decoded === "/" || decoded === "") {
resolved = join(PREVIEW_DIR, "index.html");
} else if (decoded.startsWith("/src/")) {
resolved = resolve(ROOT, decoded.slice(1)); // remove leading /
} else {
resolved = resolve(PREVIEW_DIR, decoded.slice(1));
}
// Guard against directory traversal
if (!resolved.startsWith(PREVIEW_DIR) && !resolved.startsWith(SRC_DIR)) {
return null; // Return null and handle as 404
}
return resolved;
}2. // src/js/HotlineEmbed.js:16
iframe.allow = 'microphone; camera';Granting camera permissions to a third-party iframe ( Code Quality & Architecture (P1 — should fix)3. Generated site placed inside The generated portfolio outputs ( The Suggestion: Move generated site assets to a self-contained directory, e.g., 4. This is a site-specific design specification for jamesbuckhouse.com. It should live alongside its workflow output, not at the repository root where it looks like project-level documentation. 5. Dual content sources — HTML vs JS data files Content exists in both 6. File structure diverges from DESIGN_README.md The README specifies TypeScript files ( 7. Copilot workflow uses // .atomic/workflows/design-driven/copilot/index.ts:42
placeholder: "npm run dev",Per 8. Missing newline at end of The file doesn't end with a newline character (line 129). Most linters and POSIX conventions expect a trailing newline. Potential Bugs (P1)9. // src/js/main.js:64-66
'#/': () => {
main.innerHTML = '';
main.appendChild(createGalleryGrid(artworks));
},Setting 10. Claude workflow // .atomic/workflows/design-driven/claude/index.ts:118-122
if (msg.subtype === "success" && (msg as Record<string, unknown>).structured_output) {
structured = (msg as Record<string, unknown>).structured_output as ComponentPlan;
}These cascading type assertions are fragile and bypass type safety entirely. If the SDK types are incomplete, consider augmenting them with proper interface extensions rather than using 11. Claude workflow // .atomic/workflows/design-driven/claude/index.ts:159-161
function asAgentCall(agentName: string, prompt: string): string {
return `@"${agentName} (agent)" ${prompt}`;
}This constructs an agent invocation via string interpolation. If the SDK's agent invocation syntax changes, this silently breaks. Verify this matches the current Claude Agent SDK's expected format. Performance (P2)12. 45 artwork cards + 12 film cards + 64 library cards loaded at once
13. CSS loaded via /* src/css/main.css */
@import url('./tokens/colors.css');
@import url('./tokens/radii.css');
/* ... 14 more imports */Each Test Coverage (P2)14. Tests only cover data integrity and module signatures The test files are well-structured and validate data shape, but there's no coverage for:
At minimum, Minor Issues
Summary
The workflow definitions (both copilot and claude variants) are well-designed with clear stage separation and the progressive build + QA loop pattern is solid. The main concerns are around where the generated output lives and the path traversal security issue in the dev server. |
Update the Claude and Copilot design-driven workflows to rename DESIGN_README.md -> DESIGN.md, reference the /playwright-cli skill for browser automation, and clarify the Ralph-style review loop as a "visual analysis" stage. The Copilot variant is substantially rewritten to use session.send / defineTool structured output. Adds a new OpenCode implementation so all three agent SDKs can run the "coding backwards" pipeline. Assistant-model: Claude Code
Output of running the design-driven workflow on a Big Sur-inspired restyle of the jamesbuckhouse.com portfolio. Moves the site entry point from preview/ to the project root, replaces the live-reload dev server with a minimal static file server, renames DESIGN_README.md -> DESIGN.md (matching the workflow update), and adds DESIGN.md / DESIGN_BRIEF.md / spec.txt plus reference screenshots used as design inputs and the final result. Also drops the five design-focused skills (arrange, frontend-design, normalize, onboard, teach-impeccable, extract) from .agents/skills and skills-lock.json now that the workflow itself drives the design process. Assistant-model: Claude Code
ReviewThoughtful work on codifying the "Coding Backwards" methodology into a pipeline. The three-SDK parallel (Claude / Copilot / OpenCode) is a nice demonstration of the workflow authoring surface. A few findings grouped by severity. Critical — bugs that silently disable parts of the workflow
Architectural / maintainability
Minor
Tests
What's good
Overall: the workflow design is solid, but items 1–3 should be fixed before merge (they functionally disable the infra-discovery and debugger feedback loops in the Claude variant), and items 4–5 would make this much more pleasant to maintain long-term. |
Summary
Adds
coding-backwards-designworkflows for the Copilot and Claude agents, codifying the "Coding Backwards" methodology into an automated, 7-stage generative pipeline for design-driven UI implementation. Also includes a reference implementation — a fully-built Big Sur–themed portfolio site — generated by running the workflow against jamesbuckhouse.com.Changes
Workflows
Copilot variant (
.atomic/workflows/design-driven/copilot/index.ts):defineWorkflow<"copilot">and finalized with.compile()defineToolwith Zod schemas for structured outputs (component plans, review results) since Copilot lacks a nativejson_schemaoutput modeClaude variant (
.atomic/workflows/design-driven/claude/index.ts):defineWorkflow<"claude">, uses@anthropic-ai/claude-agent-sdkdirectly for structured outputs viajson_schemaoutput formats.session.queryvss.session.send/sendAndWait)queryWithComponentPlanwith JSON schema to extract a structuredComponentPlan, driving parallel component builds viacaptureBranchChangesetqueryWithStructuredOutputfor visual analysis and dual reviewers; merges all three review sources viamergeReviewResults@"agent-name (agent)"syntaxBoth variants share the same inputs (
spec,design_reference,dev_command) and reuse helpers fromsrc/sdk/workflows/builtin/ralph/.Generated Site (Workflow Output)
Reference implementation produced by running the workflow:
preview/index.html— single-page portfolio with 45 artworks, 12 film posters, 64 library resources, Delphi embed, and About sectionpreview/server.js— local static file server for the previewsrc/css/— complete CSS design system: tokens (colors, spacing, radii, shadows, transitions, typography), component styles, utilities, and interaction statessrc/js/— vanilla JS component modules (Navbar, GalleryGrid, ArtworkCard, Lightbox, HotlineEmbed, LibrarySection, FilterBar, FilmSection, Footer, router, main) plus data files with unit testsConfig
bunfig.toml— adds coverage exclusions forsrc/css/**,src/js/**, andpreview/**(generated site assets, not part of the core app)Notes
playwright-cliskill to be available to the agent for Stage 1 (visual analysis) and the QA passdev_commandis optional — stages fall back tobun run preview/server.jsif not providedopencodevariant is not included in this PR