openreader-frontend

Stars12

Forks3

UpdatedJuly 6, 2026 at 09:03

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

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

changshengyu

changshengyu/openreader

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

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

OpenReader Frontend

Use this skill for frontend work in frontend/.

Product contract

Upstream reader-dev behavior is the baseline for visible flows.
Current rewritten components, routes, composables, and tests are not proof of correctness.
Before refactoring a module, map upstream files, state defaults, transitions, and visible layout.
Old routes may remain as compatibility redirects; do not preserve wrong page structures as product architecture.

Reader-specific rules

Mobile reader tools are visible by default on entering the reader.
Center content tap toggles tool visibility.
Opening settings, catalog, bookmarks, source, shelf, search, cache, or book info must not hide the tool layer unless upstream does so for that exact branch.
Panel clicks must not pass through to content and toggle tools.
Mobile reader body must keep symmetric horizontal geometry and upstream typography semantics.
Preserve user-requested improvement: native continuous finger/wheel scrolling while click paging remains paged.
Preserve user-requested setting controls: minus/value/plus controls instead of high-mis-tap sliders.

Index/workspace rules

Re-align toward upstream Index + Reader scene structure.
Keep one shared BookInfo flow across shelf, search, and reader.
Keep sidebars, source management, local store, WebDAV, import, RSS, replace rules, and user/admin flows as workspace responsibilities unless a documented compatibility shim is needed.

Required checks before handoff

Run from frontend/:

npm test
npm run build

For UI behavior changes, run a real-browser smoke check using scripts/smoke/openreader-smoke.mjs or an equivalent Playwright probe and record viewport coverage.

More from this repository

same repository

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

frontend-ux-compat

changshengyu/openreader

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.

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

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

OpenReader Frontend

Use this skill for frontend work in frontend/.

Product contract

Upstream reader-dev behavior is the baseline for visible flows.
Current rewritten components, routes, composables, and tests are not proof of correctness.
Before refactoring a module, map upstream files, state defaults, transitions, and visible layout.
Old routes may remain as compatibility redirects; do not preserve wrong page structures as product architecture.

Reader-specific rules

Mobile reader tools are visible by default on entering the reader.
Center content tap toggles tool visibility.
Opening settings, catalog, bookmarks, source, shelf, search, cache, or book info must not hide the tool layer unless upstream does so for that exact branch.
Panel clicks must not pass through to content and toggle tools.
Mobile reader body must keep symmetric horizontal geometry and upstream typography semantics.
Preserve user-requested improvement: native continuous finger/wheel scrolling while click paging remains paged.
Preserve user-requested setting controls: minus/value/plus controls instead of high-mis-tap sliders.

Index/workspace rules

Re-align toward upstream Index + Reader scene structure.
Keep one shared BookInfo flow across shelf, search, and reader.
Keep sidebars, source management, local store, WebDAV, import, RSS, replace rules, and user/admin flows as workspace responsibilities unless a documented compatibility shim is needed.

Required checks before handoff

Run from frontend/:

npm test
npm run build

For UI behavior changes, run a real-browser smoke check using scripts/smoke/openreader-smoke.mjs or an equivalent Playwright probe and record viewport coverage.