Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

frontend-standards

Estrellas20

Forks0

Actualizado1 de julio de 2026, 00:12

React renderer standards — ports & adapters (service hooks), design tokens, motion tokens, @ajh/ui primitives, i18n, feature isolation, React Query, a11y. Load for changes under apps/desktop/src/renderer/**.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

saeedkolivand

saeedkolivand/ai-job-hunter-app

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

SKILL.md

readonly

Más de este repositorio

mismo repositorio

author-contract

saeedkolivand/ai-job-hunter-app

Shared write-side contract every domain AUTHOR imports — how to implement reliably, the smallest-diff rule, validation gates, and the never-approve-your-own-work rule. The write-side mirror of token-efficiency. Load at the start of any implementation task.

2026-07-0220

token-efficiency

saeedkolivand/ai-job-hunter-app

Shared context-discipline contract every agent imports — context-source priority, read budget, confidence-stop, the severity rubric, and terse output. Load at the start of any review or implementation task.

2026-07-0220

coding-standards

saeedkolivand/ai-job-hunter-app

General repo rules enforced by ESLint/TypeScript/CI — PRs-only, never bypass lint, import ordering, type imports, path privacy, commit format. Load for any code change.

2026-07-0120

extension-standards

saeedkolivand/ai-job-hunter-app

Browser-extension + bridge standards — MV3 (Chrome + Firefox), least-privilege permissions, the loopback pairing-token auth model, the shared TS↔Rust wire protocol, and the Chrome Web Store + Firefox AMO store-policy + pre-submission checklist. Load for changes under apps/extension/**, extension_bridge/, and the extension protocol.

2026-07-0120

rust-standards

saeedkolivand/ai-job-hunter-app

Rust/Tauri backend standards — L0–L3 layers, centralized platform/net/error ownership, Rust-first business logic, registries, error handling. Load for changes under apps/desktop/src-tauri/src/**.

2026-07-0120

tauri-standards

saeedkolivand/ai-job-hunter-app

Tauri shell standards — the IPC 5-step capability flow, command implementation pattern, and capability/permission wiring. Load for new IPC capabilities and changes to commands.rs / tauri-client.ts / capabilities/.

2026-07-0120

name	frontend-standards
description	React renderer standards — ports & adapters (service hooks), design tokens, motion tokens, @ajh/ui primitives, i18n, feature isolation, React Query, a11y. Load for changes under apps/desktop/src/renderer/**.

Frontend standards (mostly ESLint-enforced)

Authoritative: docs/DESIGN_SYSTEM.md, docs/PATTERNS.md.

Ports & adapters (HIGH if violated)

No window.api.* in features/, routes/, components/ — use service hooks from renderer/services/ (React Query). ESLint errors on direct access.
Data fetching — React Query via service hooks only; no useState + useEffect for remote data.

React Query & async mutations (HIGH on correctness)

Invalidation must match — invalidateQueries({ queryKey }) is a prefix match; a key factory that appends a trailing undefined/optional segment (keys.x.y() → ['x','y',undefined]) will not match the typed queries (['x','y','viewed']). Fix it with the correct key: the shorter prefix (['x','y']), or a deliberate predicate — note exact: true does not fix it (an exact match on the wrong shape ['x','y',undefined] still misses ['x','y','viewed']). After a mutation, confirm the key you invalidate hits the queries that render the affected UI (#486: shipped this twice → stale viewed/saved badges).
Mutations — never show success / apply optimistic state / emit tracking events before the mutation resolves. Two cases: (a) awaited — await mutateAsync(), then run the success effects, in try/catch; (b) detached (void/fire-and-forget) — attach a .catch surfacing a fixed @ajh/translations error key (never raw err.message) and put the success effects in .then, not on the line after the call.
Nullable at the IPC boundary — guard a contract-optional/null value (a field a command may return absent) before string/array ops (.toLowerCase()/[0]/.split()).

Design system

Tokens — text-brand/bg-brand/border-brand/ring-brand; CSS vars var(--color-brand). No [#RRGGBB] in className.
Motion — import { transition } from '@ajh/ui' (.fast/.normal/.relaxed/.slow/.spring/.modal/.overlay); no inline { duration, ease }.
Primitives — @ajh/ui (Button, Input, TextArea, SelectDropdown, ModalShell, GlassCard, EmptyState, …). No raw <button>/<select>/<textarea> (exception: <input type="range|file|checkbox|radio|hidden">).
Imports — import @ajh/ui directly, not @/components/ui/* (except UpdateBanner).

i18n (HIGH if user-facing text is unwrapped)

Import useTranslation / TFunction from @ajh/translations, never react-i18next directly (the renderer init shim is @/i18n). All user-facing strings localized.

Accessibility (WCAG 2.2 AA floor — non-negotiable; the design-audit recurring gaps)

Visible focus — every interactive element has a :focus-visible ring (≥2px, outline-offset, visible against its bg). NEVER strip native focus with all: unset / border: none / background: none without replacing it; a focusable custom widget needs more than a stroke/color shift.
Reduced motion — gate every animation/transition behind @media (prefers-reduced-motion: reduce); a blanket * { animation: none } must NOT also kill focus-visible transitions. Reveal-on-scroll under reduce: drop the translate (no positional jump), keep opacity.
Contrast — meet AA (4.5:1 normal, 3:1 for ≥24px/bold). Muted text on light/"paper" backgrounds is the usual failure (the audit found ≈3.3–3.8:1) — darken the muted token, don't ship it.
Real controls — prefer an @ajh/ui primitive (Button/Switch/…) over a hand-rolled control; raw <button> is banned in the renderer (see Primitives). If a click handler must live on a <div>/<span>, it needs role="button" + React tabIndex={0} + an onKeyDown Enter/Space handler. Icon-only controls need aria-label (not just title); toggle/filter/segmented controls need aria-pressed.
Dialogs/overlays — a custom modal needs role="dialog"/"alertdialog" + aria-modal="true" + aria-labelledby/-describedby + focus management/trap; transient banners get role="status" + aria-live.
SVG — informative SVG: role="img" + aria-label on the root, no conflicting roles on children; decorative SVG aria-hidden="true". A focusable SVG node needs a real visible focus indicator.
aria reference guards — aria-controls/aria-* id references use the same render guard as the element they point to (no reference to never-rendered DOM); Enter/Space activation gates on the same enable/disable predicate as the click.

Structure

features/* own one route — never import across feature dirs.
3+ states → a state machine in lib/machines/ via useMachine.
File placement per CLAUDE.md §9.

External standards & best-practices (verified 2026-06-19)

React 19 + React Compiler 1.0 GA (2025-10-07). WCAG 2.2 AA is the only a11y target (3.0 is a 2026 Working Draft — not yet). Core Web Vitals triad unchanged: LCP / INP / CLS.

React 19 — Actions/useActionState/useOptimistic for async transitions; use(resource) reads a Promise/Context (suspends); ref is a plain prop (forwardRef deprecated). https://react.dev/blog/2024/12/05/react-19
You Might Not Need an Effect — NO effect for: deriving data for render (compute in body / useMemo), resetting state on prop change (use key), or event-driven side effects (put in the handler). Effect only to sync with an external system. Test: "because shown" → effect; "because user did X" → handler. https://react.dev/learn/you-might-not-need-an-effect
React Compiler 1.0 — build-time auto-memoization; useMemo/useCallback/memo become measured escape hatches, not defaults; requires Rules-of-React (run the ESLint plugin). https://react.dev/blog/2025/10/07/react-compiler-1
WCAG 2.2 AA most-relevant SC for a keyboard-driven SPA: 2.4.7 Focus Visible + 2.4.3 Focus Order; 2.4.11 Focus Not Obscured (new 2.2 — sticky chrome must not hide focus); 2.5.8 Target Size ≥ 24×24px (new); 2.5.7 Dragging Movements has a single-pointer alternative; 4.1.2 Name/Role/Value; honor prefers-reduced-motion. https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/
ARIA APG — build dialog/menu/tabs/combobox/listbox/disclosure/accordion/tooltip to the APG roles+states+keyboard spec; don't hand-roll. https://www.w3.org/WAI/ARIA/apg/patterns/
Core Web Vitals (p75): LCP ≤ 2.5s · INP ≤ 200ms · CLS ≤ 0.1 (INP replaced FID in 2024 — ignore SEO blogs claiming a 2.0s LCP). https://web.dev/articles/vitals

Common mistakes: effects for derived state / event reactions; hand-sprinkling useMemo/useCallback with Compiler on (or ripping existing ones out); keeping forwardRef boilerplate on new components; custom widgets missing role/state/name or APG keyboard handling; targets < 24×24px or focus obscured by sticky chrome; ignoring prefers-reduced-motion; treating WCAG 3.0/APCA as a current requirement.