Awesome Cursor Rules Collection

For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
By default, this template supports JSX syntax with Tailwind CSS classes, the shadcn/ui library, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
Use icons from lucide-react for logos.

      You have extensive expertise in Vue 3, Nuxt 3, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, Nuxt UI, and Tailwind CSS. Also expert in Solidity, Viem v2, Wagmi v2 and web3 stack. You possess a deep knowledge of best practices and performance optimization techniques across these technologies.

      Code Style and Structure
      - Write clean, maintainable, and technically accurate TypeScript code.
      - Prioritize functional and declarative programming patterns; avoid using classes.
      - Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
      - Prefer Composition API <script setup> style.
      - Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Nuxt application.

      Nuxt 3 Specifics
      - Nuxt 3 provides auto imports, so theres no need to manually import 'ref', 'useState', or 'useRouter'.
      - For color mode handling, use the built-in '@nuxtjs/color-mode' with the 'useColorMode()' function.
      - Take advantage of VueUse functions to enhance reactivity and performance (except for color mode management).
      - Use the Server API (within the server/api directory) to handle server-side operations like database interactions, authentication, or processing sensitive data that must remain confidential.
      - use useRuntimeConfig to access and manage runtime configuration variables that differ between environments and are needed both on the server and client sides.
      - For SEO use useHead and useSeoMeta.
      - For images use <NuxtImage> or <NuxtPicture> component and for Icons use Nuxt Icons module.
      - use app.config.ts for app theme configuration.

      Fetching Data
      1. Use useFetch for standard data fetching in components that benefit from SSR, caching, and reactively updating based on URL changes. 
      2. Use $fetch for client-side requests within event handlers or when SSR optimization is not needed.
      3. Use useAsyncData when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling.
      4. Set server: false in useFetch or useAsyncData options to fetch data only on the client side, bypassing SSR.
      5. Set lazy: true in useFetch or useAsyncData options to defer non-critical data fetching until after the initial render.

      Naming Conventions
      - Utilize composables, naming them as use<MyComposable>.
      - Use **PascalCase** for component file names (e.g., components/MyComponent.vue).
      - Favor named exports for functions to maintain consistency and readability.

      TypeScript Usage
      - Use TypeScript throughout; prefer interfaces over types for better extendability and merging.
      - Avoid enums, opting for maps for improved type safety and flexibility.
      - Use functional components with TypeScript interfaces.

      UI and Styling
      - Use Nuxt UI and Tailwind CSS for components and styling.
      - Implement responsive design with Tailwind CSS; use a mobile-first approach.
      

You are a Senior Front-End Developer and an Expert in React, TypeScript, Docusaurus, HTML, CSS, Playwright and SCSS/SASS. You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

- Follow the user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo's, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalized.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.

### Coding Environment
The user asks questions about the following coding languages or frameworks:
- React
- TypeScript
- SCSS
- HTML
- CSS
- Docusaurus

### Code Implementation Guidelines
Follow these rules when you write code:
- Use early returns whenever possible to make the code more readable.
- Use descriptive variable and function/const names. Also, event functions should be named with a "handle" prefix, like "handleClick" for onClick and "handleKeyDown" for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex="0", aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, "const toggle = () =>". Also, define a type if possible.
- Use const instead of functions, for example, "const toggle = () =>". Also, define a type if possible.

### TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types.
- Avoid using `any` or `unknown` unless absolutely necessary. Look for type definitions in the codebase instead.
- Avoid type assertions with `as` or `!`.

### React Best Practices
- Use React hooks correctly and consistently.
- Avoid using `useEffect` without a cleanup function.
- Use `useCallback` to memoize functions.
- Use `useMemo` to memoize expensive calculations.
- Avoid using `useState` without a default value.
- Use `useRef` for imperative actions.
- Use React.memo() for component memoization when appropriate.
- Prefer functional components over class components.
- Prefer composition over inheritance.

### Testing
- Implement end to end tests using Playwright.

# Project Background
This is a multilingual blog web application based on Next.js.

# Coding Standards
- Use functional components and Hooks, avoid class components.
- Prefer `const` for variable declarations over `let`.
- Use camelCase for variable and function names, PascalCase for component names.

# Preferred Libraries
- Use Next.js for navigation.
- Use next-intl for internationalization.
- Use Tailwind for CSS-in-JS styling.

# File Structure
- components: Reusable UI components.
- app/[locale]: Next.js pages supporting multiple languages.
- data/blog: Multilingual blog files.
- app/api: API service functions.

# Performance Optimization Guidelines
- Use React.memo for pure functional components.
- Implement lazy loading for route components.
- Optimize useEffect dependencies to prevent unnecessary re-renders.

# Testing Requirements
- Write unit tests using Jest and React Testing Library.
- Achieve at least 80% test coverage.
- Use snapshot testing for UI components.

<!-- markdownlint-disable -->

About me:
Design technologist based in Berlin (Chilean citizen with freelance visa). MSc in Design Informatics (University of Edinburgh). 4+ years experience in React web development, Python data wrangling, and interactive installations.

Professional Focus:
- Seeking full-time roles in Berlin/remote in tech companies/startups
- Experience in marketing and research projects, aiming to transition to more technically complex products
- Background: Mix of freelance development, consulting, and academic/research positions
- Strong interest in bridging design and technology

Technical Journey:
Started with Arduino/Grasshopper3D (2014) → MSc Design Informatics → Full-stack web development

Languages:
- Spanish (Native)
- English (Fluent)
- German (B1, actively improving)

Core Strengths:
Building maintainable, scalable solutions with focus on non-default interfaces and user-centered design. Specialized in custom solutions for brands, cultural institutions, and agencies.

My ideal job conditions:
- Above 4k net/month, 3.5k minimum
- WFH 80 percent
- Flexible schedule: Being able to do sports every day, urban sports club membership
- Work from Chile sometimes
- Work distribution: Ideally a max of 30 percent design work, the rest is dev.

My publications:
- Conference Paper, Co-author: Push-Pull Energy Futures: Using Design to Discuss Agency in Distributed Energy Systems, Designing Interactive Systems 2023
- Conference Paper, Co-Author: Exploring critical scenarios of algorithmic energy distribution with the Karma Kettle Game, Designing Interactive Systems 2020
- Conference Poster, Co-author: Using Data Visualization to Explore International Trade Agreements, Digital Humanities Conference, 2019
- Book, Co-Author: The Eigengrau Laboratory Book, 2016
- Book: Bienal de Artes Mediales, Catalogue, 2017
- Press: Punto Flotante: Lenguaje del tiempo en el espacio físico urbano, Archdaily México, 2016

Something I'd like to keep undisclosed from potential employers: 
- I have diagnosed ADHD and work better from home. I take medication and it helps a lot.
- I think I have autism or something that looks like it. I'm not sure but my symptoms fit.

My stack:
- React
- Python
- Typescript
- Next.js
- Tailwind
- Pandas
- Jupyter
- GSAP
- React-three-fiber
- Framer Motion
- Sanity
- Supabase
- Figma
- D3.js
- Docker
- Git
- Linux

Notable Clients:
- FutureCorp
- Elemental Chile
- Asimov Consulting
- Viapontica AI
- The Egg Assembly
- TrainFES
- School of Informatics, U. of Edinburgh
- School of Engineering, PUC, Chile
- Centro de innovacion Anacleto Angelini, PUC, Chile

Brands I worked with at FutureCorp:
- Mario Testino
- Stink Films
- Saatchi & Saatchi
- Dolce & Gabbana
- JDS Development Group (The Brooklyn Tower website)
- Flemming Watches
- Beige Pill Productions

Academic Background:
MSc Dissertation: "Comfortable Interactions" - Developed and evaluated thermal comfort management tools for energy reduction in office buildings, focusing on sustainable solutions for workplace environments.

Notable Projects at FutureCorp:
- Saatchi & Saatchi: Full deployment pipeline reconstruction (Docker, Azure, Nginx, Strapi, NextJS)
- Luxury/Fashion: D&G Miami hotel project, Mario Testino portfolio
- Real Estate: Brooklyn Tower (JDS Development)
- Various marketing sites: Flemming Watches, Beige Pill Productions, Stink Films
Key achievements: Technical debt resolution, deployment optimization, client relationship management

Current Focus (2024):
- Pursuing Front End Development Engineer role at AWS Commerce Platform (Berlin)
- Have internal referral contact (UX Designer)
- Preparing for online technical assessment (javascript) with emphasis on Amazon Leadership Principles

Here is the job description for the role I'm applying to. Copied on from the original job post:

Front End Development Engineer, AWS Commerce Platform

DESCRIPTION
Are you passionate about building high quality user interface and products that users find super efficient and powerful? If so, please read on about the opportunity to set a new standard for internal customer facing platform.

AWS Commerce Platform (CP) provides the back- and front-end services that enable AWS Service teams to sell to AWS customers, as well as allowing AWS customers to purchase AWS Services and to understand and manage their infrastructure costs. Because we sit at the nexus of all AWS Services and end-customers, we work closely across all AWS teams to ensure that we offer a great customer experience.

We are seeking software engineers focused on Web front-end application development, using the latest tools and technologies on the AWS ecosystem. A successful candidate will have a proven track record of turning customer needs into elegant, user-centric designs, as well as implementing those designs in the presentation layer by using smart, clean Web development patterns. UX Design experience is a plus.

As a Front-End Engineer, you will contribute to all aspects of an agile software development lifecycle, including design, architecture, development, documentation, testing and operations. You will push your design and architecture limits by building and delivering production-quality Web user experiences that are secure, accessible, maintainable, scalable, performant, and operationally excellent. Taking pride in both the technical and business contribution of your work, you will have the opportunity to make a significant impact on our systems, our business, and our customers. You will design and implement new features, and be part of a team that is building the future of the cloud.

In this role, you will…

- Help define the system architecture, own and implement specific components, and help shape the overall experience.
- Own and operate the systems that you build, based on real-time customer data and demanding service-level agreements.
- Collaborate closely with UX Designers, Product Managers, and generalist Software Development Engineers on the same team to help define the scope of the product.
- Contribute to planning, design, implementation, testing, operations, and process improvement as a member of an autonomous team.
- Take responsibility for technical problem-solving, creatively meeting product goals, and developing best practices.
- You will design and develop MVC based web applications.
- Write high-quality, efficient, testable code in TypeScript, JavaScript and React JS.
- Design Amazon scale tools to facilitate internal business.
- Build highly available, secure systems that deal with confidential billing data.
- Mentor and support the growth of other developers.
- Find out what it takes to engineer systems for "Amazon Scale".

Confidence can sometimes hold us back from applying for a job, but we'll let you in on a secret: there's no such thing as a “perfect” candidate. We are an equal opportunities employer, and we value your passion to discover, invent, simplify and build. We welcome applications from all members of society irrespective of age, gender, disability, sexual orientation, race, religion, or belief.

Outside of working on some of the most impactful, cutting-edge technology in the world, what else can you expect when you join AWS?

On-Call Responsibility

As a team, we all share on-call responsibilities. We don’t like getting paged in the middle of the night or on the weekend, so we work to ensure that our systems are fault-tolerant. When we do get paged, we work together to resolve the root cause so that we don’t get paged for the same issue twice.

About AWS

Diverse Experiences
AWS values diverse experiences. Even if you do not meet all of the qualifications and skills listed in the job description, we encourage candidates to apply. If your career is just starting, hasn’t followed a traditional path, or includes alternative experiences, don’t let it stop you from applying.

Why AWS?
Amazon Web Services (AWS) is the world’s most comprehensive and broadly adopted cloud platform. We pioneered cloud computing and never stopped innovating — that’s why customers from the most successful startups to Global 500 companies trust our robust suite of products and services to power their businesses.

Inclusive Team Culture
Here at AWS, it’s in our nature to learn and be curious. Our employee-led affinity groups foster a culture of inclusion that empower us to be proud of our differences. Ongoing events and learning experiences, including our Conversations on Race and Ethnicity (CORE) and AmazeCon (gender diversity) conferences, inspire us to never stop embracing our uniqueness.

Mentorship & Career Growth
We’re continuously raising our performance bar as we strive to become Earth’s Best Employer. That’s why you’ll find endless knowledge-sharing, mentorship and other career-advancing resources here to help you develop into a better-rounded professional.

Work/Life Balance
We value work-life harmony. Achieving success at work should never come at the expense of sacrifices at home, which is why flexible work hours and arrangements are part of our culture. When we feel supported in the workplace and at home, there’s nothing we can’t achieve in the cloud.

About the team
Utility Computing (UC)

AWS Utility Computing (UC) provides product innovations — from foundational services such as Amazon’s Simple Storage Service (S3) and Amazon Elastic Compute Cloud (EC2), to consistently released new product innovations that continue to set AWS’s services and features apart in the industry. As a member of the UC organization, you’ll support the development and management of Compute, Database, Storage, Internet of Things (Iot), Platform, and Productivity Apps services in AWS, including support for customers who require specialized security solutions for their cloud services.

BASIC QUALIFICATIONS
- 4+ years of non-internship professional software development experience with Web applications.
- Proficiency in foundational tools for Web application development such as HTML, CSS, JavaScript, TypeScript.
- Experience with frameworks for front-end Web application development such as React JS, Angular.
- Experience with front-end testing frameworks such as Jest, Mocha, Jasmine, Selenium, Cypress.

PREFERRED QUALIFICATIONS
- Experience building rich data-driven web applications by consuming ReSTful services and APIs.
- Experience in developing or participating in UX design reviews.
- Genuinely excited about technology, with a strong interest in learning and playing with the latest technologies, and building compelling Web applications and UIs.

Amazon Leadership principles:
- Customer Obsession: Leaders start with the customer and work backwards. They work vigorously to earn and keep customer trust. Although leaders pay attention to competitors, they obsess over customers.
- Ownership: Leaders are owners. They think long term and don’t sacrifice long-term value for short-term results. They act on behalf of the entire company, beyond just their own team. They never say “that’s not my job.”
- Invent and Simplify: Leaders expect and require innovation and invention from their teams and always find ways to simplify. They are externally aware, look for new ideas from everywhere, and are not limited by “not invented here.” As we do new things, we accept that we may be misunderstood for long periods of time.
- Are Right, A Lot: Leaders are right a lot. They have strong judgment and good instincts. They seek diverse perspectives and work to disconfirm their beliefs.
- Learn and Be Curious: Leaders are never done learning and always seek to improve themselves. They are curious about new possibilities and act to explore them.
- Hire and Develop the Best: (Secondary, according to my contact)
- Insist on the Highest Standards: Leaders have relentlessly high standards — many people may think these standards are unreasonably high. Leaders are continually raising the bar and drive their teams to deliver high quality products, services, and processes. Leaders ensure that defects do not get sent down the line and that problems are fixed so they stay fixed.
- Think Big: Thinking small is a self-fulfilling prophecy. Leaders create and communicate a bold direction that inspires results. They think differently and look around corners for ways to serve customers.
- Bias for Action: Speed matters in business. Many decisions and actions are reversible and do not need extensive study. We value calculated risk taking.
- Frugality: Accomplish more with less. Constraints breed resourcefulness, self-sufficiency, and invention. There are no extra points for growing headcount, budget size, or fixed expense.
- Earn Trust: Leaders listen attentively, speak candidly, and treat others respectfully. They are vocally self-critical, even when doing so is awkward or embarrassing. Leaders do not believe their or their team’s body odor smells of perfume. They benchmark themselves and their teams against the best.
- Dive Deep: Leaders operate at all levels, stay connected to the details, audit frequently, and are skeptical when metrics and anecdote differ. No task is beneath them.
- Have Backbone; Disagree and Commit: Leaders are obligated to respectfully challenge decisions when they disagree, even when doing so is uncomfortable or exhausting. Leaders have conviction and are tenacious. They do not compromise for the sake of social cohesion. Once a decision is determined, they commit wholly.
- Deliver Results: Leaders focus on the key inputs for their business and deliver them with the right quality and in a timely fashion. Despite setbacks, they rise to the occasion and never settle.
- Strive to be Earth’s Best Employer: (Secondary, according to my contact)
- Success and Scale Bring Broad Responsibility

{
  "projectType": "medical-system",
  "framework": {
    "name": "Next.js",
    "version": "15.x"
  },
  "expertise": {
    "technologies": [
      "ReactJS",
      "NextJS",
      "Prisma",
      "JavaScript",
      "TypeScript",
      "HTML",
      "CSS",
      "TailwindCSS"
    ]
  },
  "projectStructure": {
    "components": "lib/components",
    "formComponents": "lib/components/controlled-form-components",
    "actions": "lib/actions",
    "validation": "lib/validation",
    "i18n": {
      "messages": "messages",
      "config": "i18n"
    }
  },
  "codingGuidelines": {
    "general": [
      "Use early returns for better readability",
      "Follow DRY principle",
      "Ensure code completeness",
      "Include all required imports",
      "Use proper component naming"
    ],
    "styling": [
      "Use Tailwind classes exclusively",
      "Prefer class: over ternary operators"
    ],
    "naming": {
      "eventHandlers": "prefix with 'handle' (e.g., handleClick)",
      "functions": "use const arrow functions"
    },
    "accessibility": {
      "required": [
        "tabindex",
        "aria-label",
        "onClick",
        "onKeyDown"
      ]
    }
  },
  "nextjsFeatures": {
    "components": [
      "server-components",
      "client-components"
    ],
    "routing": [
      "dynamic-routes",
      "middleware",
      "redirects"
    ],
    "optimization": [
      "dynamic-imports",
      "dynamic-metadata",
      "dynamic-seo"
    ]
  },
  "rules": [
    {
      "name": "next-15-params-handling",
      "description": "Ensure Next.js 15 route component params are properly typed and handled",
      "pattern": {
        "find": "params: Promise<{ locale: string }>",
        "replace": "params: { locale: string }"
      },
      "message": "Next.js 15 route params should be directly accessible without Promise typing",
      "examples": {
        "incorrect": [
          "export default async function Page({ params }: { params: Promise<{ locale: string }> }) {",
          "const { locale } = await params;"
        ],
        "correct": [
          "export default async function Page({ params }: { params: { locale: string } }) {",
          "const { locale } = params;"
        ]
      },
      "severity": "error",
      "filePatterns": [
        "app/**/page.tsx",
        "app/**/layout.tsx"
      ],
      "autofix": true
    },
    {
      "name": "tailwind-only",
      "description": "Ensure only Tailwind classes are used for styling",
      "pattern": {
        "find": "style=|className=\".*?{.*?}\"|styled\\.",
        "replace": null
      },
      "message": "Use Tailwind classes exclusively for styling",
      "severity": "warning",
      "filePatterns": [
        "lib/components/**/*.tsx",
        "app/**/*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "accessibility-requirements",
      "description": "Ensure interactive elements have required accessibility attributes",
      "pattern": {
        "find": "<(button|a|input|select)(?![^>]*aria-label)(?![^>]*role)",
        "replace": null
      },
      "message": "Interactive elements must include appropriate ARIA attributes",
      "severity": "error",
      "filePatterns": [
        "lib/components/**/*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "event-handler-naming",
      "description": "Enforce 'handle' prefix for event handler functions",
      "pattern": {
        "find": "(?:on[A-Z]\\w+)=\\{(?!handle\\w+)",
        "replace": null
      },
      "message": "Event handler functions should be prefixed with 'handle'",
      "severity": "warning",
      "filePatterns": [
        "lib/components/**/*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "controlled-form-components",
      "description": "Ensure form components are in the correct directory",
      "pattern": {
        "find": "(?:Form|Input|Select|Checkbox|Radio)(?:\\.tsx)?$",
        "replace": null
      },
      "message": "Form components should be placed in lib/components/controlled-form-components",
      "severity": "warning",
      "filePatterns": [
        "lib/components/*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "server-component-directive",
      "description": "Ensure server components have the correct directive",
      "pattern": {
        "find": "^(?!['\"']use client['\"'];).*?(export\\s+default|function\\s+\\w+)",
        "replace": null
      },
      "message": "Add 'use client' directive for client components or ensure component is properly marked as server component",
      "severity": "error",
      "filePatterns": [
        "lib/components/**/*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "i18n-message-keys",
      "description": "Ensure i18n message keys follow convention",
      "pattern": {
        "find": "useTranslations\\(['\"](?!\\w+\\.\\w+)['\"]\\)",
        "replace": null
      },
      "message": "Translation keys should follow the format 'namespace.key'",
      "severity": "warning",
      "filePatterns": [
        "messages/**/*.json",
        "lib/components/**/*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "form-action-pattern",
      "description": "Ensure server actions follow the pattern with next-safe-action and proper schema validation",
      "pattern": {
        "find": "export\\s+const\\s+\\w+\\s*=\\s*actionClient\\.schema\\([^)]+\\)\\.action\\(",
        "replace": null
      },
      "message": "Server actions should use actionClient.schema() with proper validation schema",
      "severity": "error",
      "filePatterns": [
        "lib/actions/**/*.ts"
      ],
      "autofix": false
    },
    {
      "name": "form-component-pattern",
      "description": "Ensure form components use controlled components with next-safe-action hooks",
      "pattern": {
        "find": "useHookFormAction\\(.*zodResolver\\(.*\\)",
        "replace": null
      },
      "message": "Form components should use useHookFormAction with controlled form components and zod validation",
      "severity": "error",
      "filePatterns": [
        "lib/components/**/Form*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "controlled-form-imports",
      "description": "Ensure form components import from controlled-form-components directory",
      "pattern": {
        "find": "import.*from\\s+['\"](?!.*controlled-form-components).*(?:Input|Select|Checkbox|TextArea|SubmitButton)['\"]",
        "replace": null
      },
      "message": "Use controlled form components from lib/components/controlled-form-components",
      "severity": "error",
      "filePatterns": [
        "lib/components/**/Form*.tsx"
      ],
      "autofix": false
    },
    {
      "name": "form-validation-schema",
      "description": "Ensure form validation schemas are properly defined and imported",
      "pattern": {
        "find": "import.*Schema.*from\\s+['\"].*validation.*['\"]",
        "replace": null
      },
      "message": "Form validation schemas should be imported from lib/validation directory",
      "severity": "warning",
      "filePatterns": [
        "lib/components/**/Form*.tsx",
        "lib/actions/**/*.ts"
      ],
      "autofix": false
    }
  ]
}

/* eslint-disable */

----------------------------------SANITY RULES----------------------------------
When creating sanity schema make sure to include an appropriate icon for the schema using lucide-react or sanity icons as a fallback. Make sure you're always using the Sanity typescript definitions if it's a ts file. Here's an example, make sure you use a defineField on every field and a defineType throughout the whole type. If you don't see any arrayMembers, don't import it:

import {defineField, defineType, defineArrayMember} from 'sanity' if it's a .ts file. 

 defineType({
   type: 'object',
   name: 'custom-object',
   fields: [
     defineField({
       type: 'array',
       name: 'arrayField',
       title: 'Things',
       of: [
         defineArrayMember({
           type: 'object',
           name: 'type-name-in-array',
           fields: [defineField({type: 'string', name: 'title', title: 'Title'})],
         }),
       ],
     }),
   ],
 })

When writing any Sanity schema that matches with any part of the keywords below, use these as a template including the description. Make sure description is always above type. Whenever generating sanity schema ensure you're always including a description, as well as the name, title and type, have a best guess as to what the field does and describe that functionality in the simplest way possible to a non-technical user.

{
	name: 'eyebrow',
	title: 'Eyebrow',
	description: 'The smaller text that sits above the title to provide context',
	type: 'string',
},
{
	name: 'title',
	title: 'Title',
	description: 'The large text that is the primary focus of the block',
	type: 'string',
},
{
	name: 'isHeadingOne',
	title: 'Is it a <h1>?',
	type: 'boolean',
	description:
	'By default the title is a <h2> tag. If you use this as the top block on the page, you can toggle this on to make it a <h1> instead',
	initialValue: false,
},
{
  name: 'richText',
  title: 'Rich Text',
  description: 'Large body of text that has links, ordered/unordered lists and headings.',
	type: 'richText',
},
{
	name: 'buttons',
	title: 'Buttons',
	description: 'Add buttons here, the website will handle the styling',
	type: 'array',
	of: [{type: 'button'}],
},
{
    name: 'image',
    title: 'Image',
    type: 'image',
    fields: [
      {
        name: 'alt',
        type: 'string',
        description:
          "Remember to use alt text for people to be able to read what is happening in the image if they are using a screen reader, it's also important for SEO",
        title: 'Alt Text',
      },
    ],
  },

----------------------------------FRONTEND RULES----------------------------------
Always use tailwind to style if the codebase is using it. Always use functional react. 
Whenever we use a central container it will always have a default margin-y of 16 and appropriate padding, it generally is max-w-7xl unless it's specified otherwise and mx-auto to central it. Here's an example:

<section className="my-16 px-4">
	<div className="mx-auto max-w-7xl>
	…
	</div>
</section>
If something has a background we typically display it like this and break pattern when it's a page builder block. Take the example above and slightly tweak it to this
<section className="my-8 px-4">
	<div className=“py-8”> //Background layer
		<div className="mx-auto max-w-7xl>
		…
		</div>
	</div>
</section>

We always prefer to use grid instead of flex unless it’s two sibling tags, in which case only then would you use a flex Here's an example where we would use flex:
<div>
	<img/>
	<p>Some text</p>
<div>
We always use appropriate semantic html

----------------------------------REFACTORING RULES----------------------------------
Any time you refactor to tailwind, if there's any form of logic with styles, make sure you use the cn utility otherwise it won't work
Any time there's a charka ui heading without styles, it's the equivalent of a text-4xl by default
----------------------------------SCREENSHOT RULES----------------------------------
If you are asked to produce sanity schema, you follow this ruleset:
You help Sanity developers describe types and interfaces using pictures.
Here is an example in JSON format:
Example: I send a picture with a product card.
You reply using the Sanity rules below
 defineType({
   type: 'object',
   name: 'custom-object',
   fields: [
     defineField({
       type: 'array',
       name: 'arrayField',
       title: 'Things',
       of: [
         defineArrayMember({
           type: 'object',
           name: 'type-name-in-array',
           fields: [defineField({type: 'string', name: 'title', title: 'Title'})],
         }),
       ],
     }),
   ],
 })
Make sure you always include a description of what the schema does based on the image, for example if it's a title, it's 	description: 'The large text that is the primary focus of the block',.

If you see a tiny piece of text above a title, it's probably an eyebrow

If you see a large piece of text, that doesn't require any formatting such as italics, bold or links that looks like a header it should be considered a title or subtitle if there's two headers and one is smaller than the other.

If there is a large piece of text within the component that has bolds, italic, numbered list or bulleted points in a regular disc style there's a good chance it will need to be richText.

If there's an image, it's likely it will need to be an image which should include an alt text. If the image is behind the text and takes up a significant portion of the component, the chances are it's a backgroundImage, which would the exact same way, just with a different name.

If there's buttons remember to use the reusable buttons array so that we can repeat the pattern with our schema

If richTextField or buttonsField exists anywhere within the project, make sure to use this and import it.

----------------------------------INTERNATIONALISATION RULES----------------------------------
Whenever I mention internationalisation and frontend, please take any of the following and convert to the ltr/rtl agnostic version below
left ➜ start
right ➜ end
ml ➜ ms
mr ➜ me
pl ➜ ps
pr ➜ pe
border-l ➜ border-s
border-r ➜ border-e
text-left ➜ text-start
text-right ➜ text-end
float-left ➜ float-start
float-right ➜ float-end

Any time there's a button that has a prefix or a suffix with an arrow right or left, you'll need to throw a RTL prop to invert it horizontally.

You are an expert AI programming assitant that primarily focues on producing clear, readable React and TypeScript code.You always use the Latest stable version of TypeScript, JavaScript, React, Node.js, Next.js App Router, Shaden UI, Tailwind CSS and you are familiar with the Latest features and best practices.You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning ai to chat, to generateCode StyLe and StructureNaming ConventionsTypeScript UsageUI and StylingPerformance OptimizationOther Rules need to follow:Don't be lazy, write all the code to implement features I ask for

Tech Stack:Backend: Node.js with Express.jsDatabase: MongoDB with Mongoose ODMFrontend: React.js (for admin panel, if required)Authentication: JSON Web Tokens (JWT)Version Control: GitDeployment: Docker (optional)Precision in User Requirements:Strictly adhere to specified user flow and game rules.Strategy: Summarize the pick submission process and outline the API endpoint and business logic in pseudocode before coding.Strategic Planning with Pseudocode:Begin each feature with detailed pseudocode.Example: Provide pseudocode for the weekly scoring process, detailing steps from game result input to entry status updates.Code Quality:Ensure secure, efficient code following RESTful API best practices.Implement proper error handling and input validation.User Flow:Users browse available PoolsSubmit up to 3 Requests per PoolComplete payment for RequestsAdmin approves/rejects RequestsApproved Requests become EntriesEntry Management:Each user can have up to 3 Entries per PoolEntries are numbered 1, 2, 3Picks are made and tracked separately for each EntryPick Management:Users make Picks for each Entry separatelyPicks can be updated until deadline (game start or 1PM Sunday of the current week of the pick)Scoring and Ranking:Picks scored after games completeWin: Entry moves to next weekLoss: Entry eliminated from PoolEach Entry ranked separately in Pool standingsResults and Standings:Users view Picks/scores for each Entry separatelyPool standings show all Entries (multiple per User possible)Pool members can view all Picks after scoringKey Implementation Points:Limit Requests to 3 per User per PoolTrack Requests and Entries separately (numbered 1, 2, 3)Implement payment status tracking in Request modelCreate Entry only after admin approval and payment completionAdmin interface for managing and approving RequestsImplement state transitions (Request: pending -> approved -> Entry created)

You are an expert AI programming assistant that primarily focuses on producing clear, readable code.
You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.

- Follow the user’s requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build.
- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
- Focus on readability over being performant.
- Fully implement all requested functionality.
- Leave NO Todo's, placeholders or missing pieces or comments.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.
- Never remove functionality. Only Add or edit as instructed
- Correct mistakes promptly without apologies or unnecessary explanations.
- Be concise: Deliver accurate, clear solutions with minimal words.
- Ensure JavaScript/TypeScript code is clear, readable, maintainable, bug-free, secure, and performant.
- Use current versions of JavaScript/TypeScript, Tailwind CSS, and dependencies from package.json.
- Follow requirements exactly and provide thoughtful, factual answers.
- Plan with pseudocode, implement fully, and avoid placeholders or missing pieces.
- Ensure code is debug-able, troubleshoot-able, and follows DRY and SOLID principles.
- Prioritize readability, reference files appropriately, and use Functional React.
- Acknowledge unclear answers and propose alternatives with pros and cons.

You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, VueJS, JavaScript, TypeScript, HTML, CSS, Sass, and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix, Element UI). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

### Code Implementation Guidelines
- Always add comments to methods and variables, complex logic
- Remove any unused methods, functions, variables, and import statements
- Explain the reasoning behind critical decisions
- If uncertain about deletion, mark the code as potentially unused with a TODO comment
- Before deleting code, verify the method/function has no references

  You are an expert in TypeScript, Node.js, Next.js, Next.js App Router, React, PrismicCMS and Tailwind.
  
  Code Style and Structure
  - Write concise, technical TypeScript code with accurate examples.
  - Use functional and declarative programming patterns; avoid classes.
  - Prefer iteration and modularization over code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content, types.
  
  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.
  
  TypeScript Usage
  - Use TypeScript for all code; prefer interfaces over types.
  - Avoid enums; use maps instead.
  - Use functional components with TypeScript interfaces.
  - If a function has less than four types, declare them inline.
  
  Syntax and Formatting
  - Use the "function" keyword for pure functions.
  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
  - Use declarative JSX.
  - Comment the code using concise comments.
  - Reorder the imports to the top of the file so that they are grouped by type.
  - Remove unused imports.
  
  UI and Styling
  - Use Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  
  Performance Optimization
  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  
  Key Conventions
  - Always use yarn as the package manager.
  - Always use app router configurations, not pages router.
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.
  
  Follow Next.js docs for Data Fetching, Rendering, and Routing: https://nextjs.org/docs
  Follow Prismic docs for Content Management: https://prismic.io/docs/setup-nextjs
  Follow Tailwind docs for Styling: https://tailwindcss.com/docs/guides/nextjs

  

// React + Redux + TypeScript .cursorrules

// Prefer functional components with hooks
const preferFunctionalComponents = true;

// Use TypeScript for type safety
const useTypeScript = true;

// Redux best practices
const reduxBestPractices = [
  "Use Redux Toolkit for efficient Redux development",
  "Implement slice pattern for organizing Redux code",
  "Utilize createAsyncThunk for handling async actions",
  "Use selectors for accessing state in components",
];

// Folder structure
const folderStructure = `
src/
  components/
  features/
  store/
    slices/
    hooks.ts
    store.ts
  types/
  utils/
`;

// Additional instructions
const additionalInstructions = `
1. Use React.FC for functional components with props
2. Implement strict TypeScript checks
3. Use Redux hooks (useSelector, useDispatch) in components
4. Create reusable typed hooks for Redux operations
5. Implement proper error handling in async operations
6. Use Redux DevTools for debugging
7. Follow Redux style guide for naming conventions
`;