Provides frontend development guidelines for Nette. Use when working with Vite, SCSS, JavaScript, Nette Assets, or build configuration.
Provides frontend development guidelines for Nette. Use when working with Vite, SCSS, JavaScript, Nette Assets, or build configuration.
/plugin marketplace add nette/claude-code/plugin install nette@netteThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets.mdvite.mdFrontend built with modern tooling and seamlessly integrated with Nette backend through Nette Assets.
For complete Nette Assets reference, see assets.md. For Vite integration details, see vite.md.
"type": "module" in package.jsonSource vs Built Assets separation:
assets/ directory with source files (SCSS, TypeScript, images)www/assets/ with optimized, versioned files for browsersUse separate entry points when:
Example strategy:
// assets/front.js - Public website (custom design)
import './css/front.scss';
import './js/components/product-gallery.js';
// assets/admin.js - Administration (Bootstrap-based)
import 'bootstrap/dist/css/bootstrap.css';
import './css/admin.scss';
File-per-component approach:
assets/js/
├── components/
│ ├── product-form.js ← Reusable form component
│ ├── image-gallery.js ← Product image viewer
├── pages/
│ ├── blog.css ← Page-specific enhancements
│ └── checkout.css ← Multi-step checkout flow
└── utils/
├── ajax.js ← AJAX utilities
└── validation.js ← Form validation helpers
Basic asset loading
{* Loads complete bundle with all dependencies *}
{asset 'front.js'}
Configuration
assets:
mapping:
default:
type: vite
devServer: true # Enable HMR in debug mode
Passing data to JavaScript:
{* In template *}
<script>
window.appConfig = {
apiUrl: {$baseUrl . '/api'},
userId: {$user->isLoggedIn() ? $user->getId() : 'null'},
locale: {$locale},
csrfToken: {$csrfToken}
};
</script>
{asset 'front.js'}
// In JavaScript component
const { apiUrl, userId, csrfToken } = window.appConfig;
fetch(`${apiUrl}/user-data`, {
headers: { 'X-CSRF-Token': csrfToken }
});
Requires nette-forms npm package:
npm install nette-forms
Standard enhancement pattern:
import netteForms from 'nette-forms';
// Initialize Nette Forms validation
netteForms.initOnLoad();
npm install --save-dev @nette/eslint-plugin eslint
Basic configuration with recommended rules:
// eslint.config.js
import nette from '@nette/eslint-plugin';
import { defineConfig } from 'eslint/config';
export default defineConfig([
{
extends: [nette.configs.recommended],
},
]);
Linting JavaScript in Latte templates:
npm install --save-dev eslint-plugin-html
// eslint.config.js
import nette from '@nette/eslint-plugin';
import pluginHtml from 'eslint-plugin-html';
import { defineConfig } from 'eslint/config';
export default defineConfig([
{
extends: [nette.configs.recommended],
},
{
files: ['app/**/*.latte'],
plugins: {
html: pluginHtml,
},
processor: '@nette/latte', // Handles Latte tags in JS
},
]);
This allows ESLint to check JavaScript inside <script> tags with Latte variables:
<script>
let name = {$name};
</script>
TypeScript support:
npm install --save-dev typescript typescript-eslint
import nette from '@nette/eslint-plugin/typescript';
export default defineConfig([
{
extends: [nette.configs.typescript],
},
]);
Custom rules:
@nette/no-this-in-arrow-except - Prevents this binding issues in arrow functions@nette/prefer-line-comments - Enforces // over /* */ for single-line commentsWhen using Tailwind CSS, configure it to scan Latte templates for class names:
/* assets/css/app.css */
@import 'tailwindcss';
@source '../app/**/*.latte';
# Start the development server with HMR
npm run dev
# Build assets for production
npm run build
# Build assets for development
npm run build:dev
# Run ESLint checks
npm run lint
# Run ESLint and fix issues
npm run lint:fix
For detailed information:
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.