nextdns-frontend
Frontend integration for the NextDNS API using Nuxt 4, Next.js, Astro, SvelteKit, or React Router
Resources
1Install
npx skillscat add tuanductran/nextdns-skills/nextdns-frontend Install via the SkillsCat registry.
SKILL.md
NextDNS Frontend Skills
Nuxt, Next.js, Astro, SvelteKit, and React Router v7 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 |
Next.js Rules
Patterns for Next.js 15 (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 15 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 |
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 |
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 |
React Router v7 Rules
Patterns for React Router v7 (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 v7 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 |
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.
Resources
Categories
Install
npx skillscat add tuanductran/nextdns-skills/nextdns-frontend Install via the SkillsCat registry.