tuanductran NextDNS frontend skills
Nuxt, Next.js, Astro, SvelteKit, and React Router v8 patterns for building a secure, full-featured NextDNS management dashboard.
Nuxt rules
Patterns for Nuxt 4 (Vue) projects.
| Rule | Keywords | Description |
|---|---|---|
| api-proxy | api key, bff, server route, proxy, runtimeConfig, security | Proxy X-Api-Key through Nuxt server routes (BFF) |
| project-setup | nuxt, setup, nuxt.config, runtimeConfig, environment variables | Bootstrap a Nuxt 4 project for NextDNS integration |
| profile-management-ui | profile, crud, useFetch, composable, vue | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, event source, real-time, server-sent events | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, visualization | Fetch and render analytics and time-series data |
| error-handling | error handling, notifications, toast, createError, api errors | Map NextDNS API errors to Nuxt UI notifications |
| tanstack-query | tanstack query, vue query, cache, mutation, optimistic, infinite | Advanced data fetching with Vue Query and cache invalidation |
Next.js rules
Patterns for Next.js 16 (React) projects using the App Router.
| Rule | Keywords | Description |
|---|---|---|
| api-proxy | api key, bff, route handler, proxy, process.env, security | Proxy X-Api-Key through Next.js Route Handlers (BFF) |
| project-setup | next.js, setup, next.config, env vars, typescript, app router | Bootstrap a Next.js 16 project for NextDNS integration |
| profile-management-ui | profile, crud, server component, react, fetch | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, readable stream, real-time, server-sent | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, server component | Fetch and render analytics and time-series data |
| error-handling | error handling, error boundary, next response, toast, api errors | Map NextDNS API errors to React/Next.js error UI |
| tanstack-query | tanstack query v5, react query, hydration, prefetch, infinite | Prefetch in Server Components and mutate in Client Components |
Astro rules
Patterns for Astro (React islands) projects.
| Rule | Keywords | Description |
|---|---|---|
| api-proxy | api key, bff, endpoint, proxy, import.meta.env, security | Proxy X-Api-Key through Astro API endpoints (BFF) |
| project-setup | astro, setup, astro.config, ssr, adapter, react integration | Bootstrap an Astro + React project for NextDNS integration |
| profile-management-ui | profile, crud, astro page, react island, client directive, hydration | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, readable stream, real-time, client:only | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, react island, swr | Fetch and render analytics and time-series data |
| error-handling | error handling, error page, astro actions, api errors, react island | Map NextDNS API errors to Astro pages and React islands |
| server-islands | server islands, server:defer, lazy load, performance, astro 6 | Lazy-load analytics panels with Astro 6 Server Islands |
SvelteKit rules
Patterns for SvelteKit (Svelte 5) projects.
| Rule | Keywords | Description |
|---|---|---|
| api-proxy | api key, bff, +server.ts, proxy, $env/static/private, security | Proxy X-Api-Key through SvelteKit +server.ts routes (BFF) |
| project-setup | sveltekit, setup, svelte.config, adapter, environment variables | Bootstrap a SvelteKit project for NextDNS integration |
| profile-management-ui | profile, crud, load function, form actions, svelte, page.server.ts | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, event source, real-time, readable stream | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, visualization | Fetch and render analytics and time-series data |
| error-handling | error handling, +error.svelte, error(), fail(), api errors | Map NextDNS API errors to SvelteKit error boundaries |
| websocket-alternative | polling, long-polling, cloudflare, edge, sse fallback, interval | Polling-based log fetching for platforms without SSE |
React router v8 rules
Patterns for React Router v8 (formerly Remix) projects.
| Rule | Keywords | Description |
|---|---|---|
| api-proxy | api key, bff, resource route, proxy, process.env, security | Proxy X-Api-Key through React Router resource routes (BFF) |
| project-setup | react router, setup, react-router.config, ssr, environment variables | Bootstrap a React Router v8 project for NextDNS integration |
| profile-management-ui | profile, crud, loader, action, react, form | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, resource route, readable stream, real-time | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, loader, recharts | Fetch and render analytics and time-series data |
| error-handling | error handling, ErrorBoundary, loader errors, action errors, api | Map NextDNS API errors to React Router error boundaries |
| data-revalidation | shouldRevalidate, fetcher, defer, await, revalidation, performance | Control loader revalidation and background mutations |
Related skills
- nextdns-api: REST endpoint reference — used by every server route in this skill.
- nextdns-ui: Web dashboard strategy — complements this skill for configuration best practices.