skills.rest
razorpay
razorpayOFFICIAL
Explore all skills by this author →
Website𝕏@razorpayGitHub

production-compiler

Compiles raw project code and SPR meta-files into structured outputs.

2|2|Updated May 13, 2026
Search Tags:#accessibility#design-to-code#token mapping#blade#jsx translation#ui compilation
One-click install
npx skills add https://github.com/razorpay/ai-playbook --skill production-compiler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: production-compiler
Source: https://github.com/razorpay/ai-playbook/tree/main/skills/production-compiler
Command: npx skills add https://github.com/razorpay/ai-playbook --skill production-compiler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about production-compiler

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert AI-generated UI code into Blade JSX components?▼

The compiler replaces raw HTML and Tailwind primitives with Blade equivalents like Box, Stack, and Button, maps raw values to semantic tokens, and verifies accessibility before returning production-ready JSX with a translation log.

What is the process for mapping Tailwind spacing and colors to Blade semantic tokens?▼

Token application maps raw values like spacing and colors into Blade's semantic tokens during the compilation pipeline, recording deviations in the translation log whenever an exact match does not exist.

Can I generate Blade component skeletons directly from design metadata without UI code?▼

Yes, the compiler supports optional skeleton generation from design-intel alone, but will refuse to process the input if the design metadata contains blocking questions, sensitive data, or oversized payloads.

How does the compiler handle accessibility verification for translated JSX?▼

The pipeline runs accessibility checks for names, heading order, contrast, focus order, and touch targets, fixing safe issues inline and adding uncertain items to a manual-review list.

What causes the Blade compilation process to refuse or reject an input?▼

The compiler refuses inputs that are missing data, contain blocking design-intel questions, exceed payload size limits, or include sensitive data, ensuring only safe inputs are processed.

What is the best way to translate HTML layout wrappers into Blade primitives for production?▼

The optimal approach uses a three-layer pipeline for component substitution, translating HTML layout wrappers into Blade primitives like Box, Stack, Grid, and Card to ensure production-ready JSX output.

Related Skills

Explore More Software Engineering Skills→
Veloxia-agencyVeloxia-agency

ckm:design-system

Generate design tokens, component specs, and HTML slides with Tailwind integration.

Community
Advanced
Xquik-devXquik-dev
177

clean-followers

Flag likely bots, inactive followers, and ghost accounts in Twitter/X follower lists.

Official
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
agentset-aiagentset-ai
2.0k

baseline-ui

Enforce Tailwind CSS defaults and accessible primitives for consistent UI.

Official
Basic