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.