nodefony-create-frontend-module

Scaffolds Nodefony modules embedding React, Vue, Angular, or Svelte frontends served via Vite.

Updated Dec 19, 2023
One-click install
npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-create-frontend-module-nodefony
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nodefony-create-frontend-module
Source: https://github.com/nodefony/nodefony-core/tree/main/.claude/skills/nodefony-create-frontend-module
Command: npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-create-frontend-module-nodefony

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating a Nodefony module with a SPA frontend involves many error-prone manual steps: wiring Vite through @nodefony/frontend, registering entries, propagating CSP nonces, configuring apiProxyPaths, and adding framework-specific peer dependencies. This Skill automates that scaffolding inside the Nodefony framework repository and redirects to the CLI when working in a user application. ## Core Features & Use Cases - Framework-aware scaffolding: Generates modules for React 19, Vue 3, Angular 21, or Svelte 5 with the correct entry files, mount nodes, Vite plugins, and peer dependencies for each framework. - Delegation to nodefony-create-module: Reuses the base module skeleton (package.json, tsconfig, controller stubs, manifest registration) instead of duplicating templates, then enriches it with frontend-specific configuration. - CSP and proxy correctness: Ensures the controller propagates the CSP nonce via renderTags and that apiProxyPaths is set so backend fetches do not return the SPA fallback HTML. - Use Case: A developer in the Nodefony framework repo asks to create a test module with a Vue frontend; the Skill scaffolds src/modules/{name}/, registers the entry, builds it, and validates the output with tsc and rolldown. ## Quick Start Ask the assistant to create a Nodefony frontend module named shop-front with React in the framework repository.

Frequently Asked Questions about nodefony-create-frontend-module

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

FAQPage Schema
How do I create a Nodefony module with a React or Vue frontend?

In a user application, run nodefony create module <name> --frontend react (or vue, angular, svelte); the CLI wires the module, frontend, and controller automatically. In the framework repository itself, this Skill scaffolds the module under src/modules/ with the correct Vite entry and peer dependencies.

What frontend frameworks does Nodefony support with Vite?

Nodefony supports React 19, Vue 3, Angular 21, and Svelte 5 through @nodefony/frontend, which supervises Vite dev servers and builds production bundles. Each framework has a canonical reference module under src/modules/test-frontend-{framework}.

Why does my Nodefony frontend fetch return Unexpected token '<'?

This happens when apiProxyPaths is missing from registerEntry, so Vite returns the SPA fallback HTML instead of proxying API calls to the backend. Add apiProxyPaths with your route prefix, for example ['/shop/api'], to fix it.

Why is my Nodefony page blank with a blocked:csp error?

The CSP nonce was not propagated to the injected script tags. The controller must call renderTags with this.context?.cspNonce and must never set CSP headers manually, since the firewall emits them.

When should I not use this scaffolding skill?

Do not use it inside a user application, where the nodefony create module --frontend CLI command is the correct path, and do not use it for modules without a frontend, which belong to nodefony-create-module directly.