Files

T

Pulse ae39e45460 feat: biblioteca inteligente libs/ + 5 novas skills (20 skills total)

NOVAS SKILLS:
- next-best-practices      v0.1.0  (CLEAN) — Next.js App Router, RSC, caching, data
- nextjs-patterns          v1.0.0  (CLEAN) — Next.js 15: Server Actions, route handlers
- vite                     v1.0.0  (CLEAN) — env vars, aliases, proxy, CJS compat
- uncle-bob                v1.0.0  (CLEAN) — Clean Code, SOLID, Clean Architecture
- clean-code-review        v1.0.0  (CLEAN) — naming, guard clauses, anti-patterns, refactoring
- vue                      v1.0.0  (CLEAN) — Vue framework
- vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity

BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos):
- typescript/ — TS safe + generics gotchas
- react/ — Next.js App Router + Vite config
- vue/ — Composition API + Pinia
- linux/ — System diagnostic cheatsheet
- database/ — PostgreSQL + MySQL patterns
- browser/ — Chromium CLI + E2E testing
- security/ — SAST audit (OWASP Top 10)
- best-practices/ — Clean Code + SOLID + Clean Architecture
- deploy/ — Docker multi-stack + OpenClaw ops
- + INDEX.md como guia de navegacao

.learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)

2026-05-19 21:03:25 -03:00

1.4 KiB

Raw Permalink Blame History

Directives

React Directives

These are React directives, not Next.js specific.

`'use client'`

Marks a component as a Client Component. Required for:

React hooks (useState, useEffect, etc.)
Event handlers (onClick, onChange)
Browser APIs (window, localStorage)

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Reference: https://react.dev/reference/rsc/use-client

`'use server'`

Marks a function as a Server Action. Can be passed to Client Components.

'use server'

export async function submitForm(formData: FormData) {
  // Runs on server
}

Or inline within a Server Component:

export default function Page() {
  async function submit() {
    'use server'
    // Runs on server
  }
  return <form action={submit}>...</form>
}

Reference: https://react.dev/reference/rsc/use-server

Next.js Directive

`'use cache'`

Marks a function or component for caching. Part of Next.js Cache Components.

'use cache'

export async function getCachedData() {
  return await fetchData()
}

Requires cacheComponents: true in next.config.ts.

For detailed usage including cache profiles, cacheLife(), cacheTag(), and updateTag(), see the next-cache-components skill.

Reference: https://nextjs.org/docs/app/api-reference/directives/use-cache

1.4 KiB Raw Permalink Blame History