security-best-practices
Security best practices for React/Next.js - XSS, CSRF, authentication, and API security
Best use case
security-best-practices is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Security best practices for React/Next.js - XSS, CSRF, authentication, and API security
Teams using security-best-practices should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/security-best-practices/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How security-best-practices Compares
| Feature / Agent | security-best-practices | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Security best practices for React/Next.js - XSS, CSRF, authentication, and API security
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Security Best Practices
## Authentication
### Secure Session Management
- Use HTTP-only, Secure cookies
- Implement CSRF protection
- Set appropriate cookie expiry
- Rotate tokens regularly
### Password Handling
- Never store plain text passwords
- Use strong hashing (bcrypt, argon2)
- Implement rate limiting on login
- Add captcha for failed attempts
## Data Protection
### Input Validation
```typescript
import { z } from 'zod'
const UserSchema = z.object({
email: z.string().email(),
password: z.string().min(8).max(100),
name: z.string().max(100)
})
```
### SQL Injection Prevention
- Use parameterized queries
- Never concatenate user input to queries
- Use ORM/Query Builder
## XSS Prevention
### React Protection
- React escapes by default
- Use dangerouslySetInnerHTML sparingly
- Sanitize user input
- Use Content Security Policy
## API Security
### Rate Limiting
```typescript
import { rateLimit } from './lib/rate-limit'
export async function POST(req: Request) {
const ip = req.headers.get('x-forwarded-for') || 'unknown'
const { success } = await rateLimit.limit(ip)
if (!success) {
return new Response('Too Many Requests', { status: 429 })
}
// Process request
}
```
### CORS Configuration
```typescript
// Only allow specific origins
export default function handler(req, res) {
res.setHeader('Access-Control-Allow-Origin', 'https://yoursite.com')
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
res.setHeader('Access-Control-Allow-Credentials', 'true')
}
```
## Environment Variables
- Never commit secrets to git
- Use .env.local for local development
- Use Vercel env vars for production
- Prefix sensitive variables (e.g., NEXT_PUBLIC_ only for public)Related Skills
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
framer-motion-best-practices
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
docker-best-practices
Comprehensive Docker best practices for images, containers, and production deployments
writing-plans
Use when you have a spec or requirements for a multi-step task, before touching code
webtricks-tier-pricing-ui
Build interactive tier-based pricing UI with lock/unlock states, progressive disclosure, and cross-slide consistency. Use when building pricing pages, tier selectors, or feature comparison grids. Tags: webtricks, pricing, tiers, SaaS.
webtricks-browser-qa-audit
Audit live websites using Playwright MCP for browser-based QA. Covers accessibility snapshots, screenshot verification, interactive element testing, and tier differentiation audits. Use after deploying web changes to verify they work. Tags: webtricks, QA, testing, playwright, audit.
webtricks-animated-pipeline
Build animated data flow pipelines with SVG circuits, traveling dots, and ambient animations using Framer Motion + SVG. Use when visualizing architecture, workflows, API pipelines, or any step-by-step data flow. Tags: webtricks, animation, pipeline, SVG, architecture.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
verification-before-completion
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.