openreader-frontend

스타12

포크3

업데이트2026년 7월 6일 09:03

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

changshengyu

changshengyu/openreader

GitHub 저장소 열기 Creator 저장소 보기

다운로드

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.

이 저장소의 다른 Skills

같은 저장소

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.