sdn0303/frontend-nextjs-rules
.claude/skills/frontend-nextjs-rules/SKILL.md
Frontend development rules for Next.js 16, React 19, TanStack Query, Zustand, Zod, Tailwind v4, and shadcn/ui in services/frontend. Use when writing, reviewing, or refactoring React components, data fetching hooks, state management, forms, or UI styling.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add sdn0303/terrasight frontend-nextjs-rulesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 4:30 PM4.3s6 files scanned
SKILL.md
- name:
- frontend-nextjs-rules
- description:
- Frontend development rules for Next.js 16, React 19, TanStack Query, Zustand, Zod, Tailwind v4, and shadcn/ui in services/frontend. Use when writing, reviewing, or refactoring React components, data fetching hooks, state management, forms, or UI styling.
- version:
- 1.0.0
Frontend Next.js Rules
Consolidated frontend guidance for this project. Each reference file covers a specific domain — open only the ones relevant to your task.
Core Principles
- Server Components by default — add
'use client'only when hooks, event handlers, or browser APIs are needed. Push the boundary down. - Validate at boundaries — every external response parsed with Zod
safeParse. Schema is the API contract source of truth. - Derive, don't duplicate —
z.infer<typeof Schema>for types, query key factories for cache keys,typeof/keyoffor TS types. - Eliminate waterfalls —
Promise.allfor independent fetches,Suspenseboundaries for streaming,"use cache"for deduplication. - Measure before optimizing — React DevTools Profiler and Lighthouse
before adding
useMemo,useCallback, or dynamic imports.
Quick Reference by Task
- New component: react-patterns, ui-styling
- Data fetching / hooks: data-fetching, react-patterns
- Forms / validation: validation, data-fetching
- State management: state-management
- Styling / accessibility: ui-styling
- Code review: react-patterns, data-fetching, validation
Reference Files
Open only the domains you need:
- react-patterns: RSC vs Client, performance rules, rendering patterns, anti-patterns
- data-fetching: TanStack Query hooks, query key factory, mutations, SSR hydration
- state-management: Zustand store patterns, nuqs URL state, selector discipline
- validation: Zod schemas, React Hook Form integration, Server Action validation
- ui-styling: Tailwind v4
@theme, shadcn/ui, accessibility, design tokens
Review Checklist
'use client'only where needed, pushed as far down as possible?- External data validated with Zod
safeParseat boundary? - TanStack Query hooks wrapped in custom hooks with key factory?
- No
anytype, no!non-null assertion? - Error boundaries at route group level?
- Accessibility: semantic HTML, ARIA, keyboard navigation?
- No PII in logs?
Verification
pnpm tsc --noEmit && pnpm biome check . && pnpm vitest run
Related Skills
sdn0303/rust-backend-rules
development
VerifiedTrustedCommunity
Rust coding rules for Axum/Tokio/SQLx backends in services/backend. 179 rules split into 14 category files covering ownership, error handling, async, API design, and more. Use when writing, reviewing, or refactoring Rust code, designing error types, async flows, or public APIs.
SKILL.mdUpdated Apr 16, 2026
sdn0303/postgresql-patterns
content-media
VerifiedTrustedCommunity
PostgreSQL and PostGIS patterns for schema design, spatial queries, query optimization, indexing, and zero-downtime migrations. Use when writing SQL, creating tables, optimizing queries, or writing migration files.
SKILL.mdUpdated Apr 16, 2026
sdn0303/mapbox-gl-js
development
VerifiedTrustedCommunity
Mapbox GL JS v3 development patterns for real estate data visualization. Use when working with Mapbox maps, Standard Style configuration, layer slots, 3D lighting, expressions, react-map-gl/mapbox integration, or migrating from MapLibre GL JS.
SKILL.mdUpdated Apr 16, 2026
sdn0303/geospatial-dev
development
VerifiedTrustedCommunity
MapLibre GL JS + PostGIS integration patterns for real estate data visualization. Use when working on map layers, spatial queries, GeoJSON data pipelines, or 3D extrusion effects.
SKILL.mdUpdated Apr 16, 2026