<p>Chat interfaces are great for answering questions, but they are terrible at scaffolding production-ready workChat interfaces are great for answering questions, but they are terrible at scaffolding production-ready workspaces.</p>
<p>If you have ever tried to use a standard LLM to generate a complex frontend, you know the pain. You ask for a dashboard, and the model spits out a fragmented block of React, completely forgetting the routing logic, the Tailwind configuration, and the dependency tree. You spend more time copy-pasting code blocks and fixing hallucinated imports than you would have spent just writing the boilerplate yourself.</p>
<p>We were tired of treating language models like unpredictable junior developers. We wanted a system that took a single Markdown specification file and output a complete, runnable React, TypeScript, and Vite scaffold.</p>
<p>So, we stopped prompting for snippets and built an <strong>Agentic Skill Compiler</strong> instead. Here is how we engineered a Python pipeline that forces LLMs to act like deterministic build tools.</p>
<h2>The Architecture: Context as Infrastructure</h2>
<p>Most AI automation scripts fail because they attempt to track state across multiple, sequential LLM calls. If step one outputs a slight syntax error, step two breaks completely.</p>
<p>Our compiler (<code>compiler.py</code>) operates on a “Single-Shot” paradigm. Built in Python 3.12, it doesn’t chain agents; it aggregates context.</p>
<p>When you run <code>python -m agenticskillcompiler</code>, the engine doesn’t just read your raw <code>project-spec.md</code>. It dynamically reads from a local directory of 48 declarative design skills (<code>app/skills/design-it</code>).</p>
<p>If you select <code>bento-ui</code> from the CLI, the compiler bundles your project spec, the core frontend architectural rules, and the specific aesthetic constraints of Bento design into one hyper-optimized, high-context prompt payload.</p>
<p>You aren’t asking the AI to “design a dashboard.” You are injecting the exact architectural rules of the house before it writes a single line of code.</p>
<p><img src="https://media.daily.dev/image/upload/s--GHs_ni0r--/f_auto/v1783147794/ugc/content_da280f4d-4a89-4358-bdf2-79dce9b52dd9?_a=BAMAMicg0" alt="compiler()_terminal.png"></p>
<h2>Enforcing the JSON Contract</h2>
<p>The biggest vulnerability in AI code generation is parsing the output. Language models love to wrap code in conversational filler (“Here is your code!”).</p>
<p>To solve this, our compiler enforces a strict protocol: <strong>the model must return a single JSON object where the keys are relative file paths and the values are the raw string contents</strong>.</p>
<p>If the model tries to add markdown fences or explanatory text, our <code>parsejson_response()</code> function aggressively strips it away to extract the inner JSON substring. Once parsed, the compiler safely loops through the dictionary and writes the exact folder structures directly to your disk (<code>src/App.tsx</code>, <code>tailwind.config.js</code>, etc.).</p>
<p><img src="https://media.daily.dev/image/upload/s--mZNPCcEM--/f_auto/v1783148620/ugc/content_87d8364d-6aca-4b09-9128-841d003631d5?_a=BAMAMicg0" alt="compiler().png"></p>
<h2>Defensive Engineering: The Fallback Scaffold</h2>
<p>In system architecture, you must design for failure. What happens if the OpenAI or NVIDIA API times out, or the model blatantly ignores the JSON schema?</p>
<p>Instead of crashing the CLI and leaving the user with an empty directory, we built a deterministic fallback mechanism. If the response fails validation, the engine triggers <code>simulateapi_response()</code>. This function intercepts the crash and writes a hardcoded, baseline React/Vite starter project to disk anyway.</p>
<p>The build never truly fails; at worst, it gracefully degrades into a clean, manual starting point.</p>
<p><img src="https://media.daily.dev/image/upload/s--O9UpjG_x--/f_auto/v1783148905/ugc/content_40044947-7c67-4038-9245-9bc6ce3b7f35?_a=BAMAMicg0" alt="simulate.png"></p>
<h2>Observability via Streaming</h2>
<p>Waiting for an LLM to generate 15 interconnected files in one HTTP request is a black box experience. To fix this, we integrated streaming support for both OpenAI and NVIDIA providers.</p>
<p>By tapping into the streaming SDK (<code>stream=True</code>), the compiler iterates through the response chunks in real-time. Crucially, it intercepts and prints the <code>delta.reasoning_content</code> to <code>stdout</code>. This gives the developer an active window into the model’s layout logic and decision-making process while the final JSON payload is quietly assembled in the background.</p>
<h2>The Takeaway</h2>
<p>True automation isn’t about writing more complex scripts to babysit your LLM; it is about structuring your inputs so perfectly, and restricting your outputs so strictly, that the model cannot fail. By treating your AI as a compiler rather than a conversationalist, you bridge the gap between a vague idea and a production-ready repository.spaces.</p>
<p>If you have ever tried to use a standard LLM to generate a complex frontend, you know the pain. You ask for a dashboard, and the model spits out a fragmented block of React, completely forgetting the routing logic, the Tailwind configuration, and the dependency tree. You spend more time copy-pasting code blocks and fixing hallucinated imports than you would have spent just writing the boilerplate yourself.</p>
<p>We were tired of treating language models like unpredictable junior developers. We wanted a system that took a single Markdown specification file and output a complete, runnable React, TypeScript, and Vite scaffold.</p>
<p>So, we stopped prompting for snippets and built an <strong>Agentic Skill Compiler</strong> instead. Here is how we engineered a Python pipeline that forces LLMs to act like deterministic build tools.</p>
<h2>The Architecture: Context as Infrastructure</h2>
<p>Most AI automation scripts fail because they attempt to track state across multiple, sequential LLM calls. If step one outputs a slight syntax error, step two breaks completely.</p>
<p>Our compiler (<code>compiler.py</code>) operates on a “Single-Shot” paradigm. Built in Python 3.12, it doesn’t chain agents; it aggregates context.</p>
<p>When you run <code>python -m agenticskillcompiler</code>, the engine doesn’t just read your raw <code>project-spec.md</code>. It dynamically reads from a local directory of 48 declarative design skills (<code>app/skills/design-it</code>).</p>
<p>If you select <code>bento-ui</code> from the CLI, the compiler bundles your project spec, the core frontend architectural rules, and the specific aesthetic constraints of Bento design into one hyper-optimized, high-context prompt payload.</p>
<p>You aren’t asking the AI to “design a dashboard.” You are injecting the exact architectural rules of the house before it writes a single line of code.</p>
<p><img src="https://media.daily.dev/image/upload/s--JwXKRiop--/f_auto/v1783148993/ugc/content_a4a294d8-0ff2-4785-8b18-f66daa518041?_a=BAMAMicg0" alt="architecture.png"></p>
<h2>Enforcing the JSON Contract</h2>
<p>The biggest vulnerability in AI code generation is parsing the output. Language models love to wrap code in conversational filler (“Here is your code!”).</p>
<p>To solve this, our compiler enforces a strict protocol: <strong>the model must return a single JSON object where the keys are relative file paths and the values are the raw string contents</strong>.</p>
<p>If the model tries to add markdown fences or explanatory text, our <code>parsejson_response()</code> function aggressively strips it away to extract the inner JSON substring. Once parsed, the compiler safely loops through the dictionary and writes the exact folder structures directly to your disk (<code>src/App.tsx</code>, <code>tailwind.config.js</code>, etc.).</p>
<p><img src="https://media.daily.dev/image/upload/s--7JxZS_Q9--/f_auto/v1783149265/ugc/content_3108f3be-f90a-4c9a-bf9d-a4607c0a584f?_a=BAMAMicg0" alt="parse.png"></p>
<h2>Defensive Engineering: The Fallback Scaffold</h2>
<p>In system architecture, you must design for failure. What happens if the OpenAI or NVIDIA API times out, or the model blatantly ignores the JSON schema?</p>
<p>Instead of crashing the CLI and leaving the user with an empty directory, we built a deterministic fallback mechanism. If the response fails validation, the engine triggers <code>simulateapi_response()</code>. This function intercepts the crash and writes a hardcoded, baseline React/Vite starter project to disk anyway.</p>
<p>The build never truly fails; at worst, it gracefully degrades into a clean, manual starting point.</p>
<h2>Observability via Streaming</h2>
<p>Waiting for an LLM to generate 15 interconnected files in one HTTP request is a black box experience. To fix this, we integrated streaming support for both OpenAI and NVIDIA providers.</p>
<p>By tapping into the streaming SDK (<code>stream=True</code>), the compiler iterates through the response chunks in real-time. Crucially, it intercepts and prints the <code>delta.reasoning_content</code> to <code>stdout</code>. This gives the developer an active window into the model’s layout logic and decision-making process while the final JSON payload is quietly assembled in the background.</p>
<h2>The Takeaway</h2>
<p>True automation isn’t about writing more complex scripts to babysit your LLM; it is about structuring your inputs so perfectly, and restricting your outputs so strictly, that the model cannot fail. By treating your AI as a compiler rather than a conversationalist, you bridge the gap between a vague idea and a production-ready repository.</p>


thokozile msoni

A Python-based 'Agentic Skill Compiler' that takes a single Markdown spec file and generates a complete React/TypeScript/Vite scaffold using LLMs as deterministic build tools. The system uses a single-shot context aggregation approach — bundling project specs with 48 declarative design skills into one high-context prompt — rather than chaining sequential LLM calls. Key engineering decisions include enforcing a strict JSON output contract (file paths as keys, file contents as values), a deterministic fallback scaffold when the API fails or returns invalid JSON, and real-time streaming to expose the model's reasoning process during generation.

Stop Prompting for Snippets: Architecting a Deterministic Markdown-to-React Compiler