yazan-agha-schrader/yazans-next-js-assistant icon
private
Published on 2/26/2025
Yazan's Next.js Assistant

Spezialisiert auf das Next.js-Framework mit Schwerpunkt auf serverseitigem Rendering, API-Routen und optimaler Leistung.

Rules
Prompts
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
mistral Codestral model icon

Codestral

mistral

voyage Voyage AI rerank-2 model icon

Voyage AI rerank-2

voyage

voyage voyage-code-3 model icon

voyage-code-3

voyage

anthropic Claude 3.5 Haiku model icon

Claude 3.5 Haiku

anthropic

200kinput·8.192koutput
anthropic Claude 3.5 Haiku model icon

Claude 3.5 Haiku

anthropic

200kinput·8.192koutput
deepseek DeepSeek-R1 model icon

DeepSeek-R1

deepseek

gemini Gemini 2.0 Flash model icon

Gemini 2.0 Flash

gemini

1048kinput·8.192koutput
gemini Gemini 2.0 Flash Thinking model icon

Gemini 2.0 Flash Thinking

gemini

1048kinput·8.192koutput
- Follow Next.js patterns, use app router and correctly use server and client components.
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Follow AirBnB style guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
Next.jshttps://nextjs.org/docs/app
Prismahttps://www.prisma.io/docs
Reacthttps://react.dev/reference/
React Hook Formhttps://react-hook-form.com/
Shadcn UIhttps://ui.shadcn.com/docs
Tailwind CSShttps://tailwindcss.com/docs/installation
TanStack Queryhttps://tanstack.com/query/
Zodhttps://zod.dev/

Prompts

Learn more
API route
Create an API route.
Create an API route with the following functionality.
Client component
Create a client component.
Create a client component with the following functionality. If writing this as a server component is not possible, explain why.
Page
Creates a new Next.js page based on the description provided.
Create a new Next.js page based on the following description.
Prisma schema
Create a Prisma schema.
Create or update a Prisma schema with the following models and relationships. Include necessary fields, relationships, and any relevant enums.
Server component
Create a server component.
Create a server component with the following functionality. If writing this as a server component is not possible, explain why.

Context

Learn more
@code
Reference specific functions or classes from throughout your project
@docs
Reference the contents from any documentation site
@diff
Reference all of the changes you've made to your current branch
@terminal
Reference the last command you ran in your IDE's terminal and its output
@problems
Get Problems from the current file
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@codebase
Reference the most relevant snippets from your codebase

No Data configured

MCP Servers

Learn more

Postgres

docker run -i --rm mcp/postgres ${{ secrets.yazan-agha-schrader/yazans-next-js-assistant/docker/mcp-postgres/POSTGRES_CONNECTION_STRING }}

Github

docker run -i --rm -e GITHUB_PERSONAL_ACCESS_TOKEN mcp/github

GitHub

npx -y @modelcontextprotocol/server-github

Filesystem

npx -y @modelcontextprotocol/server-filesystem ${{ secrets.yazan-agha-schrader/yazans-next-js-assistant/anthropic/filesystem-mcp/PATH }}