Nextdns frontend
Comprehensive AI agent skills for NextDNS management, covering API integration, CLI operations, and Web UI configuration best practices.From the repository description
npx -y skills add tuanductran/nextdns-skills --skill nextdns-frontendAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
10.6 KB, as published. Nobody here has run it
<!-- @case-police-ignore Api -->
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.