platform-access

Enforces DI-based access to browser globals in Angular applications.

1|Updated Jan 14, 2024
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill platform-access-eyhenij
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: platform-access
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/platform-access
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill platform-access-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Direct calls to browser globals like window, document, and localStorage break server-side rendering and make Angular code untestable. This rule defines how to reach the runtime environment through dependency injection tokens instead of touching the global object directly. ## Core Features & Use Cases - DI Token Mapping: Replaces direct global calls with inject(WINDOW), inject(DOCUMENT), and PlatformService from @rt-tools/core, with a lookup table for common patterns like window.open and crypto.randomUUID. - SSR Pitfall Guidance: Documents failure modes under server-side rendering, such as the WINDOW token factory throwing when the document has no defaultView, and when a running SSR server is needed to verify a change. - Pure Function Handling: Specifies that *.logic.ts and *.util.ts files receive the window as a parameter since they have no dependency injection. - Use Case: When adding a feature that reads localStorage or checks the platform in an Angular service, load this rule to write the code with the correct tokens and avoid SSR crashes that only appear on a running page-rendering server. ## Quick Start Load the platform-access rule before editing any Angular code that touches window, document, localStorage, or PLATFORM_ID.

Frequently Asked Questions about platform-access

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I access window in an Angular service with SSR?

Inject the WINDOW token from @rt-tools/core instead of referencing window directly, casting to Window & typeof globalThis for constructors like IntersectionObserver. For services that must run without a DOM, take the window inside a method under a platform check rather than as a class field.

How to check if code is running in the browser in Angular?

Use inject(PlatformService).isPlatformBrowser instead of isPlatformBrowser(inject(PLATFORM_ID)) or typeof window checks. Presence-of-global checks break in environments where the global is stubbed, such as test runners.

Does localStorage access need a platform check in Angular SSR?

No environment check is needed around storage when using StorageService from @rt-tools/core, because it falls back to in-memory storage outside the browser automatically. Wrapping reads and writes in an isBrowser condition is dead code.

Why does the WINDOW token throw 'Window is not available'?

The token factory throws when the document has no defaultView, which happens in environments without a DOM. Services that must work without markup should inject the window inside a method guarded by a platform check, not as a class field.

How do pure functions access the window without dependency injection?

Files like *.logic.ts and *.util.ts have no DI, so they accept the window as a function parameter. The calling component or service injects WINDOW and passes it in.

When is direct access to browser globals allowed in this setup?

Direct access is deliberately kept only in three places: the anti-theme-flicker inline script in index.html, the startup failure handler in main.ts, and code inside page.evaluate in end-to-end specs. New exceptions require explicit owner agreement.