skills.rest
nodefony
nodefonyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nodefony-studio-dev

Builds admin screens for the Nodefony Studio frontend using React 19, Mantine v9, and MobX.

Updated Dec 19, 2023
Search Tags:#react#frontend development#realtime#mobx#mantine#admin dashboard#nodefony
One-click install
npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-studio-dev-nodefony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nodefony-studio-dev
Source: https://github.com/nodefony/nodefony-core/tree/main/.claude/skills/nodefony-studio-dev
Command: npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-studio-dev-nodefony

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a new page, dashboard, or panel in the Nodefony Studio admin app normally requires re-exploring the codebase to rediscover the UI kit APIs, routing recipe, realtime hooks, and quality gates. This Skill provides a deterministic playbook with exact component signatures, copy-paste skeletons, and hard-won gotchas so screens are built consistently without re-investigation. ## Core Features & Use Cases - Screen construction recipe: Deterministic steps for adding a route with lazy loading, navConfig entry, deep-link SPA fallback, and data plane wiring. - UI kit reference: Exact APIs for PageHeader, PageLayout, DataGrid, DataState, StatCard, KpiCard, DocHint, JsonViewer, and MiniChart, plus MobX stores and nodefony/react realtime hooks. - Realtime and backend guidance: Patterns for Studio channels, the probes-plus-hub observability pattern, the Twin live architecture map, the debug bar, and the Studio backend controller and data plane. - Use Case: You need to add a new monitoring dashboard to the Studio admin app. The Skill gives you the live-dashboard skeleton, the conditional subscription pattern, the DataGrid height rule, and the typecheck gate to run before committing. ## Quick Start Use the nodefony-studio-dev skill to add a new realtime dashboard page to the Studio admin frontend.

Frequently Asked Questions about nodefony-studio-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new page to the Nodefony Studio admin frontend?▼

Create a route component in frontend/src/routes, register it as a lazy import in App.tsx, add a nav entry in layouts/navConfig.ts, and add a literal SPA fallback route in StudioController for deep links with two or more segments. Frontend changes hot-reload via Vite with no restart.

What UI components does the Studio kit provide for building dashboards?▼

The kit includes PageHeader, PageLayout, StickyTabsList, DataGrid, DataState, StatCard, KpiCard, typed DocHint variants, JsonViewer, MiniChart, and FlowGraph. DataGrid is built on @tanstack/react-table and handles search, filters, sorting, pagination, and persistence.

Should I use recharts or @mantine/charts for graphs in Studio?▼

No. Both recharts and @mantine/charts were removed because they break on React 19. Use the MiniChart SVG component from the Studio UI kit for all curves and sparklines.

How do I subscribe to a realtime channel in a Studio page?▼

Use the useNodefonyChannel or useNodefonyChannelData hooks from nodefony/react, which handle ref-counted subscribe and unsubscribe automatically. Never call client.emit('subscribe') directly, since an unbalanced unsubscribe on the shared socket cuts the channel for all consumers.

Why does my Studio change not appear after rebuilding?▼

The turbo cache can restore a stale dist directory, and the prebuilt UI reads index.html only at server startup. Run turbo build with --force, restart the server, then hard-reload the browser with cache disabled to clear the old hashed chunks.

When should I hand off work to the nodefony-framework-dev skill instead?▼

Hand off whenever the need touches the backend core: injectable services, modules, CLI commands, ORM entities, the HTTP/WS pipeline, new server channels or actions, or new isomorphic nodefony subpaths. Frontend and backend skills must be updated together when a feature crosses both sides.

Related Skills

Explore More Software Engineering Skills→
rakovi4rakovi4
45

run-frontend

Execute a script to start the frontend development server using .env port settings.

Community
Basic
kamranahmedsekamranahmedse
739

diffity-diff

Open Git diffs in a browser via the diffity CLI.

Community
Intermediate
agenticgogolagenticgogol
1

frontend-nextjs

Scaffolds a Next.js App Router frontend that calls the backend API contract defined in design.md.

Community
Basic
tx7dotx7do
545

add-crud-module

Scaffolds complete CRUD modules across Go Kratos backend and React or Vue frontends.

Community
Advanced