Skip to content

SKILL.md

Latest commit

 

History

History
109 lines (87 loc) · 10.6 KB

SKILL.md

File metadata and controls

109 lines (87 loc) · 10.6 KB
Raw
name nextdns-frontend
description Frontend integration for the NextDNS API using Nuxt 4, Next.js 16, Astro, SvelteKit, or React Router v8. This skill covers secure API key proxying via the BFF pattern, profile management UI, real-time SSE log streaming, analytics chart data preparation, and error handling. Use this skill when building a custom NextDNS dashboard or management interface with any popular full-stack framework. Triggers on tasks involving Nuxt, Vue, Next.js, Astro, React, SvelteKit, Svelte, React Router, Remix, NextDNS dashboard, DNS analytics UI, or log streaming.
license MIT
metadata
author version
tuanductran
1.0.1

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.

Resources