agentleFS
Sign inStart free
d-o-hubd-o-hub/github-template-ai-agents/.agents/skills/reader-ui-ux/SKILL.md

reader-ui-ux

Skill2 starsChanged 10 days agoMITView on GitHub

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.

The file

Create a free account to mount
Files
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

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

Rationalizations

RationalizationReality
"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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free