skills/security-basics/SKILL.md
Essential security checklist and patterns for web applications. Use when reviewing code for security issues, implementing authentication, or hardening an application. Covers OWASP top 10, input validation, and secure coding practices.
npx skillsauth add adilkalam/orca security-basicsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
// Whitelist approach (preferred)
const allowedFields = ['name', 'email', 'age'];
const sanitized = pick(input, allowedFields);
// Schema validation
const schema = z.object({
email: z.string().email(),
age: z.number().min(0).max(150),
name: z.string().min(1).max(100)
});
// BAD - SQL Injection vulnerable
const query = `SELECT * FROM users WHERE id = ${userId}`;
// GOOD - Parameterized query
const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);
// GOOD - ORM
await User.findOne({ where: { id: userId } });
// BAD - Direct HTML insertion
element.innerHTML = userInput;
// GOOD - Text content
element.textContent = userInput;
// GOOD - Sanitize HTML if needed
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);
// React handles this automatically
<div>{userInput}</div> // Safe
// But not this
<div dangerouslySetInnerHTML={{__html: userInput}} /> // DANGEROUS
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
# Check for vulnerabilities
npm audit
pip-audit
bundler-audit
# Keep dependencies updated
npm update
dependabot/renovate for automation
testing
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
tools
Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
tools
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
development
Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.