🚀 App #2: Medical Appointment Management SPA + OpenSpec Skill

🚀 App #2: Medical Appointment Management SPA + OpenSpec Skill

Hola de nuevo 👋

Completé la segunda app del reto #OneAppADay y quiero compartir algo interesante: creé una custom skill en OpenSpec para automatizar el flujo de Spec-Driven Development.

---

📱 App #2: Medical Appointment Management




Una aplicación moderna para gestionar citas médicas con:

✅ Booking de citas con validación de horarios
✅ Cancelación y reprogramación de citas
✅ Persistencia local en localStorage
✅ Interfaz responsive y moderna

Tech Stack:

React 18 + TypeScript strict + TanStack Router + TanStack Query + Zustand + Tailwind CSS

Estado: ✅ Completado

Código:
https://github.com/Jodev97/OnedayOneapp/tree/master/02-medical-appointment

---

🎯 Lo Más Interesante: Spec-Driven Development + OpenSpec Skill

La diferencia esta vez fue el workflow estructurado con OpenSpec.

El Proceso:

1. /opsx:context → Generé especificaciones del proyecto (agents.md, project.md, assumptions.md)
2. /opsx😛ropose how user can reschedule an appointment → Creé proposal, design, specs detalladas
3. /opsx:apply reschedule-appointment → Implementé todas las tareas automáticamente
4. /opsx:archive → Documenté todo para referencia futura

Resultado:

• Cada feature tiene proposal + design + specs + tasks claros
• No hay alucinaciones porque el contexto está bien definido
• Al terminar, tengo documentación automática del proceso
• Escalable: agregar nuevas features es predecible y documentado

La Lección:

SDD + OpenSpec Skill = código de calidad + documentación automática

---

💡 Custom Skill Creada

Cree una skill personalizada en OpenSpec que:

✅ Automatiza creación de proposal/design/specs/tasks
✅ Mantiene consistencia con standards del proyecto
✅ Genera documentación de aprendizajes
✅ Escalable para nuevas features

Archivo:
.openspec/ con estructura completa

---

📊 Aprendizajes Clave

✅ SDD funciona aún mejor con skill personalizada

• Menos decisiones, más automatización
• Contexto del proyecto disponible siempre
• Specs claras = código mejor

✅ TanStack Query + Zustand es un combo poderoso

• Query maneja data (doctores, citas)
• Zustand maneja UI (modals, loading)
• Separación clara de responsabilidades

✅ OpenSpec documentation es gold

• Cada feature documentada automáticamente
• Fácil para onboarding de otros devs
• Referencia histórica de decisiones

⚠️ Desafío: Mantener sincronización entre specs y código

• Solución: Revisar specs antes de code review
• Archivo de aprendizajes al completar

---

🏗️ Estructura OpenSpec Resultante

openspec/
├── specs/ # Baseline del proyecto
│ ├── agents.md # Coding standards
│ ├── project.md # Architecture overview
│ └── assumptions.md # Constraints
├── changes/
│ ├── reschedule-appointment/ # Feature 1
│ │ ├── proposal.md
│ │ ├── design.md
│ │ ├── specs/
│ │ └── tasks.md
│ └── cancel-appointment/ # Feature 2
│ └── [estructura similar]
└── archive/ # Learning docs
├── reschedule-appointment/
└── cancel-appointment/

---

❓ ¿Por Qué Esto Importa?

Cuando trabajas con AI Agents (Claude, etc):

❌ Viejo:
"Haz una app de citas médicas"

→ Resultado: Código inconsistente, sin documentación clara

✅ Nuevo:
OpenSpec con skill personalizada

→ Resultado:
Specs claras → AI genera según contexto → Documentación automática

¿Interesado en SDD con OpenSpec?
¿Quieres usar la skill que creé?

Reacciona 🚀

#OneAppADay #AIDevelopment #SpecDrivenDevelopment #OpenSpec #React #TypeScript #SoftwareCraftsmanship

¡Increíble trabajo! La implementación de OpenSpec y su skill personalizada suena muy prometedora para mejorar el desarrollo guiado por especificaciones. La automatización en la generación de documentación es realmente un gran avance. Estoy seguro de que muchos encontrarán útil tu enfoque y estructura. ¡Sigue así! 🚀