proelias7/fivem-react-nui
skills/fivem-react-nui/SKILL.md
Builds NUI interfaces for FiveM using React 18 + TypeScript + Vite + Tailwind CSS v3 + Zustand. Use when the user mentions NUI, interface, UI, menu, HUD, panel, overlay, React, Vite, Tailwind, or any in-game interface for FiveM — regardless of the backend framework (vRP, QBCore, Qbox, ESX). Covers project structure, FiveM CEF restrictions, observe/Post hooks, VisibilityProvider, animations, dynamic config/theme, and performance rules.
$ install --global
skillsauthnpx skillsauth add proelias7/fivem-skill fivem-react-nuiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 16, 2026, 6:39 AM171.2s2 files scanned
SKILL.md
- name:
- fivem-react-nui
- description:
- Builds NUI interfaces for FiveM using React 18 + TypeScript + Vite + Tailwind CSS v3 + Zustand. Use when the user mentions NUI, interface, UI, menu, HUD, panel, overlay, React, Vite, Tailwind, or any in-game interface for FiveM — regardless of the backend framework (vRP, QBCore, Qbox, ESX). Covers project structure, FiveM CEF restrictions, observe/Post hooks, VisibilityProvider, animations, dynamic config/theme, and performance rules.
FiveM NUI — React + Vite
Stack: React 18 + TypeScript + Vite + Tailwind CSS v3.4.17 + Zustand
Fundamental Rules
base: "./"invite.config.ts— MANDATORY for assets to load in FiveM- Use
remfor ALL sizes — NEVERpxfor layout (scales with player resolution) - Tailwind v4 uses OKLCH, which FiveM CEF does not support — use Tailwind v3.4.17
- FORBIDDEN:
backdrop-filter: blur(),filter: blur(),filter: drop-shadow()— cause FPS drop - FORBIDDEN: framer-motion, GSAP, react-spring — use pure CSS transitions/keyframes
- Global
overflow: hiddenanduser-select: none - Independent modules (Notify, Progress, HUD) outside
VisibilityProvider - Main interface (panels, crafts, dialogs) inside
VisibilityProviderwithSetNuiFocus isEnvBrowser()for data mocking in dev- Communication:
observe()to listen to NUI messages,Post.create()to send callbacks
Architecture
// main.tsx
ReactDOM.createRoot(document.getElementById("root")!).render(
<ThemeProvider>
{/* Always visible — do not block game input */}
<NotifyComponent />
<ProgressComponent />
{/* Controlled by VisibilityProvider — requires NuiFocus */}
<HashRouter>
<VisibilityProvider>
<AppContent />
</VisibilityProvider>
</HashRouter>
</ThemeProvider>
);
NUI Hooks
observe — Listen to Lua messages
observe<NotifyData>("module:notify", (data) => {
addNotify(data);
});
Post — Send callbacks to Lua
await Post.create("buy", { item: "water", qty: 1 });
Lua side
-- Open
SendNUIMessage({ action = "setNui", nui = "panel", data = { ... } })
SetNuiFocus(true, true)
-- Close callback
RegisterNUICallback("removeFocus", function(data, cb)
SetNuiFocus(false, false)
cb("ok")
end)
fxmanifest.lua Integration
ui_page "src/ui/build/index.html"
files {
"src/ui/build/index.html",
"src/ui/build/assets/*",
"src/ui/project/public/**/*",
}
Recommended Dependencies
{
"dependencies": {
"react": "^18", "react-dom": "^18",
"react-router-dom": "^7", "zustand": "^4",
"clsx": "^2", "tailwind-merge": "^3",
"lucide-react": "^0.5", "tailwindcss": "^3",
"autoprefixer": "^10", "postcss": "^8"
},
"devDependencies": {
"@vitejs/plugin-react-swc": "^3",
"typescript": "^5", "vite": "^5"
}
}
Avoid: MUI, Chakra UI, Ant Design, framer-motion, styled-components — all too heavy for FiveM CEF.
For the full implementation guide (project structure, vite.config, responsive system, CSS restrictions, hooks source, Visibility/Animation/Theme providers, debugger): ui-guide.md
Related Skills
proelias7/vrp-framework
tools
VerifiedTrustedCommunity
Develops resources for FiveM using vRP Creative Network with Lua. Covers Proxy/Tunnel system, Passport/Source/Datatable, inventory, money, groups, identity, database (oxmysql), events, and vRPEX compatibility. Use when the user works with vRP, Creative Network, vRPEX, Proxy, Tunnel, Passport, or any vRP server-side/client-side API.
4SKILL.mdUpdated Jun 16, 2026
proelias7/qbox-framework
development
VerifiedTrustedCommunity
Develops resources for FiveM using the Qbox Project (qbx_core). Covers the exports-based API, bridge compatibility, Ox integration (ox_lib, ox_inventory), and best practices. Use when the user works with FiveM, Qbox, qbx_core, or mentions `exports.qbx_core`, `QBX.PlayerData`, or `ox_lib`.
4SKILL.mdUpdated Jun 16, 2026
proelias7/qbcore-framework
development
VerifiedTrustedCommunity
Develops resources for FiveM using the QBCore Framework. Covers resource creation, Core Object usage, Player management, Callbacks, Events, Items, Jobs, Gangs, Database (oxmysql), and best practices. Use when the user works with FiveM, QBCore, Lua scripts for QBCore servers, or mentions `QBCore.Functions`, `GetCoreObject`, `CitizenID`, or any system of the QBCore Framework.
4SKILL.mdUpdated Jun 16, 2026
proelias7/fivem-development
tools
VerifiedTrustedCommunity
FiveM development best practices for any framework (vRP, QBCore, Qbox, ESX). Covers performance, security, client/server communication, cache (cacheaside), anti-exploit (cerberus), asset discovery, framework auto-detection, and dynamic documentation fetching. Use when the user works with FiveM, Lua scripts, natives, resources, fxmanifest, optimization, or general server development without a specific framework context.
4SKILL.mdUpdated Jun 16, 2026