gskinnerteam/flutter-hatcha-app/genui

Claude Code and agent skill by gskinnerteam/flutter-hatcha-app

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Core GenUI framework for dynamic AI-driven UIs. Use when: working with Conversation, SurfaceController, Transport, Surface, SurfaceHost, Catalog, CatalogItem, CatalogItemContext, DataModel, DataContext, DataPath, A2uiSchemas, ClientFunction, PromptBuilder, A2UiClientCapabilities, data binding, A2UI message protocol, ChatMessage, UiEvent, or SurfaceDefinition.

Install

npx vskill@latest install gskinnerteam/flutter-hatcha-app/genui

SKILL.md

GenUI Package — API Reference

The genui package (v0.9.0) is the core framework for building Flutter applications with dynamically generated user interfaces powered by AI. The UI is not predefined — it is constructed in real-time through a conversation cycle between the app, an AI model, and the user. Implements the A2UI protocol v0.9.

When to Use

  • Working with Conversation lifecycle (send requests, listen for surfaces/text/errors)
  • Rendering dynamic UI with Surface widget
  • Implementing a custom Transport
  • Subscribing to or updating DataModel / DataContext paths
  • Working with A2uiSchemas reference types
  • Using CatalogItemContext properties (data, dataContext, buildChild, dispatchEvent)
  • Processing A2uiMessage protocol messages (CreateSurface, UpdateComponents, UpdateDataModel, DeleteSurface)
  • Working with ChatMessage or MessagePart types
  • Defining custom ClientFunction implementations
  • Building prompts with PromptBuilder
  • Generating A2UiClientCapabilities from catalogs
Project conventions for creating catalogue item _files_ (5-step convention, naming, example data rules, three-tier pattern) live in the catalogue-items skill. This skill covers the _package API_.

Core Architecture

┌─────────────────────────────────────┐
│ Application (Flutter Widgets) │
├─────────────────────────────────────┤
│ Facade Layer │
│ - Conversation │
│ - PromptBuilder │
│ - Surface (Widget) │
├─────────────────────────────────────┤
│ Engine Layer │
│ - SurfaceController │
│ - SurfaceRegistry │
│ - DataModelStore │
├─────────────────────────────────────┤
│ Model Layer │
│ - Catalog, CatalogItem │
│ - DataModel, DataContext │
│ - A2uiMessage types │
│ - ChatMessage types │
│ - A2UiClientCapabilities │
├─────────────────────────────────────┤
│ Transport Layer │
│ - Transport (interface) │
│ - A2uiTransportAdapter │
│ - A2uiParserTransformer │
├─────────────────────────────────────┤
│ Interfaces │
│ - SurfaceHost │
│ - SurfaceContext │
│ - A2uiMessageSink │
└─────────────────────────────────────┘
Interaction Flow
User
│ (1) sendRequest(ChatMessage)
▼
Conversation ──► Transport (A2A / Direct AI)
│ │
│ (2) incomingMessages (Stream<A2uiMessage>)
│ incomingText (Stream<String>)
▼ │
SurfaceController ◄───┘
│ (3) surfaceUpdates (Stream<SurfaceUpdate>)
▼
Surface (Flutter Widget)
│ (4) Catalog widget builders render
│ Flutter widgets from Components
▼
User interactions → UiEvent → back to Transport

Quick Reference — Top-Level Classes

Conversation

High-level facade for managing a GenUI conversation. Orchestrates the SurfaceController and Transport.

dart
Conversation({
required SurfaceController controller,
required Transport transport,
})
Property / MethodTypePurpose
controllerSurfaceControllerManages surfaces
transportTransportAI communication
eventsStream<ConversationEvent>Event stream (surfaces, text, errors)
stateValueListenable<ConversationState>Current conversation state
sendRequest(message)Future<void>Send user message to AI
dispose()voidClean up resources
ConversationEvent (Sealed)
EventKey FieldsPurpose
ConversationSurfaceAddedsurfaceId, definitionNew surface created
ConversationComponentsUpdatedsurfaceId, definitionComponents updated
ConversationSurfaceRemovedsurfaceIdSurface deleted
ConversationContentReceivedtextText response from AI
ConversationWaiting—Waiting for response
ConversationErrorerror, stackTrace?Error occurred
ConversationState
dart
class ConversationState {
final List<String> surfaces; // Active surface IDs
final String latestText; // Latest text received
final bool isWaiting; // Waiting for response
}

Surface

Flutter widget that dynamically renders a UI from a SurfaceDefinition.

dart
Surface({
required SurfaceHost host,
required String surfaceId,
WidgetBuilder? defaultBuilder,
})
  • Listens to host for updates to surfaceId
  • Recursively builds Flutter widgets from Component definitions via the Catalog
  • Dispatches user interactions back to the host

Transport (Interface)

Abstract interface for AI communication. Implement this to connect to a custom backend.

dart
abstract interface class Transport {
Stream<String> get incomingText;
Stream<A2uiMessage> get incomingMessages;
Future<void> sendRequest(ChatMessage message);
void dispose();
}

A2uiTransportAdapter

Push-based transport for imperative integration. Wraps A2uiParserTransformer to parse streaming text into A2UI messages.

dart
A2uiTransportAdapter({ManualSendCallback? onSend})
Method / PropertyTypePurpose
addChunk(text)voidFeed text from LLM
addMessage(msg)voidInject raw A2uiMessage
incomingTextStream<String>Sanitized text for chat UI
incomingMessagesStream<A2uiMessage>Parsed A2UI messages
sendRequest(msg)Future<void>Delegates to onSend callback

SurfaceController

Runtime controller for the GenUI system. Manages surfaces, data models, and message routing.

dart
SurfaceController({
required Iterable<Catalog> catalogs,
Duration pendingUpdateTimeout = const Duration(minutes: 1),
})
Property / MethodTypePurpose
catalogsIterable<Catalog>Available component catalogs
surfaceUpdatesStream<SurfaceUpdate>Surface lifecycle events
onSubmitStream<ChatMessage>Messages to submit to AI
activeSurfaceIdsIterable<String>Currently active surfaces
clientCapabilitiesA2UiClientCapabilitiesAuto-generated from catalogs
handleMessage(msg)voidProcess an A2uiMessage
contextFor(surfaceId)SurfaceContextGet context for a surface
dispose()voidClean up

Implements both SurfaceHost and A2uiMessageSink.


PromptBuilder

Builds system prompts from catalogs and fragments for AI communication.

dart
// Chat-style: creates new surfaces per response, no deletions
PromptBuilder.chat({
required Catalog catalog,
Iterable<String> systemPromptFragments = const [],
String importancePrefix = 'IMPORTANT: ',
JsonMap? clientDataModel,
})
// Custom operations control
PromptBuilder.custom({
required Catalog catalog,
required SurfaceOperations allowedOperations,
Iterable<String> systemPromptFragments = const [],
...
})
PromptFragments

Static utility methods for common prompt fragments:

MethodPurpose
PromptFragments.acknowledgeUser()Require AI to acknowledge user message
PromptFragments.requireAtLeastOneSubmitElement()Require submit elements
PromptFragments.currentDate()Inject current date
PromptFragments.uiGenerationRestriction()Restrict to JSON text blocks

A2UiClientCapabilities

Describes the client's UI rendering capabilities to the server.

dart
A2UiClientCapabilities({
required List<String> supportedCatalogIds,
List<JsonMap>? inlineCatalogs,
})
// From catalogs:
factory A2UiClientCapabilities.fromCatalogs(
Iterable<Catalog> catalogs, {
InlineCatalogHandling inlineHandling = InlineCatalogHandling.missingIds,
})
InlineCatalogHandlingBehavior
noneNever inline; throw if catalog has no ID
missingIdsInline only catalogs without a catalogId
allInline all catalogs

SurfaceUpdate (Sealed)

Events broadcast when surfaces change.

dart
sealed class SurfaceUpdate {
final String surfaceId;
}
final class SurfaceAdded extends SurfaceUpdate {
final SurfaceDefinition definition;
}
final class ComponentsUpdated extends SurfaceUpdate {
final SurfaceDefinition definition;
}
final class SurfaceRemoved extends SurfaceUpdate {}

Reference Docs

TopicFileKey Classes
Data binding & A2uiSchemasdata-binding.mdDataModel, DataContext, DataPath, A2uiSchemas, DataContextExtensions
Catalog & widget buildingcatalog-api.mdCatalog, CatalogItem, CatalogItemContext, BasicCatalog
A2UI protocol & chat messagesmessages.mdA2uiMessage, ChatMessage, MessagePart
UI models, events & toolsui-models.mdSurfaceDefinition, Component, SurfaceUpdate, UiEvent, SurfaceController

Security

  • Security scanPassed, 95 of 100Pattern checks on the skill's files.
  • Model reviewPassed

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

Repository stars
66
Repository forks
7
7-day trend score
21

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/gskinnerteam/flutter-hatcha-app/genui/badge)](https://verified-skill.com/skills/gskinnerteam/flutter-hatcha-app/genui)

Something wrong with this skill or its page? Tell us.