frontend-ux-compat

Étoiles12

Forks3

Mis à jour6 juillet 2026 à 09:03

Frontend UX compatibility workflow for OpenReader. Use when changing Vue pages, routing, Pinia stores, reader UI, bookshelf, settings, import, WebDAV, sidebars, touch gestures, keyboard handling, or local persisted state.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Source

changshengyu

changshengyu/openreader

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	frontend-ux-compat
description	Frontend UX compatibility workflow for OpenReader. Use when changing Vue pages, routing, Pinia stores, reader UI, bookshelf, settings, import, WebDAV, sidebars, touch gestures, keyboard handling, or local persisted state.

Frontend UX Compatibility

Use this skill for user-facing frontend changes.

Workflow

Identify upstream reader-dev UI behavior and files.
Identify current OpenReader UI behavior and files.
Preserve routes and query parameters where possible; otherwise add compatibility redirects.
Preserve reading progress and local persisted state semantics.
Preserve keyboard, mouse, touch, and panel coexistence behavior for reader pages.
Document intentional UX differences.
Add or update unit tests and a real-browser smoke check.

Reader mobile minimum

Tool layer visible by default.
Center tap toggles tool layer.
Opening settings/catalog/bookmarks/source/shelf/search/cache/book info does not hide tools unless upstream does.
Panel click does not pass through.
Horizontal content whitespace remains symmetric within 1px.

Checks

Run:

cd frontend && npm test
cd frontend && npm run build

Use scripts/smoke/openreader-smoke.mjs or an equivalent Playwright probe for affected flows.

Plus depuis ce dépôt

même dépôt

api-contract-compat

changshengyu/openreader

API compatibility workflow for OpenReader. Use when changing routes, Gin handlers, auth, request bodies, query parameters, response schemas, status codes, API errors, or frontend API clients.

2026-07-0612

booksource-parser-compat

changshengyu/openreader

Book source and parser compatibility workflow for OpenReader. Use when changing online sources, CSS selectors, XPath-like rules, RSS, chapter parsing, content cleaning, import preview/import, or local book parsing.

2026-07-0612

data-migration-compat

changshengyu/openreader

Data compatibility workflow for OpenReader. Use when changing GORM models, SQLite migrations, cache, library, uploads, local store, backup/restore, WebDAV storage, or persistent settings.

2026-07-0612

openreader-backend

changshengyu/openreader

Backend architecture guardrails for OpenReader Go/Gin/GORM/SQLite changes. Use when modifying handlers, services, models, migrations, WebSocket sync, WebDAV, backup, imports, cache, or any backend API behavior.

2026-07-0612

openreader-docker-release

changshengyu/openreader

Local Docker release workflow for OpenReader. Use before building or publishing GHCR images, tagging releases, validating image metadata, or reporting Docker release progress.

2026-07-0612

openreader-frontend

changshengyu/openreader

Frontend guardrails for OpenReader Vue 3, Pinia, Element Plus, reader UI, Index workspace, mobile behavior, routing, and upstream visual/interaction alignment.

2026-07-0612

name	frontend-ux-compat
description	Frontend UX compatibility workflow for OpenReader. Use when changing Vue pages, routing, Pinia stores, reader UI, bookshelf, settings, import, WebDAV, sidebars, touch gestures, keyboard handling, or local persisted state.

Frontend UX Compatibility

Use this skill for user-facing frontend changes.

Workflow

Identify upstream reader-dev UI behavior and files.
Identify current OpenReader UI behavior and files.
Preserve routes and query parameters where possible; otherwise add compatibility redirects.
Preserve reading progress and local persisted state semantics.
Preserve keyboard, mouse, touch, and panel coexistence behavior for reader pages.
Document intentional UX differences.
Add or update unit tests and a real-browser smoke check.

Reader mobile minimum

Tool layer visible by default.
Center tap toggles tool layer.
Opening settings/catalog/bookmarks/source/shelf/search/cache/book info does not hide tools unless upstream does.
Panel click does not pass through.
Horizontal content whitespace remains symmetric within 1px.

Checks

Run:

cd frontend && npm test
cd frontend && npm run build

Use scripts/smoke/openreader-smoke.mjs or an equivalent Playwright probe for affected flows.