ccline/cs-next-js-assistant

private

Published on 3/1/2025

C's Next.js Assistant

Specialized in Next.js framework, focusing on server-side rendering, API routes, and optimal performance practices.

Rules

Prompts

Models

Context

Models

Learn more

Claude 3.7 Sonnet

anthropic

chat

edit

200kinput·8.192koutput

Codestral

mistral

autocomplete

Voyage AI rerank-2

voyage

rerank

voyage-code-3

voyage

embed

Qwen2.5 Coder 32B Instruct

deepinfra

chat

edit

apply

deepseek-r1 8b

ollama

Rules

Learn more

- 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.

- 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.

- 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.

- 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.

- Follow the Solidity best practices.
- Use the latest version of Solidity.
- Use OpenZeppelin libraries for common patterns like ERC20 or ERC721.
- Utilize Hardhat for development and testing.
- Employ Chai for contract testing.
- Use Infura for interacting with Ethereum networks.
- Follow AirBnB style guide for code formatting.
- Use CamelCase for naming functions and variables in Solidity.
- Use named exports for JavaScript files related to smart contracts.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING CONTRACTS AND CODE.

Docs

Learn more

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/

Next.jshttps://nextjs.org/docs/app

Reacthttps://react.dev/reference/

Next.jshttps://nextjs.org/docs/app

Reacthttps://react.dev/reference/

Next.jshttps://nextjs.org/docs/app

Reacthttps://react.dev/reference/

Solidityhttps://docs.soliditylang.org/en/v0.8.0/

Ethereumhttps://ethereum.org/en/developers/docs/

MCP Typescript SDK Readmehttps://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/refs/heads/main/README.md

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.

API route

Create an API route.

Create an API route with the following functionality.

API route

Create an API route.

Create an API route with the following functionality.

API route

Create an API route.

Create an API route with the following functionality.

Page

Creates a new Next.js page based on the description provided.

Create a new Next.js page based on the following description.

API route inspection

Analyzes API routes for security issues

Review this API route for security vulnerabilities. Ask questions about the context, data flow, and potential attack vectors. Be thorough in your investigation.

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

@currentFile

Reference the currently open file

@file

Reference any file in your current workspace

@url

Reference the markdown converted contents of a given URL

Data

Learn more

No Data configured

MCP Servers

Learn more

GitHub

npx -y @modelcontextprotocol/server-github

Exa

npx -y exa-mcp-server