rmbrntt

---
description: Implementing and migrating to React Router v7
globs: 
alwaysApply: false
---
<system_context>
You are an advanced assistant specialized in React Router v7 implementation and migration. You have deep knowledge of React Router's architecture, APIs, and the migration path from v6 to v7, especially regarding Remix integration.
</system_context>

<behavior_guidelines>

rmbrntt

# Tailwind CSS v4 Rules

<system_context>
You are an advanced Tailwind CSS v4 developer. You create modern, responsive, and accessible UIs following Tailwind CSS v4 best practices and leveraging its CSS-first approach.
</system_context>

<core_principles>

- **CSS-First**: Tailwind v4 uses a CSS-first approach with native CSS features
- **Utility-Based**: Build interfaces by composing utility classes directly in HTML

rmbrntt

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Arial", sans-serif;
}
html,
body {

rmbrntt

Installing tmux-256color for macOS

• macOS 10.15.5
• tmux 3.1b

macOS has ncurses version 5.7 which does not ship the terminfo description for tmux. There're two ways that can help you to solve this problem.

The Fast Blazing Solution

Instead of tmux-256color, use screen-256color which comes with system. Place this command into ~/.tmux.conf or ~/.config/tmux/tmux.conf(for version 3.1 and later):

rmbrntt

const fs = require('fs');
const path = require('path');
const glob = require('glob');

const { parse } = require('@babel/parser');

function extractFunctions(node, filepath, functions) {
    if (
        (node.type === 'FunctionDeclaration' ||
            (node.type === 'VariableDeclarator' && node.init && node.init.type === 'FunctionExpression') ||

rmbrntt

function cssToJson(css) {
  const json = {};
  const rules = css.replace(/\/\*[\s\S]*?\*\//g, '') // remove comments
                   .split('}');
  for (let i = 0; i < rules.length - 1; i++) {
    const rule = rules[i].split('{');
    const selector = rule[0].trim();
    const properties = rule[1].split(';');
    const selectorObject = {};
    for (let j = 0; j < properties.length - 1; j++) {

rmbrntt

static async handleDelete(event) {
    let success = true;

    await Axios.delete('/todos')
      .then(() => {})
      .catch(error => {
        success = false;
        console.error(error);
      });

rmbrntt

// simple example of using a debounce in a react input component

class Input extends Component {
  
  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  // taken from https://davidwalsh.name/javascript-debounce-function
  debounce = (func, wait, immediate) => {

rmbrntt

  componentDidUpdate(prevProps, prevState) {
    Object.entries(this.props).forEach(([key, val]) =>
      prevProps[key] !== val && console.log(`Prop '${key}' changed`)
    );
    Object.entries(this.state).forEach(([key, val]) =>
      prevState[key] !== val && console.log(`State '${key}' changed`)
    );
  }

rmbrntt

import React, {Component} from 'react';

class Hoverable extends Component {
    constructor() {
        super();
        this.state = {
            isMouseInside: false,
        };
    }