← ClaudeAtlas

frontend-developmentlisted

Provides frontend development guidelines for Nette. Use when working with Vite, SCSS, JavaScript/TypeScript, Nette Assets ({asset} tag, asset mapping), ESLint with @nette/eslint-plugin, Naja AJAX library, frontend entry points, npm packages in Nette context, Tailwind CSS with Latte templates, nette-forms npm package, HMR, build commands (npm run dev/build), or passing data from PHP to JavaScript.
nette/agent-plugins · ★ 44 · Web & Frontend · score 81
Install: claude install-skill nette/agent-plugins
## Frontend Development See [the Nette Assets reference](references/assets.md) for asset management. See [the Vite integration guide](references/vite.md) for build configuration. ### Technology Stack - **Build system:** Vite with TypeScript support - **JavaScript:** ES Modules (ESM) with `"type": "module"` in package.json - **Styling:** SCSS with modular component architecture - **Asset integration:** Nette Assets for PHP-frontend bridge - **Admin framework:** Bootstrap for rapid interface development - **Code quality:** ESLint with @nette/eslint-plugin - **Forms:** Nette Forms with progressive enhancement ## Asset Architecture Strategy **Source vs Built Assets separation:** - **Development assets:** `assets/` directory with source files (SCSS, TypeScript, images) - **Production assets:** `www/assets/` with optimized, versioned files for browsers ### Coding Standards - Use single quotes for strings unless containing apostrophes (CSS, SCSS, JavaScript) ### Nette Assets Integration Patterns **Basic asset loading** ```latte {* Loads complete bundle with all dependencies *} {asset 'app.js'} ``` **Configuration** ```neon assets: mapping: default: type: vite path: assets # REQUIRED in practice - must match Vite's build.outDir ``` `path` is optional in the schema and nothing validates it, but when omitted it falls back to `%wwwDir%`, so the manifest is looked up in `www/.vite/manifest.json` instead of `www/assets/.vite/manifest.json` and you get `RuntimeE