fivem-nui
Trigger: NUI, ui_page, SendNUIMessage, SetNUIFocus, RegisterNUICallback, HTML/CSS/JS for FiveM, FiveM menu UI. Build FiveM NUI pages, wire Lua-browser messaging, callbacks and focus.
By germanfndez · 464 installs
npx skills add germanfndez/fiveai-skills --skill fivem-nui
Source repository · Upstream listing
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
Direction Mechanism
Lua to browser SendNUIMessage({ type = ..., data = ... }) + window.addEventListener('message')
Browser to Lua fetch POST to https://<resource /<callback + RegisterNUICallback
Browser wants server data callback to Lua client, then a server callback
Show / hide cursor SetNUIFocus(true, true) / SetNUIFocus(false, false)
Keyboard only SetNUIFocus(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/