Vertical index page

# Vertical index page

{
  "summary": "A clean, functional grayscale mobile list index with a fixed header, scrollable list items featuring icons and metadata, skeleton loading states, and a centered empty state component.",
  "style": {
    "description": "The style is a functional wireframe aesthetic utilizing a strict grayscale palette (#FFFFFF, #F9FAFB, #E5E7EB, #9CA3AF, #6B7280, #111827). Typography uses 'General Sans' with weights ranging from 400 to 700. Layout emphasizes spacing and subtle borders over color. Interactions include background color shifts (hover/active) and scale transforms on buttons.",
    "prompt": "### Typography and Colors\n- **Font Family**: 'General Sans' or similar geometric sans-serif.\n- **Colors**:\n  - Background: #FFFFFF (Primary), #F9FAFB (Secondary/Main BG)\n  - Borders: #E5E7EB (Light), #D1D5DB (Medium)\n  - Text: #111827 (Primary), #6B7280 (Secondary/Metadata), #9CA3AF (Labels)\n  - Accents: #1F2937 (Dark backgrounds for specific icons)\n- **Weights**: Bold (700) for headers/titles, Medium (500) for sub-headers, Regular (400) for secondary text.\n- **Sizes**: Title (24px, tracking-tight), Row Title (14px), Metadata/Section Header (12px).\n\n### Interactions & Effects\n- **Hover State**: Background change to #F9FAFB.\n- **Active/Tap State**: Background change to #F3F4F6 with a subtle scale transform (0.95) for buttons.\n- **Backdrop**: Header uses 95% opacity with a blur effect (backdrop-filter: blur(8px)).\n- **Animations**: Skeleton rows use a 'pulse' opacity animation (duration 2s, infinite)."
  },
  "layout_and_structure": {
    "description": "A vertical stack consisting of a fixed top header, a scrollable container with sectioned list groups, skeleton placeholders, and a dedicated empty state region.",
    "prompts": [
      {
        "part": "Fixed Header",
        "prompt": "Sticky header (top: 0, z-index: 20) with 56px padding-top, 8px padding-bottom, and 16px horizontal padding. Layout: Flexbox justify-between. Left side: Vertical stack with Title (24px bold) and Subtitle (12px medium). Right side: Circular button (40x40px) with border #E5E7EB and centered icon."
      },
      {
        "part": "Section Header",
        "prompt": "Horizontal bar with 16px horizontal and 8px vertical padding. Background: #F9FAFB. Border-bottom: #E5E7EB. Text: Uppercase, tracking-wider, 12px bold, color #9CA3AF. Layout: Flexbox justify-between showing title and item count."
      },
      {
        "part": "List Row Component",
        "prompt": "Flexbox container with 16px padding. Background: #FFFFFF. Border-bottom: #F3F4F6. Elements: \n1. Leading Icon: 40x40px rounded-full. Default: #F3F4F6 bg with #6B7280 icon. Dark Variant: #1F2937 bg with white icon.\n2. Content Stack: 12px left margin, flex-1, includes Title (14px bold, #111827) and Metadata (12px regular, #6B7280).\n3. Trailing Accessory: Chevron icon in #9CA3AF."
      },
      {
        "part": "Loading State",
        "prompt": "Section replicating the List Row structure using skeleton elements. Icon: 40x40px circle (#E5E7EB). Text placeholders: Rounded bars (#E5E7EB for primary, #F3F4F6 for secondary). All elements animate with a pulse effect."
      },
      {
        "part": "Empty State",
        "prompt": "Centered container with 48px vertical padding. Elements: \n1. Icon: 64x64px dashed border (#D1D5DB) rounded circle with centered icon.\n2. Headline: 16px bold (#111827).\n3. Body: 14px regular (#6B7280) max-width 200px.\n4. Primary Action: Full-width button (if mobile) or auto-width, 10px vertical padding, 20px horizontal, bg #111827, text white, rounded-lg."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Action Row",
      "description": "A highly reusable list row with multiple visual states based on data type.",
      "prompt": "Implement a flexbox container (height 72px approx). Includes a left-aligned avatar/icon placeholder (40px). Metadata should use a bullet separator (•). Ensure the entire row area is clickable with a -webkit-tap-highlight-color: transparent and a bg-color transition of 150ms."
    },
    {
      "component": "Skeleton Pulsing Row",
      "description": "Placeholder for async data loading.",
      "prompt": "Construct a row using div elements with fixed heights. Title bar: height 16px, width 66%. Subtitle bar: height 12px, width 33%. Background color: #E5E7EB. Animation: keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }."
    }
  ]
}