quick-blog

Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.

Create Mermaid diagrams in markdown. Use when the user wants to visualize workflows, architectures, API flows, data models, state machines, or system designs. Covers flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, and more.

React Hook Form best practices, validation with Zod, performance patterns, and testing. Use when building, reviewing, or refactoring forms, form validation, useForm, useFieldArray, Controller, or integrating React Hook Form with UI libraries.

Web application security best practices based on OWASP Top 10:2025. Use when reviewing code for vulnerabilities, implementing auth/authorization, handling user input, working with file uploads, managing secrets, or building API endpoints. Covers React, Express, MongoDB, and JWT security.

Use when writing, reviewing, or planning tests for Express controllers, routes, middleware, validators, and Mongoose models in server/. Covers Vitest, Supertest, mongodb-memory-server, auth testing, and project-specific conventions.

General-purpose React Testing Library guide with Vitest. Use when writing, reviewing, or setting up React component and hook tests. Covers project setup from scratch, RTL query priority, userEvent, async patterns, mocking strategies, and common anti-patterns. Applicable to any Vite + React project.

Git workflow conventions for branches, commits, and PRs. Use when creating branches, generating commit messages, creating pull requests, or any Git operation that needs to follow project conventions. Covers conventional commits, branch naming, PR formatting, ticket extraction, and pre-push build checks.

Use when starting creative work — new features, architectural changes, or significant modifications. Activates BEFORE any code is written to refine ideas through structured questions and present designs for validation.

Express.js and MongoDB/Mongoose best practices and anti-pattern catalog. Use when writing, reviewing, or refactoring Express controllers, middleware, routes, Mongoose models, or API endpoints. Covers MVC patterns, error handling, security, validation, and code organization.

Modern React best practices and anti-pattern catalog (2025-26). Use when writing, reviewing, or refactoring React components, hooks, and state management. Covers component design, state patterns, hooks misuse, performance, data fetching, and code organization.

Safe, incremental refactoring of React UI applications. Use when restructuring components, extracting hooks, migrating state management, reorganizing file structure, or reducing technical debt in React code. Enforces behavior preservation, baby-step execution, and verification at every step.

Use when investigating bugs, errors, or unexpected behavior. Activates when something is broken and needs diagnosis. Enforces root-cause analysis before any fix attempt.

Use when you have an approved design or feature spec and need to create a step-by-step implementation plan. Activates after brainstorming/design approval. Breaks work into small, verifiable tasks.