ui-ux-guidelines
Web Interface Guidelines
Dispatch hub for UI/UX rules. Load the relevant reference file for full details.
Rule Categories by Priority
| Priority | Category | Impact | Reference File |
|---|---|---|---|
| 1 | Accessibility | CRITICAL | accessibility-and-interaction |
| 2 | Touch & Interaction | CRITICAL | accessibility-and-interaction |
| 3 | Performance | HIGH | layout-typography-animation |
| 4 | Layout & Responsive | HIGH | layout-typography-animation |
| 5 | Typography & Color | MEDIUM | layout-typography-animation |
| 6 | Animation | MEDIUM | layout-typography-animation |
| 7 | Forms | HIGH | forms-content-checklist |
| 8 | Content & Navigation | MEDIUM | forms-content-checklist |
| 9 | Charts & Data | LOW | layout-typography-animation |
Workflows
<phase_1_review_ui>
Review UI code
- Read the target file(s).
- Load the relevant reference file(s) from
references/based on what the code contains. - Check each applicable rule. Report violations in the output format below. </phase_1_review_ui>
<phase_2_build_component>
Build new component
- Load
references/accessibility-and-interaction.md-- all components must meet CRITICAL rules. - Load additional references based on component type:
- Form component ->
references/forms-content-checklist.md - Layout/visual component ->
references/layout-typography-animation.md
- Form component ->
- Follow rules during implementation. </phase_2_build_component>
<phase_3_pre_delivery>
Pre-delivery checklist
- Load
references/forms-content-checklist.mdfor the full checklist. - Load
references/accessibility-and-interaction.mdfor the interaction checklist. - Walk through every checkbox before shipping. </phase_3_pre_delivery>
<anti_patterns>
Anti-patterns (flag these)
user-scalable=noormaximum-scale=1-- disables zoomonPastewithpreventDefault-- blocks pastetransition: all-- list properties explicitlyoutline-nonewithout:focus-visiblereplacement<div>/<span>with click handlers -- use<button>or<a><img>withoutwidthandheight(causes CLS)- Inline
onClicknavigation without<a>(breaks Cmd+click) - Large
.map()without virtualization (>50 items) - Hardcoded date/number formats -- use
Intl.* - Icon-only buttons without
aria-label
</anti_patterns>
Code Review Output Format
Group findings by file. Use file:line format (VS Code clickable). Be terse -- state issue and location. Skip explanation unless fix is non-obvious.
See template.md for the expected output format.
Reference Files
Load these as needed during reviews and implementation:
- Accessibility & Interaction -- Focus, ARIA, keyboard, touch targets, cursors, drag UX
- Layout, Typography & Animation -- Performance, responsive, fonts, color, motion, charts
- Forms, Content & Checklist -- Forms, content handling, navigation, dark mode, locale, hydration, pre-delivery checklist
More from jgamaraalv/ts-dev-kit
bullmq
BullMQ queue system reference for Redis-backed job queues, workers, flows, and schedulers. Use when: (1) creating queues and workers with BullMQ, (2) adding jobs (delayed, prioritized, repeatable, deduplicated), (3) setting up FlowProducer parent-child job hierarchies, (4) configuring retry strategies, rate limiting, or concurrency, (5) implementing job schedulers with cron/interval patterns, (6) preparing BullMQ for production (graceful shutdown, Redis config, monitoring), or (7) debugging stalled jobs or connection issues
46owasp-security-review
Review code and architectures against the OWASP Top 10:2025 — the ten most critical web application security risks. Use when: (1) reviewing code for security vulnerabilities, (2) auditing a feature or codebase against OWASP categories, (3) providing remediation guidance for identified vulnerabilities, (4) writing new code and needing secure coding patterns. Triggers: 'review for security', 'OWASP audit', 'check for vulnerabilities','security checklist', 'is this code secure', 'security review', 'fix vulnerability'.
42ioredis
ioredis v5 reference for Node.js Redis client — connection setup, RedisOptions, pipelines, transactions, Pub/Sub, Lua scripting, Cluster, and Sentinel. Use when: (1) creating or configuring Redis connections (standalone, cluster, sentinel), (2) writing Redis commands with ioredis (get/set, pipelines, multi/exec), (3) setting up Pub/Sub or Streams, (4) configuring retryStrategy, TLS, or auto-pipelining, (5) working with Redis Cluster options (scaleReads, NAT mapping), or (6) debugging ioredis connection issues. Important: use named import `import { Redis } from 'ioredis'` for correct TypeScript types with NodeNext.
35nextjs-best-practices
Next.js App Router best practices — file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling. Use when writing, reviewing, or debugging Next.js App Router code.
29service-worker
Service Worker API implementation guide — registration, lifecycle management, caching strategies, push notifications, and background sync. Use when: (1) creating or modifying service worker files (sw.js), (2) implementing offline-first caching (cache-first, network-first, stale-while-revalidate), (3) setting up push notifications or background sync, (4) debugging service worker registration, scope, or update issues, (5) implementing navigation preload, (6) user mentions 'service worker', 'sw.js', 'offline support', 'cache strategy', 'push notification', 'background sync', 'workbox alternative', or 'PWA caching'.
25composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
23