---
name: uizze-design
description: NarmaForge 6-State Craft Gate: state matrix (ideal, loading, empty, error, partial, optimistic) and contracts.
---

# NarmaForge 6-State Craft Gate

The NarmaForge 6-State Craft Gate ensures interfaces withstand real-world conditions through mandatory multi-state coverage and physical finish gates.

## 1. The Mandatory 6-State Matrix
Every data view or interactive component must implement:
1. **Ideal State**: Populated normal content.
2. **Loading State**: Skeleton placeholders with a 200ms anti-flicker delay and 350ms minimum display time.
3. **Empty State**: Contextual message explaining what is missing plus an immediate primary action CTA.
4. **Error State**: Plain-language diagnosis with an actionable retry button.
5. **Partial State**: Graceful overflow, truncation, and pagination bounds.
6. **Optimistic State**: Immediate UI update with background rollback on failure.

## 2. Pre-Ship Finish Gates
- **Concentric Radii**: When nesting elements, ensure inner radius equals outer radius minus padding:
  $r_{\text{inner}} = \max(0, r_{\text{outer}} - \text{padding})$.
- **Optical Alignment**: Nudge icons by $\pm 1$px when geometric center looks visually unbalanced.
- **Micro-Interactions**: Active click feedback (`:active { transform: scale(0.97); }`) and explicit `cursor: pointer;`.
- **Screen Density**: Prevent sticky headers from obscuring scrollable targets using `scroll-margin-top`. Mobile inputs must be $\ge 16$px to avoid iOS auto-zoom.