skills.rest
float-ritual-stack
float-ritual-stackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

designing-json-render-catalogs

Design and maintain json-render catalogs for AI-driven UI rendering in Floatty.

Updated Dec 19, 2025
Search Tags:#ai#catalog#component#design-patterns#renderer#json-render
One-click install
npx skills add https://github.com/float-ritual-stack/floatty --skill designing-json-render-catalogs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-json-render-catalogs
Source: https://github.com/float-ritual-stack/floatty/tree/main/apps/outline-explorer/.claude/skills/designing-json-render-catalogs
Command: npx skills add https://github.com/float-ritual-stack/floatty --skill designing-json-render-catalogs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and maintain json-render catalogs to enable AI-driven UI rendering in the Floatty ecosystem.

Core Features & Use Cases

  • Define semantic, structural, and inline component layers to guide AI rendering with predictable token usage.
  • Resolve renderer gaps like "No renderer for component type" by extending catalogs and aligning with agent contracts.
  • Manage shared vs local catalogs across render-door and outline-explorer to reduce drift and ensure consistent UI.

Quick Start

Create or update a json-render catalog following the three-layer pattern and wire it to the agent contract (catalog.prompt / catalog.jsonSchema / validateSpec) for the new component type.

Frequently Asked Questions about designing-json-render-catalogs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix the "No renderer for component type" warning in AI UI rendering?▼

Fix the "No renderer for component type" warning by extending your json-render catalog with an explicit entry and prop schema for the missing component, then wiring it to the agent contract to ensure AI-driven UI renders predictably.

How do I design a json-render catalog for AI UI components?▼

Design a json-render catalog by defining semantic, structural, and inline component layers that guide AI rendering with predictable token usage, then wire it to the agent contract using catalog.prompt, catalog.jsonSchema, and validateSpec.

When do I need to use shared vs local json-render catalogs?▼

Use shared vs local json-render catalogs to manage UI consistency across render-door and outline-explorer contexts, reducing drift by delineating which component types belong in shared catalogs versus local ones.

Why do my AI UI render outputs show missing components after catalog updates?▼

AI UI render outputs show missing components after catalog updates because artifact rebuilds are required to keep render outputs in sync with the updated catalog entries and prop schemas.

What are the component layers for building json-render catalogs?▼

The component layers for building json-render catalogs are semantic, structural, and inline layers, which together guide AI rendering with predictable token usage and explicit prop schemas.

Does AI UI rendering require agent contracts for catalog wiring?▼

AI UI rendering requires agent contracts for catalog wiring to validate component specs, enforce explicit prop schemas, and ensure the catalog prompt and jsonSchema align with the renderer across render-door and outline-explorer contexts.

Related Skills

Explore More Software Engineering Skills→
inpinitiinpiniti

core

Define schemas, catalogs, and AI prompts for json-render workflows.

Community
Advanced
StormHubStormHub

json-render

Generate and render UIs from JSON specs into React and Next.js apps.

Community
Advanced
citypaulcitypaul
710

react-testing

Validate React components, hooks, and context with React Testing Library.

Community
Intermediate
ashcabula30ashcabula30

react-native

Render JSON specs as native React Native UIs with data binding and actions.

Community
Advanced