Skills
.Work. You
Rest

production-compiler

Official

Turn AI UI code into Blade-ready JSX.

Software Engineering#accessibility#design-to-code#token mapping#blade#jsx translation#ui compilation
Authorrazorpay
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It converts raw, AI-generated UI code (and/or design-intel) into Blade-compliant JSX so engineers don’t have to manually translate HTML/Tailwind into the app’s primitives and tokens, while also ensuring accessibility is checked.

Core Features & Use Cases

  • Component substitution: Replaces raw HTML/Tailwind primitives with Blade primitives (e.g., translating layout wrappers into Box/Stack/Grid/Card and controls into Button/Input/Heading).
  • Token application: Maps raw values like spacing and colors into Blade’s semantic tokens, recording deviations when exact matches don’t exist.
  • Accessibility verification: Runs accessibility checks (names, heading order, contrast, focus order, touch targets) and either fixes safe issues inline or flags them for manual review.
  • Use case: After generating UI with AI Studio or ChatGPT, compile the output to Blade JSX and get a translation log plus a clear “manual review needed” list for anything uncertain.

Quick Start

Provide raw AI-generated UI code and ask to compile it to Blade so you receive Blade JSX along with a translation log and any manual-review items.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: production-compiler
Download link: https://github.com/razorpay/ai-playbook/archive/main.zip#production-compiler

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.