m-binimran

m-binimran/dev-pack

Command

Build accessible, validated forms with React Hook Form + Zod + shadcn Form, wired to a Next.js server action. Use when adding any form (contact, signup, chec...

m-binimran/dev-pack

Command

Reviews React/Next.js UI for accessibility, the anti-template design bar, animation safety, responsiveness, and component architecture. Use when UI changes,...

m-binimran/dev-pack

Command

Generate safe, reversible Postgres/Supabase migrations using the expand→backfill→contract pattern, avoiding locks and data loss. Use when altering schema, ad...

m-binimran/dev-pack

Command

Add error monitoring and structured logging to a Next.js + Supabase app — Sentry for errors, request-scoped logs, and useful context without leaking PII. Use...

m-binimran/dev-pack

Command

Enforce a Core Web Vitals / Lighthouse performance budget on a Next.js site — LCP, CLS, INP, bundle size, images. Use before shipping a page or when a page f...

m-binimran/dev-pack

Command

Reviews a change for performance - N+1 queries, missing indexes, slow queries, client bundle size, Core Web Vitals, caching/revalidation, render performance....

m-binimran/dev-pack

Command

Diagnose and fix slow Postgres queries using EXPLAIN ANALYZE, index suggestions, and N+1 detection. Use when a query is slow, a page is slow because of the D...

m-binimran/dev-pack

Command

Add Supabase Realtime to a Next.js app — Postgres Changes, Broadcast, and Presence — with proper cleanup and RLS-aware channels. Use when building live updat...

m-binimran/dev-pack

Command

Build mobile-first responsive layouts (≥375px) with fluid type, container queries, and grid/bento composition that doesn't break. Use when laying out a page...

m-binimran/dev-pack

Command

Write and test Supabase/Postgres Row-Level Security policies so users can only access their own rows. Use when a table holds user data, when enabling RLS, or...

m-binimran/dev-pack

Command

Design normalized Postgres/Supabase schemas — tables, columns, types, keys, indexes, and constraints with consistent naming. Use when creating a new database...

m-binimran/dev-pack

Command

Security-focused review of a diff - secrets, injection, auth/authz, RLS gaps, SSRF, XSS/CSRF, OWASP Top 10. Use after changes touching auth, input handling,...

m-binimran/dev-pack

Command

Generate realistic seed data and reset scripts for local Postgres/Supabase development and tests. Use when setting up a dev database, needing test fixtures,...

m-binimran/dev-pack

Command

Add on-page SEO to a Next.js site — title/meta, Open Graph, canonical, structured data (schema.org JSON-LD), and sitemap/robots. Use when building or auditin...

m-binimran/dev-pack

Command

Decide where each piece of state lives — server, client, URL, or form — and avoid duplicating server state into client stores. Use when wiring data flow, add...

m-binimran/dev-pack

Command

Handle file uploads with Supabase Storage in Next.js — buckets, RLS on objects, signed URLs, image handling, and size/type validation. Use when adding avatar...

m-binimran/dev-pack

Command

Integrate Stripe payments in Next.js — Checkout/Payment Intents, webhooks with signature verification and idempotency, and reconciling state to the database....

m-binimran/dev-pack

Command

Set up Supabase Auth in Next.js App Router — email/OAuth sign-in, server-side sessions, middleware refresh, and protected routes. Use when adding login, sign...

m-binimran/dev-pack

Command

Write tests first (RED→GREEN→REFACTOR) with Vitest, Testing Library, and Playwright for a Next.js + Supabase app. Use when adding a feature, fixing a bug, or...

m-binimran/dev-pack

Command

Reviews test quality and coverage - behavioral vs implementation tests, edge cases, regression tests for bug fixes, flakiness, and whether the change is actu...

m-binimran/dev-pack

Command

Define a design system as Tailwind v4 @theme tokens (color, type scale, spacing, radius, shadow) with intentional light + dark themes. Use when setting up a...

m-binimran/dev-pack

Command

Verify claims against real command output before reporting status. Use before saying a task is done, a build passes, tests are green, or a bug is fixed.

m-binimran/dev-pack

MCP server Claude CodeCodexCursor

Lets the agent inspect a PostgreSQL database schema and run read-only SQL queries against it. Runs locally from the @modelcontextprotocol/server-postgres npm package. Needs 1 environment variable to run.

m-binimran/dev-pack

MCP server Claude CodeCodexCursor

Lets the agent drive a real browser: open pages, click, type, take screenshots and read the accessibility tree, using Playwright. Runs locally from the @playwright/mcp npm package.