jeffersongoncalves

Livewire Snapshot Extractor — AI skill for Claude Code

AI community

Extract Livewire component snapshots (v2, v3, v4) as structured context for Claude Code and other AI coding assistants.

How to install Livewire Snapshot Extractor

This entry records only its repository, not the path inside it, so there is no exact command to give. Open jeffersongoncalves/livewire-snapshot-extractor and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Livewire Snapshot Extractor does

Extract Livewire component snapshots (v2, v3, v4) as structured context for Claude Code and other AI coding assistants.

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Context Engineering Intro — GitHub Repo stars Context engineering - the new way of AI coding assistants Context engineering guide 12.8k ★
OpenContext — A personal context store for AI agents and assistants—reuse your existing coding agent CLI (Codex/Claude/OpenC 1.1k ★

README

⚡ Livewire Snapshot Extractor

![Livewire Snapshot Extractor](banners/livewire-snapshot-extractor.png)

Extensão Chrome para extrair snapshots dos componentes Livewire de qualquer página e formatá-los como contexto para o **Claude Code**.

🚀 Instalação

Modo Desenvolvedor (sem publicar na Chrome Web Store)

Abra o Chrome e acesse chrome://extensions/
Ative o Modo do desenvolvedor (toggle no canto superior direito)
Clique em "Carregar sem compactação"
Selecione a pasta livewire-snapshot-extractor
A extensão aparecerá na barra de ferramentas ✓

💡 Como usar

Navegue até qualquer página que use Livewire v2, v3 ou v4
Clique no ícone ⚡ na barra de extensões
Os componentes da tela serão extraídos automaticamente
Selecione quais componentes quer incluir no contexto
Escolha o formato de saída (Markdown, JSON, ou Compact)
Clique em ⎘ Copy para copiar para o clipboard
Cole no Claude Code como contexto da tela atual

📋 Formatos de saída

Markdown (recomendado para Claude Code)

## Livewire Screen Context

> **Page:** Dashboard
> **URL:** `https://app.exemplo.com/dashboard`
> **Livewire:** v3.x | **Components:** 3

### `UserStats`
**ID:** `abc123`
**Route:** `GET /dashboard`

**Properties:**
```json
{
  "totalUsers": 1420,
  "activeToday": 87
}


### JSON
Saída estruturada completa, ideal para processar programaticamente.

### Compact
Saída mínima para contexto rápido sem muito overhead.

---

## ⚙️ Opções

| Opção | Descrição |
|-------|-----------|
| **Full** | Inclui o snapshot raw completo (útil para debug profundo) |
| **All / None** | Seleciona/deseleciona todos os componentes |
| Checkbox por componente | Escolha exatamente quais componentes incluir |

---

## 🔧 Compatibilidade

| Versão Livewire | Suporte |
|-----------------|---------|
| Livewire 4.x    | ✅ Full (via `wire:snapshot`) |
| Livewire 3.x    | ✅ Full (via `wire:snapshot`) |
| Livewire 2.x    | ✅ Pa