create-catalog-item

Installation
SKILL.md

Create CatalogItem

Goal

To correctly implement a GenUI CatalogItem based on a provided json_schema_builder Schema, including its corresponding data class, CatalogItem instance, and Widget class. This ensures the AI model can properly generate and interact with the UI component.

Instructions

When tasked with creating a CatalogItem from a Schema, follow these steps:

  1. Create the Data Class:

    • Name it _<SchemaName>Data (e.g., if schema is myCardSchema, data class is _MyCardData).
    • Add final fields for each property defined in the schema.
    • Create a factory _<SchemaName>Data.fromJson(Map<String, Object?> json) method.
    • Use a try-catch block to parse the properties and return a new instance.
    • Cast each property from the json map to its expected type, e.g., title: json['title'] as String, or action: json['action'] as JsonMap?,.
    • Throw an Exception('Invalid JSON for _<SchemaName>Data') in the catch block if an error occurs.
  2. Create the CatalogItem Instance:

    • Name it identical to the schema name but without the "Schema" suffix (e.g., myCard for myCardSchema).
    • Declare as a final CatalogItem.
Related skills
Installs
22
Repository
flutter/genui
GitHub Stars
1.6K
First Seen
Apr 17, 2026