Skill · em Construir interface

senior-frontend

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance,…

Procedência

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

Antes de instalar

7 arquivos · 18,3 KB · inclui 3 scripts que executam: scripts/bundle_analyzer.py, scripts/component_generator.py, scripts/frontend_scaffolder.py

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/senior-frontend/.

d=".claude/skills/senior-frontend"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/senior-frontend"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/frontend_best_practices.md" "$u/references/frontend_best_practices.md" \
  -o "$d/references/nextjs_optimization_guide.md" "$u/references/nextjs_optimization_guide.md" \
  -o "$d/references/react_patterns.md" "$u/references/react_patterns.md" \
  -o "$d/scripts/bundle_analyzer.py" "$u/scripts/bundle_analyzer.py" \
  -o "$d/scripts/component_generator.py" "$u/scripts/component_generator.py" \
  -o "$d/scripts/frontend_scaffolder.py" "$u/scripts/frontend_scaffolder.py" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/senior-frontend/.

d="$HOME/.claude/skills/senior-frontend"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/senior-frontend"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/frontend_best_practices.md" "$u/references/frontend_best_practices.md" \
  -o "$d/references/nextjs_optimization_guide.md" "$u/references/nextjs_optimization_guide.md" \
  -o "$d/references/react_patterns.md" "$u/references/react_patterns.md" \
  -o "$d/scripts/bundle_analyzer.py" "$u/scripts/bundle_analyzer.py" \
  -o "$d/scripts/component_generator.py" "$u/scripts/component_generator.py" \
  -o "$d/scripts/frontend_scaffolder.py" "$u/scripts/frontend_scaffolder.py" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/senior-frontend/.

d=".agents/skills/senior-frontend"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/senior-frontend"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/frontend_best_practices.md" "$u/references/frontend_best_practices.md" \
  -o "$d/references/nextjs_optimization_guide.md" "$u/references/nextjs_optimization_guide.md" \
  -o "$d/references/react_patterns.md" "$u/references/react_patterns.md" \
  -o "$d/scripts/bundle_analyzer.py" "$u/scripts/bundle_analyzer.py" \
  -o "$d/scripts/component_generator.py" "$u/scripts/component_generator.py" \
  -o "$d/scripts/frontend_scaffolder.py" "$u/scripts/frontend_scaffolder.py" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/senior-frontend/.

d="$HOME/.agents/skills/senior-frontend"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/senior-frontend"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/frontend_best_practices.md" "$u/references/frontend_best_practices.md" \
  -o "$d/references/nextjs_optimization_guide.md" "$u/references/nextjs_optimization_guide.md" \
  -o "$d/references/react_patterns.md" "$u/references/react_patterns.md" \
  -o "$d/scripts/bundle_analyzer.py" "$u/scripts/bundle_analyzer.py" \
  -o "$d/scripts/component_generator.py" "$u/scripts/component_generator.py" \
  -o "$d/scripts/frontend_scaffolder.py" "$u/scripts/frontend_scaffolder.py" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/senior-frontend/.

d=".agents/skills/senior-frontend"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/senior-frontend"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/frontend_best_practices.md" "$u/references/frontend_best_practices.md" \
  -o "$d/references/nextjs_optimization_guide.md" "$u/references/nextjs_optimization_guide.md" \
  -o "$d/references/react_patterns.md" "$u/references/react_patterns.md" \
  -o "$d/scripts/bundle_analyzer.py" "$u/scripts/bundle_analyzer.py" \
  -o "$d/scripts/component_generator.py" "$u/scripts/component_generator.py" \
  -o "$d/scripts/frontend_scaffolder.py" "$u/scripts/frontend_scaffolder.py" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

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

d="$HOME/.gemini/antigravity-cli/skills/senior-frontend"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/senior-frontend"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/frontend_best_practices.md" "$u/references/frontend_best_practices.md" \
  -o "$d/references/nextjs_optimization_guide.md" "$u/references/nextjs_optimization_guide.md" \
  -o "$d/references/react_patterns.md" "$u/references/react_patterns.md" \
  -o "$d/scripts/bundle_analyzer.py" "$u/scripts/bundle_analyzer.py" \
  -o "$d/scripts/component_generator.py" "$u/scripts/component_generator.py" \
  -o "$d/scripts/frontend_scaffolder.py" "$u/scripts/frontend_scaffolder.py" \
  -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.senior-frontend

Prévia do SKILL.md

---
name: senior-frontend
description: Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, impleme…
---

# Senior Frontend

Complete toolkit for senior frontend with modern tools and best practices.

## Quick Start

### Main Capabilities

This skill provides three core capabilities through automated scripts:

```bash
# Script 1: Component Generator
python scripts/component_generator.py [options]

# Script 2: Bundle Analyzer
python scripts/bundle_analyzer.py [options]

# Script 3: Frontend Scaffolder
python scripts/frontend_scaffolder.py [options]
```

## Core Capabilities

### 1. Component Generator

Automated tool for component generator tasks.

**Features:**
- Automated scaffolding
- Best practices built-in
- Configurable templates
- Quality checks

**Usage:**
```bash
…

Ver todo o marketplace