3.3K skills · sorted by relevance
Connect json-render interfaces to XState Store for state management. The skill shows how to adapt an atom, a container holding application state, so json-render reads and writes through it.
Build multi-page Next.js applications from JSON specifications. This skill guides route setup, shared layouts, page metadata, and server-side rendering, which prepares pages on the server, with optional data loading before display.
Helps connect json-render to a writable Jotai atom, a unit that holds application state. Covers adapter setup and sharing a Jotai store so json-render and React components read and update the same values.
Turn JSON layout definitions into SVG or PNG images with Satori. Use this skill to create social sharing previews and cards, assemble standard layout and text components, or define custom components for image specifications.
Build interactive terminal interfaces from JSON specifications with @json-render/ink. The skill covers standard and custom components, input handling, state connections, conditional display, and progressively rendering specifications generated by AI.
Turn JSON timelines into Remotion video compositions with titles, images, text overlays, and animated statistics. The skill covers playback setup, reusable video components, transitions, effects, and adding custom clips to a video catalog.
Build Vue 3 interfaces from JSON specifications, including AI-generated layouts. The skill covers component registration, named content areas, synchronized form values, conditional visibility, validation, actions, and connections to external state management.
Build 3D scenes in React from JSON specifications using json-render. The skill covers shapes, lighting, model loading, materials, cameras, and view controls, plus connecting component definitions to their rendering implementations.
Add and troubleshoot the json-render inspection panel in SolidJS applications. This skill covers panel setup for examining specifications, editing state, reviewing action and stream timelines, browsing component catalogs, and selecting page elements for inspection.
Watch for new Gmail messages and stream them as NDJSON, a format with one JSON record per line. Filter messages by label, adjust retrieval settings, or save each message to a separate JSON file.
Extract fields, filter records, and reshape JSON from API responses, configuration files, or logs using Crush’s built-in jq. Get help writing and debugging transformations, constructing new JSON, and formatting output for other commands.
Add and troubleshoot a developer panel in Svelte 5 json-render apps. Inspect JSON screen definitions, edit application state, review action and streaming timelines, browse component catalogs, and select elements directly from the page.
Turn JSON specifications into React interfaces using a catalog of available components. This skill helps connect component implementations, shared data, form inputs, conditional display, and user actions to render interactive screens, including AI-generated designs.
Build native mobile interfaces from JSON specifications with @json-render/react-native. Use standard or custom components, connect form inputs to application state, and update visible content in response to taps and other interactions.
Summarize local CodexBar cost logs for Codex or Claude by model. View a representative model from the latest daily entry or a full cost breakdown, with results available as text or JSON.
Create and audit JSON-LD, structured data that describes page content to search engines. Check JSON syntax, schema types, and required fields for articles, products, FAQs, and breadcrumbs, then guide validation for enhanced search results.
Add and configure an inspection panel for Vue json-render apps. This skill guides setup and troubleshooting so you can inspect UI definitions, edit state, review action and stream timelines, browse catalogs, and select page elements.
Create HTML or plain-text emails from JSON specifications with React Email. This skill guides reusable email components, conditional content, server-side rendering, and browser previews for transactional messages such as signup notifications and marketing emails.
Connect json-render to Redux or Redux Toolkit so UI state reads and writes use a Redux store. The skill explains how to select the relevant state and dispatch actions that replace it when updates occur.
Turn JSON screen descriptions into Svelte 5 interfaces. This skill covers component catalogs, registration, shared state, form bindings that keep inputs and data synchronized, conditional display, and streaming AI-generated interfaces as they arrive.
Set up an inspection panel in React json-render apps to examine UI definitions, edit state, and review action and stream timelines. The skill also covers opening or toggling the panel and recording events from React code.
Helps connect json-render to a Zustand store, where application values are managed. Covers sharing the entire store or selecting a nested portion, with configurable update behavior for the selected state.
Define the structure and available components for AI-generated JSON screens or videos. Build generation prompts, process incremental updates, connect values to application state, and validate or repair definitions before passing them to a renderer.
Build TanStack Start pages from JSON specifications. This skill connects URL routes, shared layouts, server-side data loading, page metadata such as titles, and client navigation, including loading, error, and missing-page displays.