SkillsAdd

d-o-hub/github-template-ai-agents · Archived

reader-ui-ux

Build localized, accessible reader/admin UI with responsive layouts, telemetry, and state management. Use this skill when building React screens, polishing UX, or implementing responsive layouts for reader or admin interfaces — even if they just say "fix the UI" or "make it responsive". Generic pattern for any document reader application. Not for document-rendering-and-locators.

First seen Jul 22, 2026

Installation

$ npx skills add d-o-hub/github-template-ai-agents --skill reader-ui-ux
View on skills.sh ↗ GitHub repository ↗

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

parallel-execution Same source
d-o-hub/github-template-ai-agents

Execute multiple independent tasks simultaneously using parallel agent coordination to maximize…

1 installs
task-decomposition Same source
d-o-hub/github-template-ai-agents

Break down complex tasks into atomic, actionable goals with clear dependencies and success crit…

1 installs
anti-ai-slop Same source
d-o-hub/github-template-ai-agents

Apply this skill to avoid generic "AI slop" in UI, UX, and copy. Triggers: "make this feel less…

1 installs
verification-template Same source
d-o-hub/github-template-ai-agents

Template for creating portable domain-specific verification skills.

1 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
azure-enterprise-infra-planner Shared topics
microsoft/azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…

402.8K installs

Also in this package

Other skills from d-o-hub/github-template-ai-agents · top by installs.

npx skills add d-o-hub/github-template-ai-agents
parallel-execution 1 task-decomposition 1 anti-ai-slop 1 verification-template 1 ui-ux-optimize 1 test-runner 1 migration-refactoring 1 intent-classifier 1 document-rendering-and-locators 1 cicd-pipeline 1

Browse all from d-o-hub/github-template-ai-agents

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 2
License LICENSE
Default branch main
Open issues 0
Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Version0.2.10
LicenseMIT

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,857 B
  • docs SUMMARY.md 403 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

Reader UI/UX

Purpose: deliver intentional, localized, accessible reader/admin UX.

When to Use

  • Modifying reader/admin React screens, layout primitives, or shared UI components.
  • Adding localization copy, accessibility improvements, or design polish.
  • Building locale switchers, typography controls, or comment/annotation panels.

Workflow

  1. Define experience -- confirm viewport-specific layout (mobile drawer vs desktop side panels) + theme rules.
  2. Localization -- add strings to locale catalogs, ensure fallback, surface locale switcher.
  3. Accessibility -- keyboard focus, ARIA labels, reduced motion, semantic regions.
  4. State -- use state management selectors, avoid prop drilling, memoize heavy renders.
  5. Observability -- log key UI actions with trace IDs.
  6. Testing -- add component tests; E2E coverage for primary flows.

Checklist

  • Layout responsive (mobile/tablet/desktop) with deliberate spacing.
  • Strings localized and locale header updated.
  • Error states use ErrorBoundary + inline alerts.
  • Async effects cancel via AbortController; cleanup functions implemented.
  • UI interactions include aria-labels + focus traps where applicable.

See Also

  • anti-ai-slop — Avoid AI slop in UI/UX
  • css-render-performance — CSS render performance optimization

Rationalizations

Rationalization Reality
"Accessibility is a nice-to-have, not a requirement" Legal compliance (WCAG, ADA, Section 508) and user inclusion make it mandatory.
"I'll add localization later after the UI is done" Retroactive localization is costly; string extraction and fallback logic should be designed upfront.
"Prop drilling is simpler than state management" Prop drilling breaks at scale; memoized selectors prevent unnecessary re-renders and deep coupling.

Red Flags

  • Reader UI built without keyboard navigation support
  • Locale strings hardcoded in components instead of catalog
  • Missing ErrorBoundary or AbortController cleanup on async effects

References

  • references/responsive-patterns.md - Responsive layout patterns
  • references/accessibility-checklist.md - WCAG compliance checklist

Voice & Context

  • Default: professional + blog
  • Reference: voice-profiles skill for definitions and auto-detection.