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.