Enforce Frontend Standards for React Renderer Agents

Where this fits

You're updating a React renderer in a desktop Electron app. The codebase has strict patterns: no direct window.api.*, all remote state through React Query service hooks, design tokens from @ajh/ui. A plain coding agent can happily inline window.api or add a useState fetch, creating hidden tech debt. This skill gives the agent the renderer's rules before it touches apps/desktop/src/renderer/**.

Why agents benefit

• Guardrails at edit time: ESLint-enforced rules make violations like direct window.api.* immediately detectable, so agents self-correct before review.
• Correct async caching: Understands React Query key prefix behavior and invalidation, preventing stale data after mutations.
• Consistent UI/token usage: Loads design/motion token rules and @ajh/ui primitives, so UI output follows the system.
• i18n and a11y awareness: Agents produce internationalized, accessible markup without being explicitly asked.
• Feature isolation: Keeps renderer changes scoped, reducing merge conflicts and regressions.

Practical scenarios

Refactoring a feature to service hooks

An agent needs to move a screen from direct window.api calls to a service hook. With the skill, it knows the right layer (renderer/services/) and avoids ESLint errors.

Fixing React Query invalidation

After a mutation, cached lists don't refresh. The skill explains prefix invalidation and the key factory trap: a key ending in undefined won't match typed query keys, and exact: true doesn't save it. The agent fixes invalidation with the correct shorter prefix or predicate.

Applying design tokens to a new component

Agent builds UI with hardcoded colors/motion. The skill loads token files and @ajh/ui primitives, so the component matches the design system and accessibility expectations.

Add it to your agent workflow

Install the skill via CLI:

npx skills add saeedkolivand/ai-job-hunter-app --skill frontend-standards

Add a rule in your agent config: load frontend-standards when a task touches apps/desktop/src/renderer/**. For example, in an AGENTS.md or skill router:

Use frontend-standards for any change under apps/desktop/src/renderer/**.

Then start a task like: "Add a new settings tab using the renderer standards."

Compare before adopting

Evaluate the skill beyond its star count: check if docs/DESIGN_SYSTEM.md and docs/PATTERNS.md are current, and whether the ESLint config actually enforces the rules in the README. Compare with a custom prompt-based standards file if your renderer has no established contracts. The main workflow fit is for agents working in Electron renderers with React Query and a centralized UI kit.

Why it is worth tracking

The skill is precise about the code paths it covers, which is a good quality signal for agent skills. With 52 stars and an installable CLI, it is small but focused; monitor it for changes to the service-hook and React Query sections, because those rules have the highest correctness impact. Re-evaluate when the renderer's dependency set changes or the docs stop matching the repository's actual exports. For a quick reference, see the OpenAgentSkill listing at https://www.openagentskill.com/skills/saeedkolivand-frontend-standards.