directives

Provide pre-built utility directives for json-render UI catalogs.

Updated Jun 24, 2026
One-click install
npx skills add https://github.com/hasna/render --skill directives-hasna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: directives
Source: https://github.com/hasna/render/tree/main/skills/directives
Command: npx skills add https://github.com/hasna/render --skill directives-hasna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the need to manually build common utility directives for json-render generative UI catalogs, reducing development overhead and ensuring consistent, predictable behavior for dynamic user interfaces across platforms.

Core Features & Use Cases

  • Pre-built Utility Directives: Includes out-of-the-box support for locale-aware value formatting, arithmetic operations, string concatenation, length counting, text truncation, pluralization, and array joining for common UI logic.
  • Internationalization Support: Provides a built-in $t directive for multi-language UIs, with configurable locale, fallback locale, and message interpolation for global applications.
  • Custom Directive Extension: Offers a clear defineDirective API and guidelines for building project-specific directives that integrate seamlessly with the json-render ecosystem and all supported renderers.
  • Use Case: A cross-platform e-commerce dashboard that displays currency metrics, calculates cart totals, and supports English and Spanish can use these pre-built directives instead of writing custom logic for each common operation.

Quick Start

Use the directives skill to add pre-built formatting, math, and i18n capabilities to your json-render catalog and renderer.

Frequently Asked Questions about directives

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

FAQPage Schema
How do I add locale-aware formatting and internationalization to json-render UIs?▼

To add locale-aware formatting and internationalization to json-render UIs, you can use pre-built directives that handle currency metrics, text truncation, pluralization, and a $t directive for multi-language message interpolation without writing custom logic.

Does the directives Skill work with React, Vue, Svelte, and Solid renderers?▼

Yes, the directives Skill works with React, Vue, Svelte, and Solid renderers. It provides pre-built, composable directives that integrate seamlessly with the json-render core to support cross-platform web and mobile application development workflows.

What is the best way to perform arithmetic operations and string manipulation in a generative UI catalog?▼

The best way to perform arithmetic operations and string manipulation in a generative UI catalog is using pre-built utility directives that handle cross-platform tasks like concatenation, length counting, and array joining, eliminating the need to manually build custom logic.

How do I create custom directives for a json-render ecosystem?▼

You can create custom directives for the json-render ecosystem using the defineDirective API. This allows you to build project-specific directives that integrate seamlessly with all supported renderers for dynamic user interfaces.

Can I configure fallback locales for multi-language dynamic user interfaces?▼

Yes, you can configure fallback locales for multi-language dynamic user interfaces. The built-in internationalization support includes configurable locale settings and message interpolation to ensure consistent behavior across global applications.

Why do I need pre-built directives for my cross-platform e-commerce dashboard?▼

You need pre-built directives for a cross-platform e-commerce dashboard to avoid manually implementing common utility logic. They provide out-of-the-box support for calculating cart totals, displaying currency metrics, and handling pluralization across platforms.