mcpField
F
fivem-nui

fivem-nui

github.com/germanfndezDevelopment19579 installsUpdated 2w ago
Repository

About fivem-nui

A skill for building and editing HTML, CSS, and JavaScript interfaces inside FiveM resources. It covers manifest setup, Lua-browser communication, callback handling, focus management, and security checks.

Key features

  1. 01FiveM manifest and UI setup
  2. 02Lua-to-browser messaging
  3. 03NUI callback handling
  4. 04Keyboard and cursor focus control
  5. 05Client and server validation guidance
  6. 06Debugging and mock-mode testing

Use cases

  1. 01Adding a browser UI to a FiveM resource
  2. 02Connecting UI actions to Lua callbacks
  3. 03Managing interface focus when opening or closing
  4. 04Checking UI data before server-side changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/germanfndez/fiveai-skills --skill fivem-nui

After installing, type/fivem-nuiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

rules/
best-practices.md
fullscreen-nui.md
nui-callbacks.md
reference-links.md
setup.md

Details

From the project README

FiveM NUI

HTML/CSS/JS interfaces for FiveM: manifest setup, Lua-to-browser messages, NUI callbacks and focus handling.

Activation Contract

Load this skill when the user asks to create or edit a FiveM UI, writes HTML/CSS/JS inside a resource, sets ui_page, or asks about SendNUIMessage, SetNUIFocus or RegisterNUICallback.

Hard Rules

  • Declare ui_page and include every UI file in files in fxmanifest.lua; a missing file silently fails to load.
  • Reference assets with https://cfx-nui-<resource>/path; the nui:// protocol is deprecated.
  • RegisterNUICallback handlers must ALWAYS call cb(...) (at least cb({})), or the browser request hangs.
  • Browser calls callbacks with fetch('https://' + GetParentResourceName() + '/<name>', { method: 'POST', body: JSON.stringify(...) }); the URL name must match the registered name exactly.
  • SetNUIFocus(keyboard, mouse): always call SetNUIFocus(false, false) when closing the UI.
  • NUI callbacks run on the CLIENT. Validate their data client-side, then re-validate on the server before any state change; never trust UI-sent prices, amounts or ids.
  • Minimize SendNUIMessage calls: batch updates rather than sending per frame.
  • Debug with F8 and Chrome DevTools; test the page in a browser with a mock mode.

Decision Gates

DirectionMechanism
Lua to browserSendNUIMessage({ type = ..., data = ... }) + window.addEventListener('message')
Browser to Luafetch POST to https://<resource>/<callback> + RegisterNUICallback
Browser wants server datacallback to Lua client, then a server callback
Show / hide cursorSetNUIFocus(true, true) / SetNUIFocus(false, false)
Keyboard onlySetNUIFocus(true, false)

Execution Steps

  1. Add ui_page and files to the manifest (read rules/setup.md).
  2. Build index.html, CSS and JS; listen for message events keyed by type.
  3. Register Lua callbacks for every action the UI can request; call cb on every path.
  4. Manage focus on open/close; handle Escape to close.
  5. Forward any state-changing action to the server and validate there.

Output Contract

Return the manifest entries, the HTML/CSS/JS files, and the Lua client script with callbacks and focus handling. Keep security-relevant logic on the server.

References

  • rules/setup.md — folder layout, manifest, build tools, common mistakes.
  • rules/fullscreen-nui.md — SendNUIMessage, SetNUIFocus, focus stack, assets, devtools.
  • rules/nui-callbacks.md — RegisterNUICallback, fetch, async, errors, security.
  • rules/best-practices.md — performance, security, state, error handling, testing.
  • rules/reference-links.md — official docs and natives reference.

Upstream docs: https://docs.fivem.net/docs/scripting-manual/nui-development/

Comments

Markdown supported