production-compiler

name

production-compiler

description

Takes raw AI-generated UI code (typically from AI Studio, ChatGPT, or a similar prompt-based UI generator) plus optional design-intel and produces Blade-compliant JSX. Three layers: component substitution (raw primitives → Blade primitives), token application (raw values → Blade tokens), accessibility verification. Activate when the user has raw AI-generated UI code or a Figma design they want translated to Blade-using code.

production-compiler

Triggers

Activate when the user says "compile this to Blade", "translate this AI-generated UI to Blade", "make this design-intel into Blade code", or any phrasing that maps to "produce shippable Blade JSX from raw input".

Activate as the second stage of the design-to-code workflow described in G.15. The first stage is the design-intel skill.

Body

The skill runs three layers in order. Each layer produces input for the next.

Layer 1: Component substitution

Replace raw HTML / Tailwind primitives in the input with Blade primitives.

For each non-Blade element:

• Identify the Blade primitive that matches the element's role and shape.
• Replace the element with the Blade primitive.
• Where no Blade primitive exists, compose from Blade primitives or note the gap.

The substitution rules are in translation-rules.md. Common substitutions: <button> → Button, <div> with stack-like Tailwind classes → Stack, <input> → Input, <h1> → Heading.

Layer 2: Token application

Replace raw values (colours, spacing, typography) with Blade tokens.

For each raw value:

• Identify the Blade token that matches. Blade tokens use semantic naming (intent.positive, intent.notice, spacing.medium).