skills.rest
hasnaxyz
hasnaxyzOFFICIAL
Explore all skills by this author →
GitHub

directives

Add reusable custom directives for formatting, math, and localization in json-render catalogs.

Updated Jun 24, 2026
Search Tags:#formatting#localization#i18n#math#directives#json-render#string-manipulation
One-click install
npx skills add https://github.com/hasnaxyz/open-render --skill directives-hasnaxyz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: directives
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/directives
Command: npx skills add https://github.com/hasnaxyz/open-render --skill directives-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you add reusable data transformation logic to json-render catalogs and renderers without rebuilding the same formatting, math, and localization behavior in every project.

Core Features & Use Cases

  • Pre-built directives: Use ready-made helpers for formatting dates and numbers, doing arithmetic, truncating text, joining arrays, pluralizing labels, and translating strings.
  • Custom directive authoring: Define your own directive logic when your catalog needs specialized behavior that still composes cleanly with existing expressions.
  • Cross-renderer wiring: Apply the same directive set during prompt generation and in React, Vue, Svelte, or Solid rendering flows.
  • Use case: Build a multilingual dashboard where prices, counts, and labels are generated from structured data and rendered consistently across platforms.

Quick Start

Add the standard directives to your catalog prompt and renderer so your generated specs can format values, perform calculations, and translate text consistently.

Frequently Asked Questions about directives

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

FAQPage Schema
How do I format numbers and dates consistently in json-render catalogs?▼

You format numbers and dates in json-render catalogs by applying pre-built directives that handle data transformation, ensuring consistent output without rebuilding formatting logic for every project.

Can I add custom string manipulation and math operations to json-render?▼

Yes, you can add custom string manipulation and math operations using the defineDirective implementation, allowing specialized behavior that composes cleanly with existing catalog expressions.

Does the json-render directives Skill work with React, Vue, Svelte, and Solid?▼

Yes, the directives Skill supports cross-renderer wiring, allowing you to apply the same directive set during prompt generation and rendering flows across React, Vue, Svelte, and Solid.

What is the best way to localize and translate strings in a multilingual dashboard?▼

The best way to localize strings in a multilingual dashboard is using directive behavior with i18n factory integration, translating labels and formatting prices consistently from structured data.

When should I create custom directives instead of using built-in helpers?▼

You should create custom directives when your catalog needs specialized behavior that built-in helpers for truncating text, joining arrays, or pluralizing labels cannot handle cleanly.

Related Skills

Explore More Software Engineering Skills→
sbalagan22sbalagan22

threejs-fundamentals

Set up Three.js scenes with camera, renderer, and Object3D hierarchies.

Community
Intermediate
autohandaiautohandai
10

react-component-architecture

Refactor React components using compound components, render props, and custom hooks.

Official
Advanced
PMDevSolutionsPMDevSolutions
16

wordpress-internationalization

Wrap WordPress strings with translation functions and generate POT files.

Official
Advanced
pch007pch007
1

directives

Implement reusable custom directives for json-render to standardize formatting, math, and i18n.

Community
Intermediate