Directives

A ready-made collection of seven directives for json-render that handle the repetitive stuff: formatting dates and currency with $format, basic arithmetic with $math, string operations like $concat and $truncate, and pluralization. The i18n factory is there if you need localization. They compose naturally, so you can nest a $math operation inside a $format directive without ceremony. Wire them into your renderer's provider or spread the array if you need to add custom ones. Saves you from writing the same defineDirective boilerplate every time you need to format a price or count array items in your specs.

skills.sh installs: 8.1K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill directives --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/directives

Pre-built custom directives for @json-render/core. Drop them into your catalog and renderer to add formatting, math, string manipulation, and i18n.

Quick Start

import { standardDirectives } from '@json-render/directives';

// Wire into prompt generation
const prompt = catalog.prompt({ directives: standardDirectives });

// Wire into the renderer (React example)
import { JSONUIProvider, Renderer } from '@json-render/react';

<JSONUIProvider registry={registry} directives={standardDirectives}>
  <Renderer spec={spec} registry={registry} />
</JSONUIProvider>

To add factory directives like createI18nDirective, spread the array:

import { standardDirectives, createI18nDirective } from '@json-render/directives';

const directives = [...standardDirectives, createI18nDirective(config)];

Defining Custom Directives

Use defineDirective from @json-render/core:

import { defineDirective, resolvePropValue } from '@json-render/core';
import { z } from 'zod';

SKILL.md on GitHub

Details

Repository: github.com/vercel-labs/json-render
Categories: Code Review & Quality, Cloud & Infrastructure
First seen: Jul 14, 2026