Browse

Design System .cursorrules strategies

Filters

Tech

Clear

seaborn

Tauri

logging

Azure

MySQL

Go

Kafka

WebP.

next-safe-action

Phoenix LiveView

Ecto

File System Watcher

Plug

Finch

Gettext

Phoenix

Jason

Phoenix LiveDashboard

Sobelow

ExCoveralls

DNS Cluster

ExUnit

Release Please

Swoosh

Credo

LeftHook

npm

Wagmi

Viem

Next.js 14

Daisy UI

Express.js

Vercel AI SDK

Firebase

Slither

Hardhat

Mythril

Chainlink VRF

SOLID

OpenAI

SVG

SWR

Prometheus

Memcached

ELK Stack

Grafana

async/await

API

Grid

OpenAPI

React Server Components

Turborepo

None

TanStack React Query

Mongoose

virtual environments

dask

PyTorch

tqdm

Flask

joblib

NumPy

python-dotenv

pip

Django REST Framework

unittest

WhiteNoise

pytest-django

AWS

NoSQL

Kubernetes

Cypress

Axios

Next.js SSR.

Next.js 14 App Router

Angular

React Server Components (RSC)

Rell

Kotlin

Tailwind CSS.

Cairo

Biome

Composer

WebAssembly

yarn

Material UI

autoprefixer

bcryptjs

@types/react

Next.Js

@types/node

prisma

framer-motion

postcss

react-dom

Supabase Auth

WCAG

React.FC

React.ReactNode

fetch API

Next.js Tailwind CSS Guide .cursorrules prompt file

Be terse
This project is my personal website.
It's built with Next.js using the App Router.
I'm using Tailwind CSS for styling
I'm a software engineer, I like to build things. I'm a entrepreneur, I like to build businesses.
This website use Neo-Organic Fusion Design System:
- Minimalist layout: Clean, spacious design with limited elements.
- Soft gradient background: Subtle pastel colors blending together.
- Color brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations. Color should only be used to attract attention.
- Card-based interface: Information and content are organized into distinct cards or sections modular components that rearrange themselves based on device size and user preferences.
- Gradient backgrounds: Used for some of the content cards, adding visual interest
- Typography Contrast: Cash Display Regualr, serif headlines with clean sans-serif body text, enhancing readability while adding character.
- Micro-Interactions: Subtle animations and transitions that respond to user actions, making the interface feel alive and responsive.
- Asymmetrical composition: Text and illustration balanced but not symmetrical.
- Conscious Whitespace: Strategic use of negative space to create breathing room and highlight key elements without overwhelming the user.
- Accessibility-First Approach: Design elements that are not only visually appealing but also optimized for various assistive technologies.
- Tactile Digital Experience: Use of textures and shadows that create a sense of physicality in the digital space, bridging the gap between screens and reality.
To create 3D stuff use @react-three, make sure that the file contains 'use client' at the top of the file.
When I ask you to implement something or refactor, never replay with "_ ... add existing part ... _/" but just write the code.
Never replay "you'll need to implement this" add the code your self. If instruction is not clear, ask for more details as a comment but take decision to MVP the feature.