Skill · em Construir interface

frontend-dev-guidelines

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components,…

Procedência

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

Antes de instalar

11 arquivos · 128,8 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/frontend-dev-guidelines/.

d=".claude/skills/frontend-dev-guidelines"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/frontend-dev-guidelines"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/resources/common-patterns.md" "$u/resources/common-patterns.md" \
  -o "$d/resources/complete-examples.md" "$u/resources/complete-examples.md" \
  -o "$d/resources/component-patterns.md" "$u/resources/component-patterns.md" \
  -o "$d/resources/data-fetching.md" "$u/resources/data-fetching.md" \
  -o "$d/resources/file-organization.md" "$u/resources/file-organization.md" \
  -o "$d/resources/loading-and-error-states.md" "$u/resources/loading-and-error-states.md" \
  -o "$d/resources/performance.md" "$u/resources/performance.md" \
  -o "$d/resources/routing-guide.md" "$u/resources/routing-guide.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/typescript-standards.md" "$u/resources/typescript-standards.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/frontend-dev-guidelines/.

d="$HOME/.claude/skills/frontend-dev-guidelines"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/frontend-dev-guidelines"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/resources/common-patterns.md" "$u/resources/common-patterns.md" \
  -o "$d/resources/complete-examples.md" "$u/resources/complete-examples.md" \
  -o "$d/resources/component-patterns.md" "$u/resources/component-patterns.md" \
  -o "$d/resources/data-fetching.md" "$u/resources/data-fetching.md" \
  -o "$d/resources/file-organization.md" "$u/resources/file-organization.md" \
  -o "$d/resources/loading-and-error-states.md" "$u/resources/loading-and-error-states.md" \
  -o "$d/resources/performance.md" "$u/resources/performance.md" \
  -o "$d/resources/routing-guide.md" "$u/resources/routing-guide.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/typescript-standards.md" "$u/resources/typescript-standards.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/frontend-dev-guidelines/.

d=".agents/skills/frontend-dev-guidelines"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/frontend-dev-guidelines"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/resources/common-patterns.md" "$u/resources/common-patterns.md" \
  -o "$d/resources/complete-examples.md" "$u/resources/complete-examples.md" \
  -o "$d/resources/component-patterns.md" "$u/resources/component-patterns.md" \
  -o "$d/resources/data-fetching.md" "$u/resources/data-fetching.md" \
  -o "$d/resources/file-organization.md" "$u/resources/file-organization.md" \
  -o "$d/resources/loading-and-error-states.md" "$u/resources/loading-and-error-states.md" \
  -o "$d/resources/performance.md" "$u/resources/performance.md" \
  -o "$d/resources/routing-guide.md" "$u/resources/routing-guide.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/typescript-standards.md" "$u/resources/typescript-standards.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/frontend-dev-guidelines/.

d="$HOME/.agents/skills/frontend-dev-guidelines"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/frontend-dev-guidelines"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/resources/common-patterns.md" "$u/resources/common-patterns.md" \
  -o "$d/resources/complete-examples.md" "$u/resources/complete-examples.md" \
  -o "$d/resources/component-patterns.md" "$u/resources/component-patterns.md" \
  -o "$d/resources/data-fetching.md" "$u/resources/data-fetching.md" \
  -o "$d/resources/file-organization.md" "$u/resources/file-organization.md" \
  -o "$d/resources/loading-and-error-states.md" "$u/resources/loading-and-error-states.md" \
  -o "$d/resources/performance.md" "$u/resources/performance.md" \
  -o "$d/resources/routing-guide.md" "$u/resources/routing-guide.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/typescript-standards.md" "$u/resources/typescript-standards.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/frontend-dev-guidelines/.

d=".agents/skills/frontend-dev-guidelines"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/frontend-dev-guidelines"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/resources/common-patterns.md" "$u/resources/common-patterns.md" \
  -o "$d/resources/complete-examples.md" "$u/resources/complete-examples.md" \
  -o "$d/resources/component-patterns.md" "$u/resources/component-patterns.md" \
  -o "$d/resources/data-fetching.md" "$u/resources/data-fetching.md" \
  -o "$d/resources/file-organization.md" "$u/resources/file-organization.md" \
  -o "$d/resources/loading-and-error-states.md" "$u/resources/loading-and-error-states.md" \
  -o "$d/resources/performance.md" "$u/resources/performance.md" \
  -o "$d/resources/routing-guide.md" "$u/resources/routing-guide.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/typescript-standards.md" "$u/resources/typescript-standards.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

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

d="$HOME/.gemini/antigravity-cli/skills/frontend-dev-guidelines"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/frontend-dev-guidelines"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/resources/common-patterns.md" "$u/resources/common-patterns.md" \
  -o "$d/resources/complete-examples.md" "$u/resources/complete-examples.md" \
  -o "$d/resources/component-patterns.md" "$u/resources/component-patterns.md" \
  -o "$d/resources/data-fetching.md" "$u/resources/data-fetching.md" \
  -o "$d/resources/file-organization.md" "$u/resources/file-organization.md" \
  -o "$d/resources/loading-and-error-states.md" "$u/resources/loading-and-error-states.md" \
  -o "$d/resources/performance.md" "$u/resources/performance.md" \
  -o "$d/resources/routing-guide.md" "$u/resources/routing-guide.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/typescript-standards.md" "$u/resources/typescript-standards.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.frontend-dev-guidelines

Prévia do SKILL.md

---
name: frontend-dev-guidelines
description: Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, fe…
---

# Frontend Development Guidelines

## Purpose

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.

## When to Use This Skill

- Creating new components or pages
- Building new features
- Fetching data with TanStack Query
- Setting up routing with TanStack Router
- Styling components with MUI v7
- Performance optimization
- Organizing frontend code
- TypeScript best practices

---

## Quick Start

### New Component Checklist

Creating a component? Follow this checklist:

- [ ] Use `React.FC<Props>` pattern with TypeScript
- [ ] Lazy load if heavy component: `React.lazy(() => import())`
- [ ] Wrap in `<SuspenseLoader>` for loading states
- [ ] Use `useSuspenseQuery` for data fetching
- [ ] Import aliases: `@/`, `~types`, `~components`, `~features`
- [ ] Styles: Inline if <100 lines, separate file if >100 lines
- [ ] Use `useCallback` for event handlers passed to children
- [ ] Default export at bottom
- [ ] No early returns with loading spinners
- [ ] Use `useMuiSnackbar` for user notifications
…

Ver todo o marketplace