skills.rest
ilya-makarov-dev
ilya-makarov-devCOMMUNITY
Explore all skills by this author →
GitHub

reframe-to-react

Converts reframe visual design scenes into deterministic React code.

15|3|Updated Apr 7, 2026
Search Tags:#react#front-end#component#export#design-to-code#css-modules
One-click install
npx skills add https://github.com/ilya-makarov-dev/Reframe --skill reframe-to-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reframe-to-react
Source: https://github.com/ilya-makarov-dev/Reframe/tree/main/.claude/skills/reframe-to-react
Command: npx skills add https://github.com/ilya-makarov-dev/Reframe --skill reframe-to-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts visual design scenes created in reframe into deterministic React code, streamlining the handoff from design to development.

Core Features & Use Cases

  • React Code Export: Translates reframe scenes into clean, ready-to-use React components.
  • Stack Specification: Allows specification of rendering stack including inline styles, CSS modules, tailwind, or styled-components.
  • Use Case: Export a design prototype as a React component library, enabling rapid integration into web applications.

Quick Start

Use the reframe-to-react skill to export your current scene as a React component library with CSS modules.

Frequently Asked Questions about reframe-to-react

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

FAQPage Schema
How do I export a visual design scene as a React component?▼

You can export reframe scenes as React components by converting the visual designs into deterministic React code. This process extracts the scene markup and maps it to your specified styling stack in one step.

What styling approaches can I specify when converting designs to React code?▼

When converting designs to React code, you can specify rendering stacks including inline styles, CSS modules, tailwind, or styled-components. This stack specification ensures the generated components integrate seamlessly with your project's styling conventions.

Can I use this to build an entire React component library from a design prototype?▼

Yes, you can export a design prototype as a React component library by translating reframe scenes into ready-to-use React components. This enables rapid integration of your visual designs into web applications.

Does the React code generation maintain the integrity of the original design scene?▼

Yes, the conversion process maintains source scene integrity to ensure code consistency. By preserving the original visual design structure, it guarantees deterministic output that accurately reflects your reframe prototype.

What is the process for handling extraction and markup generation for React components?▼

The process handles extraction, markup generation, and stack mapping in one step to produce deterministic React code. This ensures the output is tailored to your specific styling stack while preserving source scene integrity.

Related Skills

Explore More Software Engineering Skills→
ilya-makarov-devilya-makarov-dev
15

reframe-critic

Analyze compiled design scenes for visual harmony and type hierarchy.

Community
Intermediate
endorphin-aiendorphin-ai
3

react-design-mean

Design React frontend architectures for MEAN stack applications.

Official
Advanced
xurenluxurenlu
1

web-component-design

Guide reusable UI component design across React, Vue, and Svelte.

Community
Advanced
modu-aimodu-ai
67

moai-design-tools

Extract Figma design tokens and export React/Tailwind components.

Official
Advanced