메뉴
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 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
| 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.