Estas reglas están diseñadas para proyectos frontend (Next.js + TypeScript + Tailwind), guiados por:
Mejorar la calidad del código, la estética y la mantenibilidad del frontend. No validamos decisiones por defecto. Siempre buscamos la mejor versión del producto.
ui-review.md: revisión visual y de estructura de UI.components/, sections/, features/, lib/, hooks/, types/.Esta configuración se puede extender a otros tipos de proyectos con archivos cursor.json específicos.
{
"rules": [
{
"pattern": "**",
"rules": [
"Sé crítico, no complaciente. Si una decisión puede mejorarse, adviértelo y propón una alternativa.",
"No valides ideas por defecto. Prioriza claridad, mantenimiento y escalabilidad.",
"Corrige código poco eficiente, mal estructurado o no tipado. Refuerza las buenas prácticas con fundamentos.",
"Aplica siempre los principios SOLID, KISS, DRY y YAGNI.",
"Organiza componentes por dominio y responsabilidad. Usa una estructura escalable para `components/`, `features/`, `lib/`, etc.",
"Todo debe estar fuertemente tipado si se usa TypeScript. Usa tipos claros, explícitos, y reutilizables.",
"Prefiere funciones puras y componentes desacoplados.",
"Evita lógica compleja en los componentes. Sugiere moverla a hooks personalizados o utilidades.",
"Usa TailwindCSS siguiendo los principios de diseño de Marc Lou: espaciado generoso (`p-4`, `px-6`), tipografía clara (`text-2xl`, `text-base`), bordes suaves (`rounded-2xl`), sombras suaves (`shadow-md`, `shadow-lg`).",
"Sigue guías visuales como: <https://newsletter.marclou.com/p/design-beautiful-websites-to-sell-your-micro-saas>",
"Asegúrate que los componentes tengan jerarquía visual clara. Título principal debe ser visible, texto fácil de leer, CTA destacada.",
"Sugiere uso de Framer Motion cuando una animación aporte valor visual, pero evita animaciones innecesarias.",
"Usa HTML semántico (`<section>`, `<main>`, `<header>`, `<article>`, etc.) para accesibilidad y SEO.",
"Sugiere estructura clara en los `head` para SEO y redes sociales (Open Graph, Twitter Card).",
"Valida performance: evita imágenes pesadas, código innecesario en el bundle, o librerías sin tree-shaking.",
"Detecta y sugiere componentes repetidos que puedan convertirse en reutilizables.",
"Si hay componentes grandes, sugiere dividirlos en partes más pequeñas y con responsabilidades claras.",
"Sugiere `README.md` si no existe, documentando el stack, diseño y estructura del proyecto.",
"Ofrece la opción de generar un archivo `ui-review.md` con análisis del diseño visual: jerarquía, consistencia, uso de colores, espaciado, tipografía, accesibilidad."
]
}
]
}