UI Design With Explosive Efficiency

kablUI Onboarding Prompt

**kablUI Specification: A Compact UI Notation**

## Introduction
kablUI is a structured yet highly compact notation for defining user interfaces, optimized for LLM-based workflows. It minimizes token consumption while ensuring human readability and machine interpretability.

## Core Principles
- **Compactness**: Eliminates redundancy while preserving clarity.
- **Readability**: Balances brevity with human comprehension.
- **Versatility**: Supports a vast array of UI components.
- **AI Optimization**: Designed for efficient parsing by language models.
- **Modular & Extensible**: Accommodates future UI paradigms.

## Syntax Overview
kablUI uses structured shorthand notation to define UI components efficiently. Example:
\`\`\`
@APP[bg:gray-900]
  @SB[w:240 bg:gray-800]
    §PROJECTS
      +Project01
      -Project02
      -Project03
    §SEQUENCES
      +seq01
      -seq02
    §AI TOOLS
      -⚡Prompt
      -🎨Style
      -✓Consistency
  @MAIN
    @NAV[h:30 bg:gray-800]
      Project01 | seq01
      @TABS [Shots][Characters][References]
      @STATS "3 Seq | 30 Shots | 12 Done"
\`\`\`
- \`@\` denotes a UI block.
- \`§\` indicates a section header.
- \`+\` denotes a selected item, \`-\` an unselected item.
- \`[ ]\` represents UI elements.
- \`{ }\` is used for dynamic states.

## Comprehensive UI Element List

### Core Elements
Fundamental components used in most UIs:
- **Containers**: \`@APP\`, \`@MAIN\`, \`@SIDEBAR\`, \`@FOOTER\`, \`@SECTION\`, \`@CARD\`
- **Headers & Sections**: \`§Header\`, \`§Subsection\`
- **Navigation**: \`@NAV\`, \`@TABS\`, \`@BREADCRUMB\`, \`@MENU\`, \`@DROPDOWN\`
- **Buttons**: \`[Button]\`, \`[Button]{active}\`, \`[IconButton]\`
- **Forms**: \`[Input]\`, \`[Checkbox]\`, \`[Dropdown]\`, \`[Radio]\`, \`[Textarea]\`, \`[Form]\`
- **Text Elements**: \`[Label]\`, \`[Tooltip]\`, \`[Notification]\`, \`[Badge]\`
- **Lists**: \`[List]\`, \`[TaskList]\`, \`[TreeView]\`
- **Tables & Grids**: \`[Table]\`, \`[Grid]\`, \`[DataGrid]\`

### Extended Elements
Additional elements for richer interfaces:
- **Visual Components**: \`[Card]\`, \`[Modal]\`, \`[Progress]\`, \`[Slider]\`, \`[Stepper]\`, \`[Avatar]\`
- **Interactive Elements**: \`[Accordion]\`, \`[Collapse]\`, \`[Tag]\`, \`[Chip]\`, \`[Toggle]\`
- **Media & Files**: \`[Upload]\`, \`[Image]\`, \`[Video]\`, \`[Audio]\`, \`[Gallery]\`
- **Data Elements**: \`[Chart]\`, \`[Calendar]\`, \`[Metrics]\`, \`[Timeline]\`
- **Layout Elements**: \`[SplitView]\`, \`[TabView]\`, \`[Flex]\`, \`[Grid]\`

### Advanced Elements
Specialized elements for complex interactions:
- **Dashboards & Analytics**: \`[Dashboard]\`, \`[Widget]\`, \`[Panel]\`, \`[Report]\`, \`[AnalyticsView]\`, \`[DataTable]\`, \`[FilterDropdown]\`
- **Chart & Visualization Elements**: \`[BarChart]\`, \`[PieChart]\`, \`[LineChart]\`, \`[Heatmap]\`, \`[Gauge]\`, \`[DonutChart]\`, \`[RadarChart]\`, \`[SankeyDiagram]\`, \`[FunnelChart]\`
- **Timelines & Flows**: \`[Timeline]\`, \`[Kanban]\`, \`[Flowchart]\`, \`[GanttChart]\`
- **AI Integration**: \`[AI|Generate]\`, \`[AI|Enhance]\`, \`[AI|AutoSuggest]\`
- **Versioning & History**: \`[Version]\`, \`[History]\`, \`[DiffViewer]\`
- **Collaboration & Comments**: \`[Comment]\`, \`[Annotations]\`, \`[ReviewPanel]\`
- **Maps & Geospatial**: \`[Map]\`, \`[GeoLocation]\`, \`[Heatmap]\`
- **Notifications & Alerts**: \`[Snackbar]\`, \`[Toast]\`, \`[AlertDialog]\`
- **Access Control**: \`[Login]\`, \`[UserProfile]\`, \`[Permissions]\`
- **Real-Time Data & Monitoring**: \`[LiveMetrics]\`, \`[LogStream]\`, \`[RealTimeChart]\`, \`[MonitoringPanel]\`

## Example UI Definition
\`\`\`
@APP[bg:gray-900]
  @SB[w:240 bg:gray-800]
    §PROJECTS
      +Project01
      -Project02
    §SEQUENCES
      +seq01
      -seq02
  @MAIN
    @NAV[h:30 bg:gray-800]
      Project01 | seq01
      @TABS [Shots][Characters][References]
    @TIMELINE
      @CARD[w:40] "seq01_sh001"[blue] "COMPLETE"[green]
      @CARD[w:40] "seq01_sh002"[blue] "IN PROGRESS"[yellow]
    @PREVIEW
      @VIDEO[aspect:16/9]
      @CONTROLS ⏮️ ▶️ ⏭️ 🔊
\`\`\`
This defines a structured UI with a sidebar, navigation bar, timeline, and preview area.

## Conclusion
kablUI provides an ultra-compact, AI-friendly notation for defining UIs with minimal token overhead. Its structured, extensible format ensures adaptability while optimizing efficiency for LLM-based design workflows.