| name | design-to-react-algorithms |
| description | Reverse-engineering a Sketch file (or Figma export with similar shape) into pixel-perfect React + CSS — the iteration mental model, tree reconstruction, layout inference algorithms, geometry math, visual-regression diffing, and the style/typography/path conversions that make "improvement without regression" enforceable. Trigger even if the user doesn't explicitly mention "algorithms" but is converting a design source into web code, building a design-to-code pipeline, or struggling to make incremental fidelity improvements without breaking previously-converted output. |
dot-skills Design-to-React Conversion Best Practices
The reverse-engineering pipeline that converts Sketch files into pixel-perfect React + CSS, with regression-safe iteration as the load-bearing constraint. The skill is organized around the cascade effect of design-to-code conversion: a wrong call in stage N corrupts every output from stage N+1 onward, so categories are ordered by how much downstream they own.
The user's primary requirement — "each improvement doesn't cause regressions" — is enforceable only if the iteration loop, the layer tree, and the layout solver are correct before you start polishing styles. Read the rules in priority order.
When to Apply
- Building a converter that ingests a
.sketch file (or equivalent design source) and emits React + CSS
- Iterating on an existing converter where each improvement risks breaking other components
- Diagnosing why a converted component "almost matches" the design but visual-regression fails
- Designing the snapshot-gate / baseline strategy for a design-to-code pipeline
- Choosing between flexbox vs grid vs absolute positioning when the source is freeform geometry
- Translating Sketch-specific primitives (
MSImmutableFlexGroupLayout, attributedString, curvePoint, MSImmutableStyleCorners) into idiomatic CSS
Rule Categories by Priority
The ordering is the cascade — fix earlier stages first; later-stage fixes are wasted if the upstream tree is wrong.
| Priority | Category | Impact | Prefix |
|---|
| 1 | Reverse-Engineering Iteration Strategy | CRITICAL | iter- |
| 2 | Tree Reconstruction & Symbol Resolution | CRITICAL | tree- |
| 3 | Layout Algorithms (Flex/Freeform Inference) | CRITICAL | layout- |
| 4 | Coordinate & Geometry Math | HIGH | geom- |
| 5 | Visual Regression & Diff Algorithms | HIGH | diff- |
| 6 | Style Translation (Color, Gradient, Shadow, Border) | MEDIUM-HIGH | style- |
| 7 | Typography Math | MEDIUM | type- |
| 8 | Path & Shape Rendering | MEDIUM | path- |
Quick Reference
1. Reverse-Engineering Iteration Strategy (CRITICAL)
2. Tree Reconstruction & Symbol Resolution (CRITICAL)
3. Layout Algorithms (CRITICAL)
4. Coordinate & Geometry Math (HIGH)
5. Visual Regression & Diff Algorithms (HIGH)
6. Style Translation (MEDIUM-HIGH)
7. Typography Math (MEDIUM)
8. Path & Shape Rendering (MEDIUM)
How to Use
- Read
references/_sections.md for category definitions and the cascade rationale
- Start with the iteration strategy (
iter-*) — without the regression gate, every other rule is just techniques
- Then tree (
tree-*) and layout (layout-*) — these are the load-bearing structural decisions
- Then geometry (
geom-*) and diff (diff-*) — these are the precision and validation layers
- Style, type, and path are the polish layer — high fidelity but mostly local impact
For a brand-new converter, follow the rules in priority order. For an existing converter, identify which stage owns the regression you're seeing (use [[diff-subtree-bisection-to-localize-regression]] + [[diff-perceptual-hash-for-wrong-component-detection]] to triage) and fix at the highest stage that owns it.
Reference Files
