# Code Generation Quality Issues Report

**Date:** 2026-02-05
**Scope:** SwiftUI, React (Tailwind), CSS generators
**Status:** Analysis complete, ready for implementation

---

## Critical Issues (Break generated code)

### 1. Inconsistent MAX_CHILDREN_LIMIT
- `figma_mcp.py:134` = 20 (web), 10 (native)
- `generators/base.py:20` = 30 (web), 20 (native)
- React generator comment says "Limit to 20" but uses 30
- **Fix:** Unify limits - remove from figma_mcp.py or have generators import from there

### 2. React/CSS: Dashed Border Not Rendered
- `base.py` parses `strokeDashes` into StrokeInfo correctly
- React/CSS generators never use `stroke.dashes`
- **Fix:** Add CSS `border-style: dashed` when dashes present, use `border-image` for custom patterns

### 3. React/CSS: Individual Border Widths Ignored
- `_extract_stroke_data()` extracts `individualWeights` (top/right/bottom/left)
- Generators use only uniform `stroke_weight`
- **Fix:** Generate `border-top-width`, `border-right-width` etc. when individual weights differ

### 4. React: Background Blur Uses Wrong CSS Property
- Both LAYER_BLUR and BACKGROUND_BLUR generate `filter: blur()`
- BACKGROUND_BLUR should use `backdrop-filter: blur()` + semi-transparent background
- **Fix:** Check blur type, use `backdropFilter` for BACKGROUND_BLUR

### 5. React/CSS: Inner Shadow Missing `inset` Keyword
- DROP_SHADOW and INNER_SHADOW produce identical CSS
- INNER_SHADOW needs `inset` prefix in box-shadow
- **Fix:** Prepend `inset` when shadow type is INNER_SHADOW

---

## High Priority Issues (Missing important features)

### 6. SwiftUI: No NavigationView/NavigationStack
- Zero navigation code in 1508-line generator
- No `.navigationTitle()`, `NavigationLink` generation
- **Fix:** Detect navigation patterns (nav bar + content), wrap in NavigationStack

### 7. SwiftUI: No TabView Generation
- Tab bar patterns detected but rendered as flat HStack
- No `.tabItem()` modifier, no @State for selection
- **Fix:** Detect bottom tab bar pattern, generate TabView with tabItem modifiers

### 8. All Generators: No Image Loading
- SwiftUI: `Image(systemName: "photo")` placeholder only
- React: No `<img>` with imageRef resolution
- CSS: No `background-image: url()` for image fills
- **Fix:** Generate AsyncImage (SwiftUI), img tags (React), url() (CSS) with Figma image URLs

### 9. SwiftUI: No Accessibility Modifiers
- Missing `.accessibilityLabel()`, `.accessibilityHint()`, `.accessibilityElement()`
- **Fix:** Generate from node name + text content, add sensible defaults

### 10. SwiftUI: Radial Gradient Hardcoded Radius
- Line 137: `endRadius: 200` always
- Should scale with container dimensions
- **Fix:** Calculate from node bounding box: `max(width, height) / 2`

---

## Medium Priority Issues (Quality/accuracy)

### 11. base.py: ColorValue.hex Returns rgba() Not Hex
- When alpha < 1, `.hex` property returns `rgba(r, g, b, a)` string
- `hex_to_rgb()` doesn't handle 8-char hex (#RRGGBBAA)
- **Fix:** Return proper 8-char hex, add rgba() as separate property

### 12. base.py: Duplicate Key in ICON_NAME_MAP
- `'trending'` defined twice: first `chart.line.uptrend.xyaxis`, then `flame`
- Second overwrites first silently
- **Fix:** Remove duplicate, decide which mapping is correct

### 13. React: Gradient Stroke Not Rendered
- Only SOLID stroke colors used (line 106-107)
- GRADIENT_LINEAR/RADIAL strokes ignored
- **Fix:** Generate `border-image: linear-gradient(...)` for gradient strokes

### 14. CSS: Missing `overflow: hidden` for clipsContent
- Figma `clipsContent: true` should generate `overflow: hidden`
- Not consistently applied
- **Fix:** Check `clipsContent` flag, add overflow property

### 15. base.py: Diamond Gradient Incorrect Mapping
- Diamond gradient mapped to `radial-gradient(ellipse)`
- Diamond is a distinct shape
- **Fix:** Use custom CSS with two overlapping linear gradients or note as unsupported

### 16. base.py: Hardcoded Pi Value
- Line 920: `180 / 3.14159265359` instead of `math.pi`
- Minor precision issue
- **Fix:** Use `math.pi`

---

## Generator Feature Matrix

| Feature | React/TW | CSS | SwiftUI |
|---------|----------|-----|---------|
| Solid Fill | OK | OK | OK |
| Gradient (Linear) | OK | OK | OK |
| Gradient (Radial) | OK | OK | Hardcoded radius |
| Gradient (Angular) | OK | OK | OK |
| Gradient (Diamond) | Wrong | Wrong | N/A |
| Drop Shadow | OK | OK | OK |
| Inner Shadow | Missing inset | Missing inset | Approximation |
| Layer Blur | OK | OK | OK |
| Background Blur | WRONG (filter) | WRONG (filter) | OK (.ultraThinMaterial) |
| Dashed Border | NOT RENDERED | NOT RENDERED | OK |
| Individual Borders | IGNORED | IGNORED | N/A |
| Gradient Stroke | IGNORED | IGNORED | OK |
| Corner Radius | OK | OK | OK (individual) |
| Auto-Layout | OK | OK | OK (VStack/HStack) |
| Text Styling | OK | OK | OK (attributed) |
| Blend Modes | OK | OK | OK (11 modes) |
| Opacity | OK | OK | OK |
| Rotation/Flip | OK | OK | OK (radians) |
| Icon Mapping | N/A | N/A | Good (100+ icons) |
| Image Loading | NONE | NONE | NONE |
| Navigation | N/A | N/A | NONE |
| TabView | N/A | N/A | NONE |
| Accessibility | N/A | N/A | NONE |
| ScrollView | N/A | N/A | OK (H+V) |

---

## Files to Modify

1. `generators/base.py` - Fix hex/rgba, duplicate icon key, pi constant
2. `generators/react_generator.py` - Dashed border, individual borders, backdrop blur, inner shadow, gradient stroke
3. `generators/css_generator.py` - Same as React minus Tailwind-specific
4. `generators/swiftui_generator.py` - Navigation, TabView, AsyncImage, accessibility, radial gradient
5. `figma_mcp.py` - Unify MAX_CHILDREN_LIMIT constants
