gh-trabian-fluxwing-skills/skills/fluxwing-screenshot-importer/docs/screenshot-import-examples.md

Screenshot Import Complete Examples

This document contains complete end-to-end examples of screenshot-to-uxscii conversion, showing input data, generated files, and expected outputs.

Example 1: Simple Button Component

Input: Vision Analysis Data

{
  "id": "submit-button",
  "type": "button",
  "category": "atomic",
  "visualProperties": {
    "width": 20,
    "height": 3,
    "borderStyle": "rounded",
    "textContent": "Submit"
  },
  "states": ["default", "hover", "focus", "disabled"],
  "accessibility": {
    "role": "button",
    "label": "Submit form"
  }
}

Output: submit-button.uxm

{
  "id": "submit-button",
  "type": "button",
  "version": "1.0.0",
  "metadata": {
    "name": "Submit Button",
    "description": "An interactive button component for user actions. Submit form",
    "author": "Fluxwing Screenshot Import",
    "created": "2025-10-13T12:00:00Z",
    "modified": "2025-10-13T12:00:00Z",
    "tags": ["button", "imported", "screenshot-generated", "utility", "interactive"],
    "category": "utility"
  },
  "props": {
    "text": "Submit",
    "variant": "secondary",
    "size": "small"
  },
  "behavior": {
    "states": [
      {
        "name": "default",
        "properties": {
          "border": "rounded",
          "background": "filled",
          "textColor": "default"
        }
      },
      {
        "name": "hover",
        "properties": {
          "border": "heavy",
          "background": "filled",
          "textColor": "default"
        }
      },
      {
        "name": "focus",
        "properties": {
          "border": "heavy",
          "background": "filled",
          "textColor": "default"
        }
      },
      {
        "name": "disabled",
        "properties": {
          "border": "dashed",
          "background": "filled",
          "textColor": "default",
          "opacity": 0.5,
          "cursor": "not-allowed"
        }
      }
    ],
    "interactions": ["click", "keyboard"],
    "accessibility": {
      "role": "button",
      "focusable": true,
      "keyboardSupport": ["Enter", "Space"],
      "ariaLabel": "Submit form"
    }
  },
  "layout": {
    "display": "inline-block",
    "positioning": "static",
    "spacing": {
      "padding": { "x": 2, "y": 1 },
      "margin": { "x": 0, "y": 0 }
    },
    "sizing": {
      "minWidth": 20,
      "height": 3
    }
  },
  "ascii": {
    "templateFile": "submit-button.md",
    "width": 20,
    "height": 3,
    "variables": [
      {
        "name": "text",
        "type": "string",
        "required": true,
        "default": "Submit",
        "description": "button label text"
      },
      {
        "name": "variant",
        "type": "string",
        "required": false,
        "default": "primary",
        "description": "Button style variant (primary, secondary, danger)"
      },
      {
        "name": "size",
        "type": "string",
        "required": false,
        "default": "medium",
        "description": "Component size (small, medium, large)"
      }
    ]
  }
}

Output: submit-button.md

# Submit Button

An interactive button component for user actions. Submit form

## Default State

╭──────────────────╮ │▓▓▓▓▓▓Submit▓▓▓▓▓▓│ ╰──────────────────╯

## Hover State

┏━━━━━━━━━━━━━━━━━━┓ ┃████████Submit████┃ ┗━━━━━━━━━━━━━━━━━━┛

## Focus State

┏━━━━━━━━━━━━━━━━━━┓ ┃▓▓▓▓▓Submit ✨▓▓▓▓┃ ┗━━━━━━━━━━━━━━━━━━┛

## Disabled State

╭ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │ Submit │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ╯

## Variables

- `text` (string, required): button label text
  - Default: "Submit"
  - Example: "Submit Form"

- `variant` (string, optional): Button style variant (primary, secondary, danger)
  - Default: "primary"

- `size` (string, optional): Component size (small, medium, large)
  - Default: "medium"

## Accessibility

- **Role**: button
- **Focusable**: Yes
- **Keyboard Support**: Enter, Space
- **ARIA Label**: Submit form

## Usage Examples

╭──────────────────╮ │▓▓▓Submit Form▓▓▓▓│ ╰──────────────────╯

---
*Generated by Fluxwing Screenshot Import*

---

Example 2: Email Input Component

Input: Vision Analysis Data

{
  "id": "email-input",
  "type": "input",
  "category": "atomic",
  "visualProperties": {
    "width": 40,
    "height": 3,
    "borderStyle": "light",
    "textContent": "Email",
    "placeholder": "Enter your email"
  },
  "states": ["default", "focus", "error", "disabled"],
  "accessibility": {
    "role": "textbox",
    "label": "Email address"
  }
}

Output: email-input.uxm (abbreviated)

{
  "id": "email-input",
  "type": "input",
  "version": "1.0.0",
  "metadata": {
    "name": "Email Input",
    "description": "A text input field for user data entry. Email address",
    "category": "input"
  },
  "props": {
    "text": "Email",
    "placeholder": "Enter your email",
    "type": "email",
    "size": "large",
    "maxLength": 32
  },
  "ascii": {
    "templateFile": "email-input.md",
    "width": 40,
    "height": 3,
    "variables": [
      {
        "name": "text",
        "type": "string",
        "required": true,
        "default": "Email",
        "description": "input label text"
      },
      {
        "name": "placeholder",
        "type": "string",
        "required": false,
        "default": "Enter your email",
        "description": "Placeholder text when empty"
      },
      {
        "name": "value",
        "type": "string",
        "required": false,
        "default": "",
        "description": "Current value"
      }
    ]
  }
}

Output: email-input.md

# Email Input

A text input field for user data entry. Email address

## Default State

┌──────────────────────────────────────┐ │ Email │ │ Enter your email │ └──────────────────────────────────────┘

## Focus State

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Email │┃ ┃ john.doe@example.com ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

## Error State

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ⚠️ Email ┃ ┃ invalid@email ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ❌ Please enter valid email address

## Disabled State

┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ Email │ │ ────────────────────── │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘

## Variables

- `text` (string, required): input label text
  - Default: "Email"

- `placeholder` (string, optional): Placeholder text when empty
  - Default: "Enter your email"

- `value` (string, optional): Current value
  - Default: ""

## Accessibility

- **Role**: textbox
- **Focusable**: Yes
- **Keyboard Support**: Tab, Escape
- **ARIA Label**: Email address

---
*Generated by Fluxwing Screenshot Import*

---

Example 3: Multi-Component Login Form

Input: Vision Analysis Data

{
  "screen": {
    "type": "login-form",
    "name": "Login Screen",
    "description": "User authentication screen with email/password inputs",
    "layout": "vertical-center"
  },
  "components": [
    {
      "id": "email-input",
      "type": "input",
      "category": "atomic",
      "visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Email", "placeholder": "Enter your email" },
      "states": ["default", "focus", "error"],
      "accessibility": { "role": "textbox", "label": "Email address" }
    },
    {
      "id": "password-input",
      "type": "input",
      "category": "atomic",
      "visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Password", "placeholder": "Enter your password" },
      "states": ["default", "focus", "error"],
      "accessibility": { "role": "textbox", "label": "Password" }
    },
    {
      "id": "submit-button",
      "type": "button",
      "category": "atomic",
      "visualProperties": { "width": 20, "height": 3, "borderStyle": "rounded", "textContent": "Sign In" },
      "states": ["default", "hover", "disabled"],
      "accessibility": { "role": "button", "label": "Sign in to account" }
    },
    {
      "id": "login-form",
      "type": "form",
      "category": "composite",
      "visualProperties": { "width": 50, "height": 20, "borderStyle": "rounded", "textContent": "Sign In" },
      "states": ["default"],
      "accessibility": { "role": "form", "label": "Login form" }
    }
  ],
  "composition": {
    "atomicComponents": ["email-input", "password-input", "submit-button"],
    "compositeComponents": ["login-form"],
    "screenComponents": ["login-screen"]
  }
}

Files Generated

1. Atomic Components:

   • ./fluxwing/components/email-input.uxm
   • ./fluxwing/components/email-input.md
   • ./fluxwing/components/password-input.uxm
   • ./fluxwing/components/password-input.md
   • ./fluxwing/components/submit-button.uxm
   • ./fluxwing/components/submit-button.md

2. Composite Component:

   • ./fluxwing/components/login-form.uxm
   • ./fluxwing/components/login-form.md

3. Screen:

   • ./fluxwing/screens/login-screen.uxm
   • ./fluxwing/screens/login-screen.md
   • ./fluxwing/screens/login-screen.rendered.md

Output: login-form.uxm (composite)

{
  "id": "login-form",
  "type": "form",
  "version": "1.0.0",
  "metadata": {
    "name": "Login Form",
    "description": "A form container for collecting user input. Login form",
    "category": "utility"
  },
  "props": {
    "title": "Sign In",
    "components": [
      { "id": "email-input", "slot": "field-1" },
      { "id": "password-input", "slot": "field-2" },
      { "id": "submit-button", "slot": "action" }
    ]
  },
  "ascii": {
    "templateFile": "login-form.md",
    "width": 50,
    "height": 20,
    "variables": [
      {
        "name": "title",
        "type": "string",
        "required": true,
        "default": "Sign In",
        "description": "Form title"
      }
    ]
  }
}

Output: login-form.md (composite)

# Login Form

A form container for collecting user input. Login form

## Default State

╭────────────────────────────────────────────────╮ │ Sign In │ ├────────────────────────────────────────────────┤ │ │ │ {{component:email-input}} │ │ │ │ {{component:password-input}} │ │ │ │ {{component:submit-button}} │ │ │ ╰────────────────────────────────────────────────╯

## Variables

- `title` (string, required): Form title
  - Default: "Sign In"

## Accessibility

- **Role**: form
- **Focusable**: No
- **ARIA Label**: Login form

---
*Generated by Fluxwing Screenshot Import*

Output: login-screen.rendered.md

# Login Screen

User authentication screen with email/password inputs

## Rendered Example

╭────────────────────────────────────────────────╮ │ Sign In │ ├────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────┐ │ │ │ Email │ │ │ │ john.doe@example.com │ │ │ └──────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ Password │ │ │ │ •••••••• │ │ │ └──────────────────────────────────────┘ │ │ │ │ ╭──────────────────╮ │ │ │▓▓▓▓Sign In▓▓▓▓▓▓▓│ │ │ ╰──────────────────╯ │ │ │ ╰────────────────────────────────────────────────╯

**Example Data:**
- Email: john.doe@example.com
- Password: ••••••••
- Button: Sign In

**Actions:**
- Submit form → authenticate user
- Focus management → email → password → button

## Components Used

- `email-input` - Email Input (input)
- `password-input` - Password Input (input)
- `submit-button` - Submit Button (button)
- `login-form` - Login Form (form)

---
*Generated by Fluxwing Screenshot Import*

---

Example 4: Checkbox Component

Input: Vision Analysis Data

{
  "id": "remember-me-checkbox",
  "type": "checkbox",
  "category": "atomic",
  "visualProperties": {
    "width": 20,
    "height": 1,
    "borderStyle": "none",
    "textContent": "Remember me"
  },
  "states": ["default", "checked", "disabled"],
  "accessibility": {
    "role": "checkbox",
    "label": "Remember login credentials"
  }
}

Output: remember-me-checkbox.md

# Remember Me Checkbox

A checkbox input for boolean selection. Remember login credentials

## Default State

[ ] Remember me

## Checked State

[✓] Remember me

## Disabled State

[─] Remember me

## Variables

- `text` (string, required): checkbox label text
  - Default: "Remember me"

## Accessibility

- **Role**: checkbox
- **Focusable**: Yes
- **Keyboard Support**: Space
- **ARIA Label**: Remember login credentials

---
*Generated by Fluxwing Screenshot Import*

---

Example 5: Badge Component

Input: Vision Analysis Data

{
  "id": "new-badge",
  "type": "badge",
  "category": "atomic",
  "visualProperties": {
    "width": 8,
    "height": 1,
    "borderStyle": "none",
    "textContent": "New"
  },
  "states": ["default"],
  "accessibility": {
    "role": "status",
    "label": "New item indicator"
  }
}

Output: new-badge.md

# New Badge

A small badge component for labels or counts. New item indicator

## Default State

▓ New ▓

## Variables

- `text` (string, required): badge label text
  - Default: "New"

## Accessibility

- **Role**: status
- **Focusable**: No
- **ARIA Label**: New item indicator

---
*Generated by Fluxwing Screenshot Import*

---

Usage Patterns

Pattern 1: Generate Single Atomic Component

const timestamp = new Date().toISOString();
const uxmData = generateAtomicUXM(visionComponentData, timestamp);
const mdContent = generateAtomicMD(visionComponentData, uxmData);
await saveAtomicComponent(componentId, uxmData, mdContent);

Pattern 2: Generate All Components from Screen

// 1. Generate atomics first
for (const atomicId of composition.atomicComponents) {
  const componentData = components.find(c => c.id === atomicId);
  await generateAtomicComponent(componentData);
}

// 2. Generate composites (can reference atomics)
for (const compositeId of composition.compositeComponents) {
  const componentData = components.find(c => c.id === compositeId);
  await generateCompositeComponent(componentData);
}

// 3. Generate screen (references everything)
await generateScreen(screenData, composition);

---

Reference

These examples demonstrate the complete screenshot-to-uxscii workflow:

1. Vision analysis produces structured JSON
2. Helper functions (see screenshot-import-helpers.md) transform data
3. ASCII generation (see screenshot-import-ascii.md) creates visual representations
4. File generation produces valid .uxm + .md pairs
5. Validation ensures quality and schema compliance

All generated files conform to:

• fluxwing/data/schema/uxm-component.schema.json - JSON Schema
• Quality standards documented in the schema