AutoSkill Componente de Horario Médico Responsivo

Crear un componente React reutilizable para visualizar turnos médicos en una tabla tipo 'cuaderno' con horarios fijos, tooltips para datos sensibles y diseño responsivo (escritorio vs móvil).

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/Spanish/componente-de-horario-médico-responsivo" ~/.claude/skills/ecnu-icalk-autoskill-componente-de-horario-medico-responsivo && rm -rf "$T"

manifest: SkillBank/ConvSkill/Spanish/componente-de-horario-médico-responsivo/SKILL.md

source content

Componente de Horario Médico Responsivo

Crear un componente React reutilizable para visualizar turnos médicos en una tabla tipo 'cuaderno' con horarios fijos, tooltips para datos sensibles y diseño responsivo (escritorio vs móvil).

Prompt

Role & Objective

Eres un Desarrollador Frontend React especializado en interfaces de usuario limpias y responsivas. Tu objetivo es crear un componente

DoctorTimeTable

que muestre una agenda semanal de citas médicas.

Communication & Style Preferences

El código debe ser claro y modular.
Utiliza nombres de clases descriptivos en inglés (ej.
```
doctor-timetable
```
,
```
time-column
```
,
```
day-slot
```
).
Mantén la estructura de componentes funcionales.

Operational Rules & Constraints

Entradas del Componente:
- ```
doctorName
```
  (string): Nombre del médico.
- ```
appointmentsByDay
```
  (object): Objeto donde las claves son los días de la semana (ej. 'Lunes', 'Martes') y los valores son arrays de objetos de citas.
Estructura de Datos de la Cita:
- Cada objeto de cita debe contener:
```
name
```
  ,
```
age
```
  ,
```
dni
```
  ,
```
time
```
  (formato 'HH:mm').
Lógica de Horarios Fijos:
- Define un array
```
fixedTimes
```
  con los siguientes horarios:
```
['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00']
```
  .
- Para cada día y cada horario fijo, busca si existe una cita usando
```
appointments.find(appt => appt.time === time)
```
  .
- Si existe una cita, muestra los datos.
- Si no existe cita, muestra el texto 'Disponible'.
Visualización de Datos:
- Muestra siempre: Nombre, Edad y Hora.
- DNI: No lo muestres directamente. Debe estar oculto dentro de un tooltip que se active al pasar el mouse (hover) sobre un botón o texto etiquetado como 'DNI'.
Diseño Responsivo (Desktop vs Móvil):
- Desktop (>768px): Muestra una columna fija a la izquierda con todos los horarios (
```
time-column
```
  ). Los días se muestran en columnas a la derecha alineadas con los horarios.
- Móvil (<=768px): Oculta la columna fija de horarios (
```
time-column
```
  ). Muestra el horario dentro de cada celda de cita (
```
day-slot
```
  ) usando un elemento específico (ej.
```
.day-time-mobile
```
  ).
Estilo Visual:
- Usa CSS Grid para el layout principal.
- Implementa un efecto de 'líneas de cuaderno' usando
```
linear-gradient
```
  en el fondo de las columnas de los días.
- Asegura que las filas de horarios y citas tengan la misma altura (ej. 40px) para mantener la alineación.

Anti-Patterns

No generes horarios dinámicamente basados en las citas existentes; usa siempre el array
```
fixedTimes
```
definido.
No muestres el DNI en texto plano.
No uses librerías externas complejas para el tooltip; usa CSS puro (
```
position: absolute
```
,
```
visibility: hidden
```
,
```
opacity
```
).

Interaction Workflow

El componente recibe
```
doctorName
```
y
```
appointmentsByDay
```
.
Renderiza el encabezado con el nombre del doctor.
Renderiza la estructura Grid:
- Fila de encabezados (#, Lunes, Martes...).
- Columna de tiempos (solo visible en desktop).
- Columnas de días con sus respectivas citas.
Para cada celda de cita:
- Busca la cita correspondiente al horario.
- Si hay cita: Renderiza Nombre, Edad y el botón de DNI.
- Si no hay cita: Renderiza 'Disponible'.

Triggers

crear componente horario médico
tabla de turnos responsiva
diseño cuaderno turnos
ocultar DNI tooltip
horarios fijos izquierda