Next.js Material UI Tailwind CSS .cursorrules prompt file

Author: LaurentP-56

What you can build

Tailwind MUI Template Builder: A website service that provides customizable templates using Tailwind CSS and Material UI components. Users can select and combine different UI elements to create personalized templates for their projects without needing extensive design knowledge.React Component Library Marketplace: A platform where developers can buy, sell, or share React components built using the technologies listed, like shadcn/ui and aceternityui. The marketplace facilitates component discovery and reuse, accelerating project development.Next.js Portfolio Generator: An app that leverages Next.js alongside the specified dependencies to create stunning developer portfolios. Users can utilize different templates and customize them with CKEditor5 for content management, integrated with Prisma for backend management.TypeScript Code Quality Analyzer: A web service that analyzes TypeScript codebases for quality and security using best practices. While ESLint isn’t used in this project, the tool can focus on TypeScript-specific patterns and offer Tailwind and MUI integration advice.Material UI Icon Finder: A browser extension that seamlessly integrates with code editors and provides quick access to the @mui/icons-material library. The tool enables developers to search and insert icons directly into their codebase.Tailwind CSS Theme Customizer: A tool for creating and managing Tailwind CSS themes, allowing users to preview how various styles and merges affect UI components. Developers can export themes for easy integration into their Next.js projects.Prisma Database Schema Visualizer: An app to visualize and edit Prisma database schemas. It connects directly to the user’s database and displays models in an interactive graph, allowing modifications and immediate application of changes.Framer Motion Animation Library: A curated library of animation sequences created using Framer Motion that developers can easily integrate into their Next.js projects. The library offers a diverse range of animations tailored for Material UI components.Shadcn/UI and AceternityUI Tutorials: An educational platform offering interactive tutorials and courses focused on implementing and leveraging shadcn/ui and aceternityui libraries within Next.js applications.Styled Components Editor: A web-based editor that provides a friendly UI for styling React components using styled-components. Users can visually tweak and test styles, with the ability to preview changes in real-time and export the resulting code.

Benefits

Synopsis

Developers building a modern portfolio website using Next.js with a strong emphasis on TypeScript, TailwindCSS, Material UI, and additional integrations like authentication and rich-text editing would benefit from this prompt.

Overview of .cursorrules prompt

The .cursorrules file outlines the setup for a project named "Portfolio2" using Next.js. It specifies the use of TypeScript and Tailwind CSS, but opts out of using ESLint and customizing the default import alias. The project structure includes the use of an src/ directory and an App Router. The file lists a comprehensive set of dependencies crucial for the project, such as packages for UI components, styling, authentication, and a database client. Key dependencies include Material UI, Tailwind CSS, Prisma, and Next.js. Additionally, relevant devDependencies for the development environment, such as type definitions and PostCSS, are included.

.cursorrules Content

Ce projet s'appel Portfolio2Il est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui aceternityuiWhat is your project named? portfolio2Would you like to use TypeScript? YesWould you like to use ESLint? NoWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to customize the default import alias (@/)? NoWhat import alias would you like configured? @/ Nola liste des dépendance  "dependencies": {  "@ckeditor/ckeditor5-react": "^6.3.0",  "@emotion/react": "^11.11.4",  "@emotion/styled": "^11.11.5",  "@mui/icons-material": "^5.15.18",  "@mui/material": "^5.15.18",  "@mui/styled-engine-sc": "^6.0.0-alpha.18",  "@prisma/client": "^5.14.0",  "autoprefixer": "^10.4.19",  "bcryptjs": "^2.4.3",  "ckeditor5": "^41.4.2",  "clsx": "^2.1.1",  "framer-motion": "^11.2.5",  "init": "^0.1.2",  "next": "^14.2.3",  "next-auth": "^4.24.7",  "react": "^18.3.1",  "react-dom": "^18.3.1",  "shadcn-ui": "^0.8.0",  "styled-components": "^6.1.11",  "tailwind-merge": "^2.3.0" }, "devDependencies": {  "@types/bcryptjs": "^2.4.6",  "@types/node": "^20",  "@types/react": "^18",  "@types/react-dom": "^18",  "postcss": "^8.4.38",  "prisma": "^5.14.0",  "tailwindcss": "^3.4.3",  "typescript": "^5.4.5" }