Tutoriales
Claude Opus 5.5: conservar los filtros al pulsar Atrás
Dale a Claude Opus 5.5 una secuencia de acciones y estados esperados para reparar la restauración de filtros.
Dale a Claude Opus 5.5 una secuencia de acciones y estados esperados para reparar la restauración de filtros. Guardar el valor es solo la mitad: dirección, controles seleccionados y resultados deben coincidir tras Atrás, Adelante, recargar y abrir un enlace compartido.
Decide qué significa retroceder un paso
Escribe primero un contrato breve del historial. En un catálogo hipotético, alguien aplica «azul», abre un producto y vuelve atrás. Debe regresar a la lista azul, no a una lista sin filtros. Escribir tres letras tampoco debería exigir tres pasos adicionales, salvo que ese comportamiento sea deliberado.
Una pregunta de un desarrollador de 2020 muestra la frustración inversa: cada cambio de pestaña añadía un paso. Demuestra una decisión de diseño, no una recomendación universal de sustituir todas las entradas.
| Acción | Política del ejemplo | Resultado esperado |
|---|---|---|
| Editar una búsqueda sin enviar | Borrador local | Atrás no reproduce cada tecla |
| Aplicar filtros significativos | Añadir una entrada | Recuperar el conjunto anterior |
| Corregir un URL predeterminado sin cambiar intención | Sustituir la entrada actual | Sin paso duplicado |
| Abrir un producto | Navegación normal | Volver a la lista filtrada |
Haz que el URL permita reconstruir la vista
Usa valores públicos y no sensibles, como categoría, color y orden. No incluyas datos de clientes ni secretos. Valida con una lista permitida, define valores predeterminados y decide cómo tratar claves repetidas. Conserva los parámetros de campaña ajenos al filtro; no reconstruyas toda la consulta de memoria.
En este URL ficticio, color y orden describen una lista reproducible:
/products?color=blue&sort=price-asc&utm_source=newsletterUn cambio dirigido debe sustituir color por green y conservar sort y utm_source. Utiliza URL y URLSearchParams, no concatenación manual. Mantén reglas coherentes para que una recarga o pestaña nueva reconstruya el estado sin la memoria de la anterior.
La guía History API de MDN diferencia añadir una entrada con pushState de actualizarla con replaceState. Estas llamadas no hacen el renderizado por ti. El recorrido del historial debe restaurar la vista; inicializa también la primera entrada. Si existe un enrutador, utiliza sus API compatibles en lugar de superponer otro controlador de historial.
Prompt de reparación por transiciones
Repara la restauración de filtros del catálogo proporcionado. Entradas: versión del enrutador, componente, analizador de URL, solicitudes y grabación del fallo. Identifica primero la fuente de verdad y los almacenes duplicados.
Secuencia deseada: catálogo sin filtro → aplicar azul → abrir producto → Atrás → lista azul → Atrás → lista sin filtro → Adelante → lista azul. El borrador de búsqueda no crea una entrada por tecla. Recarga y enlace compartido reconstruyen el estado aplicado.
Conserva parámetros ajenos al filtro. Define valores permitidos de color y orden y el tratamiento de claves repetidas o inválidas. Usa el enrutador existente cuando corresponda. Al recorrer el historial, actualiza controles y resultados sin crear otra entrada.
Evita que una respuesta antigua y lenta sobrescriba un filtro nuevo. Mantén claros los estados de carga y vacío. Restaura el desplazamiento deliberadamente cuando existan los resultados correctos.
Entrega un parche mínimo y una tabla con URL, controles, identidad de resultados y posición del historial por paso. No declares aprobadas pruebas de navegador sin ejecutarlas. Indica las entradas de ejecución que falten.Es una tarea propuesta para Opus, no un resultado medido. La guía oficial ayuda a formular la tarea, pero no demuestra que el parche funcione. La lectura y escritura del URL se puede verificar localmente; el historial y las solicitudes requieren pruebas de navegador.
Comprueba respuestas lentas
Vuelve atrás inmediatamente después de abrir un producto y después de esperar una respuesta lenta. Aplica azul y luego verde rápidamente: si azul termina después, no debe sustituir los resultados verdes. Cancela solicitudes obsoletas o rechaza respuestas mediante la identidad de la solicitud actual. No ocultes el fallo bloqueando toda navegación.
**¿Basta local storage?** Puede recordar una preferencia, pero no define cada entrada ni una vista compartible. No permitas que una preferencia guardada reemplace silenciosamente un URL explícito.
**¿Uso replaceState para todo?** Eliminaría pasos intermedios importantes del contrato anterior. Decide primero el comportamiento.
**¿Es lo mismo que revisar enlaces de campaña?** La auditoría de enlaces comprueba destinos y parámetros; aquí se verifica la restauración tras interactuar.
Crea la imagen correspondiente en Panelly Studio y prueba el destino real de la campaña durante todo el recorrido de visita y regreso. No se afirma que Panelly integre Opus ni implemente este catálogo ficticio.
