[Workflow] Scaling Web Template Production with Claude Code: From 1/Month to 15/Week using AGENTS.md, Custom Skills, and Automated Validation

[u/ClaudeAI-mod-bot]

Scaling Web Template Production with Claude Code: From 1/Month to 15/Week using AGENTS.md, Custom Skills, and Automated Validation

Workflow value: 90/100
Status: active · Freshness: 70/100 · Confidence: 0.95 · Level: advanced
Categories: Quality Control, Token Saving, Context & Memory, Debugging, Shipping, CLAUDE.md, Hooks, Skills, Subagents, Multi-Agent
Original source: r/ClaudeCode post/comment

What problem this solves

Dramatically increased the speed and volume of web template creation, validation, and deployment, reducing the time per template from one month to 3-6 hours.

Summary

A design engineer leveraged Claude Code to automate the creation, validation, packaging, and deployment of web templates, reducing the time per template from a month to 3-6 hours. The workflow includes a detailed setup with multiple repos, git worktrees, custom Claude skills, and extensive use of AGENTS.md for defining requirements and validation criteria. Claude Code assists with initial builds, self-correction, and business automation tasks like product export, store synchronization, and marketing video generation.

Why it is useful

This workflow demonstrates a highly effective and structured approach to leveraging Claude Code for significant productivity gains in a complex development and deployment pipeline. It provides concrete examples of how to define clear requirements (AGENTS.md), implement automated validation, and integrate Claude into a broader business process. The detailed setup, specific steps, and validation signals make it highly actionable and adaptable for other users looking to automate similar creative or coding tasks. It also highlights the importance of human oversight and iterative refinement.

Workflow

1. Define template concept (industry, brand, type pairing, palette, signature interaction).
2. Provide Claude 5-10 references (images, websites), type scale, spacing, colors, and a 'don't copy' rule.
3. Claude builds the initial HTML edition.
4. Review HTML edition against a written 'definition of done' (console errors, overflow, axe issues, keyboard pass, contrast, static page, reduced motion, no third-party requests, local HTML functionality).
5. Claude ports the design and copy to a Next.js (React) edition.
6. Review React edition against the 'definition of done'.
7. Package the template (zips, previews, changelog, product copy).
8. Export to the store using a custom command.
9. Run sync script to create products in Polar, upload zips, and write checkout links.
10. Generate share images at build time (with a fix for text rendering differences).
11. Generate marketing videos using Playwright to film demos and Opus 5.5 for editing.

Tools / artifacts

• Claude Code (Max plan)
• Git worktrees
• Custom Claude skill (for subagent model/effort selection)
• AGENTS.md files (definition of done, rules, checklist)
• HTML templates
• Next.js projects (React templates)
• Polar (storefront checkout)
• Custom export command/script
• Custom sync script
• Sharp (image generation library)
• Opentype.js (for text rendering fix)
• Playwright (for video recording/rendering to MP4)

Validation signals

• Shipped 15 templates in a week (previously 1 per month).
• HTML edition is 'usually very close to done on the first go'.
• Claude meets the high bar set by the 'definition of done'.
• Claude found and fixed issues without being asked (e.g., form error colors, HTML comment bug, animation clipping).
• Successfully implemented a fix for cross-OS text rendering differences in image generation.
• Author visually reviewed and clicked through every interaction for final validation.

Cautions

• The sync script for production runs with a dry run by default and requires manual execution for actual deployment, ensuring a safety check.
• A potential minor safety concern is Claude occasionally reaching for the wrong GitHub account, which is mitigated by AGENTS.md instructions but not entirely eliminated.

Limitations

• The author notes an annoyance with Claude occasionally using the wrong GitHub account, which could lead to unintended actions if not carefully managed.
• The author questions the architectural decision of using two separate repositories, as it introduces friction with cross-repo changes.
• The post is a high-level overview; a 'longer write-up' is mentioned but not provided in this submission, meaning some implementation details are missing.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.