Communitygithub.com

rbikbov/frontend-starter

Crea Registros de Decisiones de Arquitectura (ADR) que documentan decisiones técnicas clave con contexto, alternativas consideradas, ventajas y desventajas, consecuencias y propietarios de la decisión. Útil para documentar 'decisiones de arquitectura', 'elecciones técnicas', 'decisiones de diseño' o 'ADRs'.

¿Qué es frontend-starter?

Esta habilidad, denominada 'ADR Writer', está diseñada para ayudar a desarrolladores y equipos de ingeniería a documentar decisiones de arquitectura de forma estructurada y eficiente. Su principal objetivo es crear Registros de Decisiones de Arquitectura (ADR) que capturen el contexto, las alternativas consideradas, los pros y contras, las consecuencias y los propietarios de cada decisión técnica importante. Es especialmente útil para documentar decisiones como "decisiones de arquitectura", "elecciones técnicas", "decisiones de diseño" o "ADRs". La herramienta proporciona una plantilla Markdown completa con secciones obligatorias (contexto, decisión, alternativas, consecuencias, riesgos) y recomendaciones de mejores prácticas, como mantener los ADR concisos (1-2 páginas), visualizar con diagramas Mermaid, enlazar ADRs relacionados y seguir un flujo de estados (Propuesto → Aceptado → Implementado). También incluye una lista de verificación de salida y patrones comunes para tecnologías, cambios arquitectónicos, estándares y obsolecencias. Está pensada para su uso en sistemas de edición de código como Cursor, Codex o Claude Code, y su implementación consiste en generar el documento MD a partir de la especificación.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rbikbov/frontend-starter/tree/HEAD/.claude/skills/adr-writer

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Redactor de ADR

Documenta decisiones de arquitectura con contexto claro, alternativas y consecuencias. Escribe en español.

Plantilla de ADR

# ADR-[Número]: [Título corto de la decisión]

**Estado:** [Propuesto | Aceptado | Obsoleto | Sustituido por ADR-XXX]  
**Fecha:** [AAAA-MM-DD]  
**Autor:** [Nombre/Usuario]

## 1. Contexto

¿Qué problema estamos resolviendo? ¿Qué factores lo afectan (objetivos de negocio, deuda técnica, presupuesto)?
**Restricciones:**

- [Restricción 1]
- [Restricción 2]

## 2. Decisión

Una declaración breve de la decisión. La tesis principal.

## 3. Detalles técnicos y mecanismos

_Sección de formato libre. Describe detalles de implementación, estructuras de datos, detalles de protocolo o características clave del framework._

- [Listas, descripciones de API, esquemas de datos]
- [Visualización Mermaid (recomendada para interacciones complejas)]

## 4. Alternativas consideradas

### 4.1. [Opción 1]

- **Pros:** ...
- **Contras:** ...
- **Decisión:** [Rechazada/Considerada] (razón breve).

## 5. Consecuencias y riesgos

### Positivas (Pros)

- ¿Cómo ayuda esto al sistema/equipo?

### Negativas / Riesgos (Contras/Riesgos)

- ¿Qué desventajas aceptamos? ¿Cuáles son las amenazas?
- **Mitigación:** ¿Cómo manejaremos los riesgos?

## 6. Historial de revisiones

- **[Fecha]**: [Descripción del cambio] ([Autor])
- **[Fecha]**: [Ej.: Estado cambiado a Aceptado] ([Autor])

Numeración de ADR

ADR-001: Arquitectura inicial del sistema
ADR-002: Selección de base de datos para análisis
ADR-003: Estrategia de autenticación
...

Flujo de estados

Propuesto → Aceptado → Implementado
    ↓
Rechazado

Aceptado → Obsoleto → Sustituido por ADR-XXX

Mejores prácticas

  1. Escribe ADR para decisiones significativas: No toda elección necesita un ADR
  2. Documenta alternativas: Muestra que consideraste opciones
  3. Sé honesto sobre las ventajas y desventajas: Toda decisión tiene inconvenientes
  4. Mantenlo conciso: Máximo 1-2 páginas
  5. Actualiza el estado: Marca ADR obsoletos/sustituidos
  6. Enlaza ADR relacionados: Crea rastros de decisiones
  7. Incluye seguimientos: Elementos de acción con propietarios
  8. Visualiza: Usa diagramas Mermaid para mostrar arquitectura y flujos
  9. Escribe para futuros lectores que carecen del contexto actual
  10. Sé honesto sobre las ventajas y desventajas (toda elección tiene inconvenientes)

Patrones comunes

Para selección de tecnología:

  • Enfócate en capacidades técnicas frente a requisitos
  • Incluye puntos de referencia de rendimiento si están disponibles
  • Documenta el nivel de experiencia del equipo
  • Considera la complejidad operativa

Para cambios arquitectónicos:

  • Incluye la estrategia de migración en las consecuencias
  • Documenta el impacto en la compatibilidad hacia atrás
  • Considera el impacto en la velocidad del equipo durante la transición
  • Nota planes de monitoreo y reversión

Para estándares y convenciones:

  • Incluye ejemplos del estándar en la práctica
  • Documenta excepciones o vías de escape
  • Considera mecanismos de cumplimiento
  • Nota implicaciones educativas/de incorporación

Para obsolecencias:

  • Establece el estado en "Obsoleto" o "Sustituido"
  • Enlaza al ADR que lo sustituye
  • Documenta el cronograma de descontinuación
  • Incluye una guía de migración

Antipatrones

❌ Demasiado detallado: ADR de 10 páginas que nadie lee ❌ Sin alternativas: Parece que la decisión estaba predeterminada ❌ Faltan consecuencias: Ignorar desventajas ❌ Sin propietario: Nadie responsable ❌ Estado desactualizado: ADR antiguos marcados como "Propuesto"

Lista de verificación de revisión

  • Declaración clara del problema en Contexto
  • Decisión establecida explícitamente
  • 2 o más alternativas consideradas
  • Ventajas y desventajas evaluadas honestamente
  • Consecuencias (positivas y negativas) documentadas
  • Riesgos identificados con mitigaciones
  • Propietario de la decisión asignado
  • Acciones de seguimiento con fechas límite
  • El estado está actualizado

Lista de verificación de salida

  • Documento ADR creado
  • Contexto explica el problema
  • Decisión claramente establecida
  • 2-3 alternativas documentadas
  • Sección de ventajas y desventajas llena
  • Consecuencias listadas (positivas y negativas)
  • Riesgos identificados con mitigaciones
  • Fecha de decisión y propietarios
  • Acciones de seguimiento asignadas
  • Estado establecido

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

rbikbov/frontend-starter

Проверка фронтенд-кода и документации на «нейрослоп» перед коммитом, PR или публикацией репозитория: остатки генераторов, мёртвые и недоделанные опции, утверждения в README и комментариях, не подтверждённые кодом, маркетинговый тон и эмодзи, лишние абстракции, хрупкая обработка ошибок, персональные данные в логах, несуществующие классы стилей. Использовать, когда просят проверить код или репозиторий «на слоп», подготовить проект к публикации или показу, сделать ревью кода, написанного с помощью ИИ, или перед тем как закоммитить собственную большую правку.

rbikbov/frontend-starter

Процесс разработки фичи с агентом: PRD с Non-Goals → компактная спецификация → задачи по одной на коммит → read-only исследование → tracer bullet → сборка с тестом сначала → независимое ревью субагентом → проверка в браузере. Использовать, когда просят сделать фичу, экран, пользовательский сценарий или заметное изменение поведения; когда нужно написать PRD, спецификацию или разбить работу на задачи; когда работа больше одного коммита. Не использовать для опечаток и однострочных правок.

rbikbov/frontend-starter

Авторизация и сессия во фронтенде на Next.js (App Router): где хранить токены, BFF на route handlers с HttpOnly-cookie, refresh токена без гонок, определение «не авторизован» (включая GraphQL, который отвечает 200), проверки в proxy.ts и Data Access Layer, безопасный редирект после входа, выход без утечки данных прошлого пользователя, токены в ссылках сброса пароля, формы входа и восстановления. Использовать, когда проектируешь или пишешь вход, регистрацию, восстановление пароля, защищённые страницы, API-клиент с refresh-токеном, или ревьюишь такой код.

rbikbov/frontend-starter

Старт нового фронтенд-проекта на Next.js (App Router) + TypeScript: фундамент, который закладывается до первой фичи. Использовать, когда нужно: создать проект с нуля; решить, нужны ли Next.js, монорепо, BFF, микрофронтенды; разложить FSD поверх роутинга Next; завести строгий TS, линтер границ, env-конфиг, модель ошибок и API-клиент, тесты, git-хуки, CI, каркас README; навести порядок в молодом проекте после генератора.

Skills relacionados