scoop-ui-refactor
Refactorizar la interfaz de usuario de la plataforma de noticias Scoop
La plataforma de noticias Scoop tiene un frontend desordenado con espacio vertical excesivo y patrones de diseño inconsistentes. Esta skill proporciona un flujo de trabajo estructurado para comprimir diseños, mejorar la densidad, agregar navegación con snap-scroll y aplicar una política estricta de no usar emojis en todo el frontend.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「scoop-ui-refactor」。 Refactor the Scoop home page to be more compact
預期結果:
- • Historia principal comprimida a título + resumen + fila de acciones
- • Bloques narrativos movidos a tarjetas de resumen compactas
- • Secciones de contacto convertidas a filas de acciones cortas
- • Controles de modo de vista permanecen visibles y separados
- • Todas las funciones existentes preservadas (modos de vista, filtros, modales)
正在使用「scoop-ui-refactor」。 Add TikTok-style snap scrolling to the feed
預期結果:
- • Implementado snap-y snap-mandatory en el contenedor de scroll
- • Agregada navegación con rueda, táctil y teclas de flecha
- • Usado guard isAnimating para prevenir recorte del scroll
- • Encabezado global permanece accesible en los límites del scroll
- • Acciones del feed y modales funcionan como antes
正在使用「scoop-ui-refactor」。 Clean up emojis from the codebase
預期結果:
- • Escaneados componentes de UI, logs y archivos de documentación
- • Reemplazado emoji con componentes de iconos o etiquetas de texto
- • Verificado que no quedan emoji en el código fuente
- • Aplicada política consistente de no usar emoji en todas las superficies
安全審計
安全This is a pure prompt-based skill containing only workflow instructions for UI refactoring. No executable code, scripts, network calls, filesystem access, or external command execution capabilities. The static analyzer triggered false positives on markdown formatting and technical terminology. All 44 findings are dismissed as false positives.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
Refactorizar la interfaz de usuario de la plataforma de noticias
Comprimir diseños y agregar snap-scroll para mejorar el engagement del usuario y la densidad de contenido en la plataforma de noticias Scoop
Mejorar la interacción del globo
Agregar estados claros de enfoque por país e información de fuentes para hacer el globo interactivo más utilizable para la exploración de noticias
Aplicar consistencia de marca
Eliminar emojis de la interfaz y documentación para mantener una apariencia profesional y consistente de la marca en todas las superficies
試試這些提示
Refactorizar la página de inicio de Scoop para aumentar la densidad. Comprimir la historia principal en título + resumen + fila de acciones. Mover los bloques narrativos en tarjetas de resumen compactas. Mantener visibles y separados los controles de modo de vista.
Agregar snap-scroll al feed de Scoop. Usar secciones de vista completa con snap-y snap-mandatory. Soportar rueda, táctil y teclas de flecha. Mantener accesible el encabezado en el scroll de nivel superior. Preservar modales y acciones del feed.
Mejorar el UX de la vista del globo en Scoop. Agregar un encabezado claro de enfoque por país mostrando el recuento de fuentes y las fuentes principales. Agregar una acción de reinicio visible. Eliminar todas las banderas de emoji de países.
Eliminar todo uso de emoji del frontend de Scoop. Usar ripgrep para encontrar emojis en strings de UI, logs y docs. Reemplazar con iconos o etiquetas de texto. Confirmar que no quedan emojis en el código.
最佳實務
- Usar padre flex con min-h-0 para prevenir que el snap-scroll recorte el contenido
- Probar snap-scroll con rueda, táctil y teclas de flecha para verificar que todos los métodos de entrada funcionan
- Ejecutar las pruebas existentes después de la refactorización para confirmar que no hay regresiones en modales y filtros
避免
- Usar h-screen fijo sin considerar el diseño circundante (causa recorte del contenido)
- Bloquear todos los eventos de scroll en lugar de solo prevenir el default durante las transiciones de snap
- Modificar emoji en solo una ubicación sin verificar logs y docs