What problem does it solve?
This Skill prevents security vulnerabilities in TypeScript, React, and Supabase apps by enforcing secure handling of authentication, authorization, validation, secrets, and XSS-safe rendering.
Core Features & Use Cases
- Security-first flow: Apply Authenticate → Authorize (RLS) → Validate (Zod) → Process → Log without sensitive data for every critical operation.
- Zod validation at system boundaries: Validate and safely parse external input (request bodies, params, headers) with typed, sanitized outputs and consistent error handling.
- Secrets management discipline: Keep Supabase keys out of frontend code by using environment variables, ensuring browser-safe anon keys and server-only service role keys.
- Supabase RLS policy correctness: Enable RLS on user data tables and enforce least-privilege with correct USING and WITH CHECK rules.
- React XSS prevention patterns: Avoid raw HTML rendering and unsafe attribute interpolation; sanitize trusted HTML and validate URLs.
- Auth protection patterns: Guard routes and verify JWT server-side in Edge Functions before sensitive data access.
- PR-ready security checklist: Catch common failures (hardcoded secrets, missing Zod validation, overly permissive RLS, sensitive logging, CORS mistakes).
Quick Start
Tell the AI to audit a specific Supabase endpoint and related React form, then produce concrete Zod schemas, RLS policy drafts, and a secrets/logging check for the changes.
