fivem-nui
Trigger: NUI, uipage, SendNUIMessage, SetNUIFocus, RegisterNUICallback, HTML/CSS/JS for FiveM, FiveM menu UI. Build FiveM NUI pages, wire Lua-browser messaging, callbacks and focus.
- Installs
- 573
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/germanfndez/fiveai-skills --skill fivem-nui- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads fivem-nui automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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_pageand include every UI file infilesinfxmanifest.lua; a missing file silently fails to load. - Reference assets with
https://cfx-nui-<resource>/path; thenui://protocol is deprecated. RegisterNUICallbackhandlers must ALWAYS callcb(...)(at leastcb({})), 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 callSetNUIFocus(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
SendNUIMessagecalls: 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
- Add
ui_pageandfilesto the manifest (read rules/setup.md). - Build
index.html, CSS and JS; listen formessageevents keyed bytype. - Register Lua callbacks for every action the UI can request; call
cbon every path. - Manage focus on open/close; handle
Escapeto close. - 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/
FAQ
What does the fivem-nui skill do?
Trigger: NUI, uipage, SendNUIMessage, SetNUIFocus, RegisterNUICallback, HTML/CSS/JS for FiveM, FiveM menu UI. Build FiveM NUI pages, wire Lua-browser messaging, callbacks and focus.
How do I install fivem-nui?
Run npx skills add https://github.com/germanfndez/fiveai-skills --skill fivem-nui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/fivem-nui/ (personal) or .claude/skills/fivem-nui/ (project).
Which AI agents can use fivem-nui?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is fivem-nui safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains fivem-nui?
It is published by germanfndez in germanfndez/fiveai-skills. It has 573 recorded installs.
More from germanfndez/fiveai-skills
fivem-security
germanfndez/fiveai-skills
Trigger: security, anti-cheat, exploit, secure events, validate client data, server authority, distance check, rate limit, review server code. Harden FiveM net events and server-side validation.
fivemanage
germanfndez/fiveai-skills
Trigger: Fivemanage, fmsdk, takeImage, takeServerImage, uploadImage, Log, Info/Warn/Error, player screenshots, logs dashboard. Install and use the Fivemanage SDK for images and centralized logs.
esx-framework
germanfndez/fiveai-skills
Trigger: ESX, esextended, xPlayer, PlayerData, ESX.GetPlayerFromId, ESX.RegisterServerCallback, ESX jobs, economy, inventory. Build ESX Legacy resources with server/client functions, xPlayer methods, callbacks and events.
qbcore-framework
germanfndez/fiveai-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.