skills/nextjs-expert/SKILL.md
# Skill: Next.js Expert (Architect Level) # Usage: Use when building or refactoring modern Next.js applications (v14/v15). ## Core Directives: - **Architecture:** Default to the **App Router** architecture. Prioritize **React Server Components (RSC)** for data fetching and only use `"use client"` for interactive leaf components. - **Data Fetching:** Leverage standard `async/await` fetch in RSC. Use `revalidatePath` and `revalidateTag` for on-demand cache invalidation. - **TypeScript:** Enforce
npx skillsauth add shalin-rahman/Synapticity skills/nextjs-expertInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
"use client" for interactive leaf components.async/await fetch in RSC. Use revalidatePath and revalidateTag for on-demand cache invalidation.NextPage, Metadata, and APIRoute types where applicable.lucide-react for icons and shadcn/ui patterns for high-quality accessible components.next/image), Font optimization (next/font), and Script optimization. Maximize Core Web Vitals (LCP, FID, CLS)."use server"
import { revalidatePath } from "next/cache"
export async function updateItem(id: string, formData: FormData) {
const data = Object.fromEntries(formData)
await db.item.update({ where: { id }, data })
revalidatePath("/dashboard")
}
pages/ directory unless legacy support is explicitly requested.try/catch in components; use Error Boundaries (error.tsx).NEXT_PUBLIC_ prefix (and only when safe).tools
# Skill: Zero-Defect Software Engineering # Focus: Writing immortal, self-documenting, and resilient source code. ## Playbook Strategy: 1. **SOLID Foundations**: - **Single Responsibility**: Every class/function does ONE thing perfectly. - **Open/Closed**: Design for extension without modification. 2. **DRY (Don't Repeat Yourself)**: If logic appears twice, abstract it into a utility or base class. 3. **Defensive Programming**: - Validate every input. - Handle every exception specif
development
# Skill: TypeScript Clean Code (Staff Engineer) # Usage: Use for any TypeScript-based project to ensure enterprise-grade type safety and readability. ## Core Rules: - **Strict Typing:** Never use `any`. Use `unknown` with type guards if the type is truly uncertain. - **Interfaces vs Types:** Use `interface` for public APIs (extendability) and `type` for unions, intersections, and primitives. - **Functional Patterns:** Prioritize immutability. Use `readonly` for arrays and objects where possible
development
# Skill: Advanced Testing Strategies (TDD / BDD) # Usage: Use to enforce high code quality, prevent regressions, and ensure requirements are met implicitly. ## 🧪 The Testing Pyramid - **Unit Tests (70%)**: Fast, isolated tests for individual functions and classes. Mock all external dependencies. - **Integration Tests (20%)**: Test the interaction between several units or external systems (e.g., Database, APIs). - **End-to-End (E2E) Tests (10%)**: Slow, brittle tests that verify the system as a
development
# Skill: Technical Hand-off & Clarity # Focus: Professional documentation for human and machine consumption. ## Playbook Strategy: 1. **The "ReadMe First" Rule**: Use structured, hierarchical markdown. High-level summary first, deep-dive implementation second. 2. **Contextual Grounding**: Explain the "Why" and the "How" for every project. 3. **Semantic Clarity**: Use industry-standard terminology. Avoid jargon where simple language suffices. 4. **Machine-Readable Annotations**: Include clear co