Skills
.Work. You
Rest

layout-converter

Community

Convert Flutter layouts to React Native flexbox.

Software Engineering#alignment#responsive#react-native#flexbox#mediaquery#layout-conversion#flutter-layout
AuthorSaurav-snapwork
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Flutter to React Native migration often breaks layout when Row, Column, Expanded, Spacer, Stack, Positioned, or Wrap widgets are translated. This Skill provides a deterministic mapping that preserves visual hierarchy and scroll behavior during migration.

Core Features & Use Cases

  • Maps Flutter layout widgets to React Native flexbox equivalents (Row, Column, Expanded, Flexible, Spacer, Stack, Positioned, Wrap) and ensures main/cross axis alignments are translated to justifyContent and alignItems.
  • Translates MediaQuery usage to Dimensions or responsive hooks, enabling responsive layouts without Flutter's context-based media queries.
  • Preserves nesting, order, and scroll behavior across migration, reducing layout regressions.

Quick Start

Feed your Flutter layout tree into the converter to generate a React Native layout that preserves structure and alignment.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: layout-converter
Download link: https://github.com/Saurav-snapwork/NewAppTemplate/archive/main.zip#layout-converter

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.