メニュー
Build localized, accessible, premium reader/admin UI with 2026 design standards. Features OKLCH colors, View Transitions, scroll-aware components, and mutual exclusivity panels.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Orchestrate static analysis using Codacy. Required PR check on this repo. Use for querying PR analysis, triaging issues, fixing (not suppressing) findings, and local analysis. See SKILL.md for fix patterns and the required-check policy.
Create AGENTS.md files with production-ready best practices. Activate when creating new AGENTS.md or implementing quality gates.
Comprehensive GitHub PR review and automated fix pipeline. Takes a PR number or auto-detects from current branch, runs code review, static analysis, security audit, and quality checks, then produces a structured report and auto-fixes must-fix issues. Activate for "review PR", "fix PR issues", "PR quality check", "review and fix PR #123".
Invoke for complex multi-step tasks requiring intelligent planning and multi-agent coordination. Use when tasks need decomposition, dependency mapping, parallel/sequential/swarm execution strategies, or coordination of multiple specialized agents with quality gates.
Break down complex tasks into atomic, executable goals. Activate for multi-step feature planning, agent coordination, or request decomposition.
Design guidance for AI coding agents. 23 commands, 44 deterministic detector rules, and live browser iteration for AI-generated frontend design. Activate for UI/UX design work, anti-pattern detection, or design quality audits.
SOC 職業分類に基づく
| version | 2.1.0 |
| name | reader-ui-ux |
| description | Build localized, accessible, premium reader/admin UI with 2026 design standards. Features OKLCH colors, View Transitions, scroll-aware components, and mutual exclusivity panels. |
| category | workflow |
| allowed-tools | Read Write Edit Grep Glob |
| license | MIT |
reader-ui-ux v2.1.0Purpose: Deliver premium, intentional, localized, accessible reader/admin UX for d.o.EPUB Studio with 2026 modern standards.
oklch() for all color tokens to ensure perceptually uniform lightness and support for wide-gamut P3 displays.viewTransition: true). Assign view-transition-name: prevent-flicker to Sidebar and BottomTabBar to prevent nav flickering during page transitions — exclude them from root cross-fade with animation: none in @view-transition.AppShell for initial auth resolution.| Resource | Location |
|---|---|
| Design Tokens | plans/archive/008-design-tokens-v2.md |
| Global Styles | apps/web/src/styles/globals.css |
| UI Components | apps/web/src/components/ui/ |
| Animation Guide | references/animation-guide.md |
| Design Tokens Detail | references/design-tokens.md |
| Regression Prevention | references/regression-prevention.md |
Use Impeccable for all UI work. Project tokens (globals.css) are authoritative.
| Command | When |
|---|---|
/impeccable craft <Comp> | New component: shape → build → iterate |
/impeccable audit <area> | Technical quality: a11y, performance, responsive |
/impeccable polish <area> | Final pass before shipping |
/impeccable critique <area> | UX review: hierarchy, clarity, emotion |
/impeccable shape <area> | Plan UX/UI before writing code |
/impeccable harden <area> | Error handling, i18n, text overflow |
/impeccable adapt <area> | Responsive/device adaptation |
/impeccable optimize <area> | Performance improvements |
CI: npx impeccable detect --json . runs in quality gate. See DESIGN.md for anti-patterns.
/impeccable shape to plan UX/UIen/de/fr catalogs/impeccable audit before merge/impeccable polish final passprevent-flicker on nav containers)Promise.all for spine/chapter operations to reduce load time.VirtualList component for smooth scrolling.dark: utilities: Semantic tokens already adapt to dark/sepia themes via globals.css CSS variables. Avoid redundant dark: Tailwind prefixes.