por Juanjo LunaRefactorizar efectos en React
Te ayuda a revisar y reducir usos evitables de `useEffect` en el frontend de Langfuse. Sirve al inicializar estado, sincronizar datos o mover lógica fuera del componente.
Descripción original (inglés)
refactor-react-effects: Refactor avoidable React useEffect usage in Langfuse frontend code. Use when adding, reviewing, or removing effects; initializing forms or local UI state from query data; synchronizing client and server state; moving mutations or async workflows out of components; cleaning every effect from a frontend submodule; or reviewing whether an effect has a valid external-system owner.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta refactor-react-effects en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/langfuse/langfuse.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/.agents/skills/refactor-react-effects" ~/.claude/skills/refactor-react-effects
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de langfuse/langfuse
- Añadir precios de modelos add-model-price
- Añadir alertas a CSV de vulnerabilidades add-to-dependabot-csv
- Mantener agentes del repositorio agent-setup-maintenance
- Analizar costes de cloud analyze-cloud-costs
- Desarrollar backend en Langfuse backend-dev-guidelines
- Escribir changelogs de Langfuse changelog-writing
- Revisar consultas y esquemas de ClickHouse clickhouse-best-practices
- Revisar cambios de código code-review
Explicación redactada con ayuda de IA a partir de la descripción original.