Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add GktuOktay/ai-skills --skill client-securitygit clone --depth 1 https://github.com/GktuOktay/ai-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/gktuoktay/ai-skills/client-security)<a href="https://agentmods.dev/skills/gktuoktay/ai-skills/client-security"><img src="https://agentmods.dev/badge/skills/gktuoktay/ai-skills/client-security/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/gktuoktay/ai-skills/client-security"><img src="https://agentmods.dev/badge/skills/gktuoktay/ai-skills/client-security.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00068 | $0.00844 |
| Opus 5 | $0.00034 | $0.00422 |
| Sonnet 5 | $0.00014 | $0.00169 |
| Haiku 4.5 | $0.00007 | $0.00084 |
Grade A, and why
Client-Side Security Best Practices scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Client-Side Security Best Practices
Overview
This skill outlines how to build secure frontend applications by preventing Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), configuring robust Content Security Policy (CSP) headers, ensuring secure cookie usage, and mitigating DOM-based vulnerabilities.
Core Principles
1. Cross-Site Scripting (XSS) Prevention
Never trust data rendered to the DOM.
- Context-aware encoding: Always encode data based on where it will be rendered (HTML body, attributes, JavaScript variables).
- Use modern frameworks: Leverage frameworks like React, Angular, or Vue which automatically escape content by default.
- Avoid dangerous APIs: Avoid using APIs like
innerHTML,document.write(), orv-html/dangerouslySetInnerHTMLunless absolutely necessary and the input is strictly sanitized (e.g., using DOMPurify).
2. Cross-Site Request Forgery (CSRF) Mitigation
Protect state-changing requests from being forged.
- Anti-CSRF Tokens: Implement synchronizer token pattern where every state-changing request (POST, PUT, DELETE) includes a unique, session-tied token.
- SameSite Cookies: Use the
SameSite=LaxorSameSite=Strictflag on all sensitive cookies (e.g., session cookies) to prevent the browser from sending them in cross-site requests.
3. Secure Cookie Flags
Ensure cookies are handled securely by the browser.
- HttpOnly: Prevent client-side scripts from accessing the cookie, mitigating the impact of XSS.
- Secure: Ensure the cookie is only transmitted over HTTPS.
- SameSite: Mitigate CSRF by controlling cross-site cookie sending.
4. Content Security Policy (CSP)
Use CSP to restrict the sources from which resources can be loaded.
- Strict Policies: Implement a strict CSP that relies on nonces or hashes rather than
unsafe-inlineorunsafe-eval. - Report-Only Mode: Deploy CSP in report-only mode first to monitor violations before enforcing.
5. DOM-Based Vulnerabilities
Prevent attacks where the payload is executed as a result of modifying the DOM environment in the victim's browser.
- Avoid sinks: Be cautious with DOM sinks like
location.href,setTimeout,eval(). - Validate sources: Validate data from sources like
location.hash,document.referrer,window.name.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 74 lines · 68 tokens per session scan A fe50e5628b72
Client-Side Security Best Practices is a skill published in the GitHub repository GktuOktay/ai-skills (2 stars, last pushed 7d ago), licensed MIT. It adds 68 tokens to every session and 844 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frontend-api-integration-patterns
Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router.
react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
expo-ui-jetpack-compose
Skill "expo-ui-jetpack-compose" from tmolavi/mcp-agent-skills-hub, covering when to use, installation, instructions, key components and limitations.
react-flow-node-ts
Create React Flow node components following established patterns with proper TypeScript types and store integration.