Skill · em Construir interface

react-dev

This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration…

Procedência

Origem: davila7/claude-code-templates
Caminho: cli-tool/components/skills/development/react-dev
Versão fixada: 57f899e5394bb8ca166f38eacae8f0853cbfe033
Licença: MIT
Espelhado em 25/09/2026
6 downloads no Claude Code Templates (lido em 25/09/2026)

Antes de instalar

9 arquivos · 118,5 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/react-dev/.

d=".claude/skills/react-dev"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/react-dev"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/examples/generic-components.md" "$u/examples/generic-components.md" \
  -o "$d/examples/server-components.md" "$u/examples/server-components.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/event-handlers.md" "$u/references/event-handlers.md" \
  -o "$d/references/hooks.md" "$u/references/hooks.md" \
  -o "$d/references/react-19-patterns.md" "$u/references/react-19-patterns.md" \
  -o "$d/references/react-router.md" "$u/references/react-router.md" \
  -o "$d/references/tanstack-router.md" "$u/references/tanstack-router.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/react-dev/.

d="$HOME/.claude/skills/react-dev"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/react-dev"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/examples/generic-components.md" "$u/examples/generic-components.md" \
  -o "$d/examples/server-components.md" "$u/examples/server-components.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/event-handlers.md" "$u/references/event-handlers.md" \
  -o "$d/references/hooks.md" "$u/references/hooks.md" \
  -o "$d/references/react-19-patterns.md" "$u/references/react-19-patterns.md" \
  -o "$d/references/react-router.md" "$u/references/react-router.md" \
  -o "$d/references/tanstack-router.md" "$u/references/tanstack-router.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/react-dev/.

d=".agents/skills/react-dev"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/react-dev"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/examples/generic-components.md" "$u/examples/generic-components.md" \
  -o "$d/examples/server-components.md" "$u/examples/server-components.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/event-handlers.md" "$u/references/event-handlers.md" \
  -o "$d/references/hooks.md" "$u/references/hooks.md" \
  -o "$d/references/react-19-patterns.md" "$u/references/react-19-patterns.md" \
  -o "$d/references/react-router.md" "$u/references/react-router.md" \
  -o "$d/references/tanstack-router.md" "$u/references/tanstack-router.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/react-dev/.

d="$HOME/.agents/skills/react-dev"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/react-dev"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/examples/generic-components.md" "$u/examples/generic-components.md" \
  -o "$d/examples/server-components.md" "$u/examples/server-components.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/event-handlers.md" "$u/references/event-handlers.md" \
  -o "$d/references/hooks.md" "$u/references/hooks.md" \
  -o "$d/references/react-19-patterns.md" "$u/references/react-19-patterns.md" \
  -o "$d/references/react-router.md" "$u/references/react-router.md" \
  -o "$d/references/tanstack-router.md" "$u/references/tanstack-router.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/react-dev/.

d=".agents/skills/react-dev"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/react-dev"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/examples/generic-components.md" "$u/examples/generic-components.md" \
  -o "$d/examples/server-components.md" "$u/examples/server-components.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/event-handlers.md" "$u/references/event-handlers.md" \
  -o "$d/references/hooks.md" "$u/references/hooks.md" \
  -o "$d/references/react-19-patterns.md" "$u/references/react-19-patterns.md" \
  -o "$d/references/react-router.md" "$u/references/react-router.md" \
  -o "$d/references/tanstack-router.md" "$u/references/tanstack-router.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/react-dev/.

d="$HOME/.gemini/antigravity-cli/skills/react-dev"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/react-dev"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/examples/generic-components.md" "$u/examples/generic-components.md" \
  -o "$d/examples/server-components.md" "$u/examples/server-components.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/references/event-handlers.md" "$u/references/event-handlers.md" \
  -o "$d/references/hooks.md" "$u/references/hooks.md" \
  -o "$d/references/react-19-patterns.md" "$u/references/react-19-patterns.md" \
  -o "$d/references/react-router.md" "$u/references/react-router.md" \
  -o "$d/references/tanstack-router.md" "$u/references/tanstack-router.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.react-dev

Prévia do SKILL.md

---
name: react-dev
version: 1.0.0
description: This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router…
---

# React TypeScript

Type-safe React = compile-time guarantees = confident refactoring.

<when_to_use>

- Building typed React components
- Implementing generic components
- Typing event handlers, forms, refs
- Using React 19 features (Actions, Server Components, use())
- Router integration (TanStack Router, React Router)
- Custom hooks with proper typing

NOT for: non-React TypeScript, vanilla JS React

</when_to_use>

<react_19_changes>

React 19 breaking changes require migration. Key patterns:

**ref as prop** - forwardRef deprecated:

```typescript
// React 19 - ref as regular prop
type ButtonProps = {
  ref?: React.Ref<HTMLButtonElement>;
} & React.ComponentPropsWithoutRef<'button'>;

function Button({ ref, children, ...props }: ButtonProps) {
  return <button ref={ref} {...props}>{children}</button>;
}
```
…

Ver todo o marketplace