Claude skill

A ready-made Claude Code Agent Skill teaches Claude the opjsx syntax, so it writes correct &tag.class markup and ${…} interpolation in your project.

Install

Download the skill and drop it into a skills/ folder. Use project scope to share it with your team via the repo, or global scope for all your projects.

mkdir -p .claude/skills/opjsx
curl -fsSL https://zahinafsar.github.io/opjsx/skill/SKILL.md \
  -o .claude/skills/opjsx/SKILL.md

Or download SKILL.md and place it at .claude/skills/opjsx/SKILL.md. Restart Claude Code (or run /doctor) and Claude will load the skill automatically when a task involves opjsx.

What it contains

The skill is a single SKILL.md with YAML frontmatter (name, description) and a body covering:

• setup and the opjsx\…`` tagged-template usage,
• the full grammar — &tag elements, .class shorthand, attr"value" attributes with type inference, indentation nesting, and text children,
• ${…} interpolation for values, event handlers, .map() lists, and dynamic classes,
• step-by-step JSX → opjsx conversion rules,
• a complete worked example, plus rules of thumb and common mistakes.

Copy it manually

If you prefer, create .claude/skills/opjsx/SKILL.md and paste:

---
name: opjsx
description: >-
  Author React UI with the opjsx package's compact, token-efficient template
  syntax. Use when writing React components with opjsx, or when asked to convert
  JSX to opjsx. Covers the &tag.class / attr"value" / indented-children grammar
  and ${} interpolation for values, handlers, and .map() lists.
---

# opjsx

`opjsx` renders a compact, indentation-based markup template to React elements.

## Grammar

- Element: one per line, prefixed with `&` — `&div`, `&header`, `&my-widget`.
- Classes: Emmet dot shorthand — `&div.card.active` → `<div className="card active">`.
- Attributes: `name"value"` with no `=` — `&input type"text" placeholder"Search"`.
- Nesting: indentation only; no closing tags.
- Text children: any indented line not starting with `&`.

## Interpolation

- Values: `Hello ${name}`. Handlers: `&button onClick"${() => save()}"`.
- Lists: interpolate a `.map()` of nested `opjsx` templates, each with `key"${id}"`.
- Dynamic class: `className"card ${active ? "active" : ""}"`.

This is just the gist — the downloadable SKILL.md is the full reference (type inference, conversion rules, worked example, and common mistakes).