Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/agent-dev-thai/praneet-front/praneet-frontnpx skills add agent-dev-thai/praneet-front --skill praneet-frontgit clone --depth 1 https://github.com/agent-dev-thai/praneet-frontWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/agent-dev-thai/praneet-front/praneet-front)<a href="https://agentmods.dev/skills/agent-dev-thai/praneet-front/praneet-front"><img src="https://agentmods.dev/badge/skills/agent-dev-thai/praneet-front/praneet-front.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00143 | $0.01303 |
| Opus 5 | $0.00072 | $0.00651 |
| Sonnet 5 | $0.00029 | $0.00261 |
| Haiku 4.5 | $0.00014 | $0.00130 |
Grade A, and why
praneet-front scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 50 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Thai Frontend Design
Apply this skill ON TOP of frontend-design, never instead of it. frontend-design owns the design process (brainstorm → plan → critique → build, signature element, restraint). This skill owns everything that changes when the page contains Thai script. When both apply, frontend-design's process runs first; this skill's rules override its typography defaults wherever Thai text is rendered.
Why Thai breaks default pairings
Thai stacks up to four glyphs vertically (consonant + above-vowel + tone mark, plus below-vowels), has no spaces between words, and its letterforms split into two families — looped (มีหัว, traditional reading forms) and loopless (ไม่มีหัว, modern/geometric). A Latin-first pairing ignores all three, producing clipped marks, tofu/system fallback, and arbitrary loop mixing. Every rule below exists to fix one of these.
Hard rules (non-negotiable)
- Line-height: Thai body 1.6–1.8 (never below 1.55). Headings/display 1.2–1.35. Test with stacked-mark words: น้ำ ที่ ปั๊ม.
- NEVER apply
letter-spacingto Thai. It splits combining marks and breaks SARA AM (U+0E33) shaping. If the design system tracks Latin, scope it (:lang(en)or Latin-only class) and forceletter-spacing: normalon Thai containers. - NEVER ship a font stack without a Thai-capable fallback. Always end with:
'Noto Sans Thai', 'Sukhumvit Set', 'Thonburi', system-ui, sans-serif. (iOS/macOS ship Thonburi + Sukhumvit Set; Android ships Noto Sans Thai.) - Looped vs loopless is a deliberate choice, never an accident. Default convention backed by readability research (Typotheque 2025: looped reads measurably faster in paragraphs, preferred for long sessions): loopless for headings, looped for body. All-loopless is acceptable only for young-skewing, short-string UI (modern tech/consumer). Never set long-form body, government, or finance content in loopless.
- NEVER use display/handwriting faces for body text (Pattaya, Charmonman, Charm, Srisakdi, Itim, Mali, Sriracha, Chonburi).
- NEVER use
word-break: break-allorbreak-wordon Thai — breaks mid-syllable. Rely on browser dictionary segmentation (word-break: normal); for critical layouts useIntl.Segmenter('th', {granularity:'word'})+<wbr>/U+200B. - Thai and Latin don't match in apparent size. Pair via
unicode-range@font-face split (Thai block: U+0E00–0E7F) under one family name, and tune withfont-size-adjustor a slightly larger Thai size. Pattern inassets/starter.css.
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 50 lines · 143 tokens per session scan A 325120f791b7
praneet-front is a skill published in the GitHub repository agent-dev-thai/praneet-front (10 stars, last pushed 2mo ago), licensed MIT. It adds 143 tokens to every session and 1,303 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
rtl-aware-development
OpenCode Desktop should be RTL-aware. Use when implementing or reviewing RTL/LTR behavior in the web app, desktop app, CSS, menus, scrolling, resizing, icons, mixed-direction text, or Electron title bars.
harden
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
experience-lwc-rtl-validate
Use this skill to review a Lightning Web Component (.html, .js, .css files) for right-to-left (RTL) internationalization correctness, producing a finding list with code-level fixes covering CSS logical properties, bidirectional text handling, keyboard semantics, and RTL-aware SLDS class usage. TRIGGER when the user…
ui-conventions
Frontend change conventions for apps/web — i18n (bilingual keys), dark mode (the highest-frequency rework source), theming inline SVG/chart colors, loading/empty/error states. Use for any UI change.
rtl-internationalization
Right-to-left (RTL) layout and bidirectional text support for Hebrew, Arabic, Persian, and Urdu interfaces. Use when building UI that must support RTL languages, converting physical CSS/Tailwind properties to logical ones, handling mixed-direction (bidi) text, mirroring directional icons, or testing an app with…
hebrew-rtl-best-practices
Implement right-to-left (RTL) layouts for Hebrew web applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, "right to left", or needs to build a Hebrew web UI. Covers CSS logical properties, the :dir() pseudo-class, Tailwind RTL, React/Next.js RTL setup, icon…