一键导入
privacy
// Action-oriented guidelines for privacy by design, data minimization, third-party audits, and modern browser privacy APIs. Use this skill when dealing with user data, cookies, tracking, third-party scripts, or browser privacy APIs.
// Action-oriented guidelines for privacy by design, data minimization, third-party audits, and modern browser privacy APIs. Use this skill when dealing with user data, cookies, tracking, third-party scripts, or browser privacy APIs.
Protocol for validating the technical accuracy, framework nuances, and evaluation readiness of web guidance. Use this skill when assigned to validate or review a guide, demo, or expectations file.
Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: - UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filters, anchor positioning, container queries, `:has()`, `:user-valid`. - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization. - System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets. - Frameworks: Adapting layout/styles in React, Vue, Angular. - General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc. DO NOT trigger for: - Backend: Database SQL, ORMs, Express API routes. - Pipelines: CI/CD deployment, Docker, Actions. - Generic: Local scripts (Python/Go tools), ESLint, Git.
Best practices for authoring guidance. Use this skill any time you're writing or reviewing `guide.md` files.
Best practices for creating use cases for a given feature. This is the first step in creating a new guide. Use this skill any time you're writing or reviewing a use case under the guides/ directory.
Build and publish Chrome Extensions using Manifest V3 best practices. Use this skill whenever the user asks to create, modify, debug, or understand Chrome browser extensions, add-ons, or anything involving the Chrome Extensions API. Trigger on mentions of: 'Chrome extension', 'browser extension', 'manifest.json', 'content script', 'service worker' (in browser context), 'popup' (in browser extension context), 'side panel', 'chrome.* API', 'declarativeNetRequest', 'omnibox', 'context menu' (in extension context), or any request to build functionality that integrates with the Chrome browser UI. Also trigger for publishing to the Chrome Web Store: 'publish extension', preparing an extension for publishing, responding to a review rejection, writing permission justifications, or drafting a privacy policy.
Compiling C and C++ for the modern web using WebAssembly. Use this skill when you need to port C++ code, build C++ libraries with Emscripten, or set up high-performance C++ components in the browser.
| name | privacy |
| description | Action-oriented guidelines for privacy by design, data minimization, third-party audits, and modern browser privacy APIs. Use this skill when dealing with user data, cookies, tracking, third-party scripts, or browser privacy APIs. |
Web application architects and developers must treat privacy not as an compliance afterthought, but as a foundational architectural design requirement. Modern web platforms are shifting away from implicit tracking toward explicit, user-consented, browser-mediated identity and permission exchanges.
Reducing the digital footprint to limit breach exposure and foster user trust.
aria-describedby to link inputs to their explanations.Clear-Site-Data HTTP header upon logout to wipe client-side cookie caches and local storage.Send this header on the page after logout confirmation.
Clear-Site-Data: "cache", "cookies", "storage"
<div>
<label for="email">Email address*</label>
<input id="email" type="email" name="email" required aria-describedby="whyemail">
<a href="#whyemail">Why do we need this?</a>
<aside id="whyemail">
We need this email to send password resets. We will not use it for marketing unless you opt-in.
</aside>
</div>
Limiting leakage introduced by external scripts, embeds, and tracking pixels.
strict-origin-when-cross-origin or no-referrer) to prevent leaking sensitive URL query parameters.Permissions-Policy to lock down powerful APIs (geolocation, camera) globally or for subframes.Content-Security-Policy-Report-Only for continuous automated audits of where third-party scripts are attempting to send data.Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: accelerometer=(), camera=(), fullscreen=*
Architecting for a web without unpartitioned third-party cookies.
Partitioned attribute for 1:1 embeds that do not share state across top-level sites.requestStorageAccess()) via direct user interaction (click/keypress).SameSite=None cookies as they are being systematically blocked by modern browser engines.Set-Cookie (HTTP)Set-Cookie: session_id=abc123; SameSite=None; Secure; Path=/; Partitioned; HttpOnly
document.getElementById('login-btn').addEventListener('click', async () => {
try {
const hasAccess = await document.hasStorageAccess();
if (!hasAccess) {
await document.requestStorageAccess();
}
// Access granted: unpartitioned cookies are now attached to fetch()
} catch (err) {
console.error('Storage access denied', err);
}
});
| Mechanism | Scope | Requires Interaction | Use Case |
|---|---|---|---|
| CHIPS | 1:1 Partitioned | No | Embeds (Maps, Widgets) |
| Storage Access API (SAA) | Cross-site | Yes | SSO Portals, Analytics |
| FedCM | Identity Federation | Yes | "Sign In with..." |
Heuristic Rule: Use CHIPS for isolated widgets (un-shared state), and SAA for shared identity state requiring explicit user consent.
Moving from opaque navigational redirects to explicit native UI-mediated federation.
try {
const credential = await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/fedcm.json",
clientId: "rp-client-id-123"
}]
}
});
authenticateWithBackend(credential.token);
} catch (error) {
console.error("FedCM login failed", error);
}
Shifting from passive device broadcasting to explicit feature inspection.
'createImageBitmap' in window) over User-Agent string parsing.Accept-CH header.Vary header (e.g., Vary: Sec-CH-UA-Platform) if your server caches vary based on UA-CH.navigator.userAgent for non-critical logic.// AVOID: if (navigator.userAgent.includes("Chrome")) ...
if ('createImageBitmap' in window) {
// Use modern API
}
Using unforgeable headers to reject unauthorized cross-origin requests server-side.
Sec-Fetch-Site, Sec-Fetch-Mode, and Sec-Fetch-Dest headers before processing state-changing requests.Sec-Fetch-Site) is cross-site and the mode is not navigate.app.use((req, res, next) => {
const site = req.get('Sec-Fetch-Site');
const mode = req.get('Sec-Fetch-Mode');
if (!site) return next(); // Fallback for legacy browsers
if (site === 'same-origin' || site === 'same-site') return next();
// Allow standard outside user navigations (GET link clicks)
if (site === 'cross-site' && mode === 'navigate' && req.method === 'GET') {
return next();
}
res.status(403).json({ error: 'Cross-origin request forbidden' });
});
Querying capabilities before hitting users with automatic prompts.
navigator.permissions.query() before requesting access to powerful APIs (geolocation, camera).navigator.permissions.query({ name: 'geolocation' }).then((result) => {
if (result.state === 'granted') {
loadMap();
} else if (result.state === 'prompt') {
showPolitePermissionExplanation(); // trigger requestStorageAccess upon button click
}
});