Skills frontend-api-client-with-jwt
📦

frontend-api-client-with-jwt

Medium Risk

Build JWT API Clients for Next.js

Frontend teams need one reliable way to attach JWTs, refresh expired tokens, and parse API errors. This skill helps Claude, Codex, and Claude Code design a centralized Next.js client pattern.

Supports: Claude Codex Code(CC)
📊 72 Adequate
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/abdul-haseeb360-frontend-api-client-with-jwt.md Signed manifest GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest Signed lockfile GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/lockfile

Test it

Using "frontend-api-client-with-jwt". Design a JWT API client for a Next.js dashboard.

Expected outcome:

A structured implementation plan covering client responsibilities, authorization headers, refresh flow decisions, error categories, and integration points.

Using "frontend-api-client-with-jwt". Review whether my frontend should store JWTs in localStorage.

Expected outcome:

A security-focused recommendation that weighs XSS exposure, cookie options, refresh token handling, and application constraints.

Using "frontend-api-client-with-jwt". Define tests for token refresh behavior.

Expected outcome:

A concise test plan for valid tokens, expired tokens, refresh failures, concurrent requests, redirects, and cleanup.

Security Audit

Medium Risk
v6 • 6/28/2026

The static findings are documentation terms in SKILL.md, not executable code, command execution, scanning, or exfiltration behavior. One semantic concern remains: the skill lists localStorage as a JWT storage option without enough warning about XSS exposure, so publication should include a security warning.

1
Files scanned
171
Lines analyzed
3
findings
6
Total audits
Medium Risk Issues (1)
SKILL.md:76
Security-Sensitive Token Storage Guidance
Static verdict: TRUE POSITIVE as a guidance risk, not as executable malware. The skill lists browser storage options for JWT tokens, including localStorage, which can expose bearer tokens to XSS if used without strong safeguards.
Low Risk Issues (2)
SKILL.md:7SKILL.md:94
False Positive: JWT and HTTP Status Terminology
Static verdict: FALSE POSITIVE. The weak cryptographic algorithm detections point to a JWT description and an HTTP 200-299 status range, with no cryptographic API, algorithm selection, or hashing implementation present.
SKILL.md:74SKILL.md:100SKILL.md:132SKILL.md:141SKILL.md:149SKILL.md:166
False Positive: Reconnaissance Terms in API Guidance
Static verdict: FALSE POSITIVE. The system and network reconnaissance detections are ordinary API-client documentation about valid tokens, HTTP 401 handling, context access, error messages, refresh performance, and token tests.
Audited by: codex View Audit History →

Quality Score

55
Architecture
100
Maintainability
87
Content
70
Community
56
Security
83
Spec Compliance

What You Can Build

Standardize API Calls

Create a shared client pattern for headers, request options, and response parsing in a Next.js application.

Plan Auth Refresh Behavior

Define how expired JWTs should refresh, fail, and redirect users when sessions cannot continue.

Review Frontend Auth Design

Check whether an existing API layer handles token storage, errors, and concurrent refresh scenarios consistently.

Try These Prompts

Create a Basic Client Plan 
Use this skill to outline a centralized Next.js API client for JWT authentication. Include request headers, error handling, and basic integration steps.
Add Token Refresh Handling 
Use this skill to design token expiration checks and refresh behavior for my Next.js API client. Include concurrent request handling and refresh failure behavior.
Harden Storage and Error Rules 
Use this skill to review my JWT token storage and API error handling plan. Flag XSS exposure, sensitive error leaks, and weak redirect behavior.
Audit an Existing API Layer 
Use this skill to evaluate my existing Next.js API client design. Compare it against token attachment, refresh coordination, error parsing, cleanup, and testing expectations.

Best Practices

  • Prefer secure, HttpOnly cookie-based storage when the application architecture supports it.
  • Centralize authorization headers, refresh behavior, and error parsing in one client layer.
  • Test concurrent refresh requests so only one refresh attempt updates shared auth state.

Avoid

  • Do not scatter JWT attachment logic across individual components.
  • Do not expose raw backend error details directly to users.
  • Do not treat localStorage as safe token storage without an XSS threat review.

Frequently Asked Questions

Does this skill generate a complete API client?
No. It provides implementation guidance and review criteria for building a client in your project.
Can it work with both App Router and Pages Router?
Yes. The guidance mentions both contexts, but the implementation details depend on your project structure.
Does it support authentication methods other than JWT?
No. The skill is designed for JWT-based authentication flows.
Does it recommend localStorage for JWTs?
It lists localStorage as a possible storage mechanism, but users should prefer safer storage when possible.
Can it help with refresh token failures?
Yes. It covers graceful refresh failure handling and redirecting users to login when needed.
Is this skill safe to publish?
Yes, with a medium-risk warning about token storage guidance and the need for secure implementation choices.

Developer Details

Author

Claude

License

MIT

Repository

https://github.com/Abdul-Haseeb360/Hackathon-II-AI-Native-Systems/tree/main/.claude/skills/frontend-api-client

Ref

main

File structure

📄 SKILL.md