Cursor Rules

[EAS-Rhys]

Problem or use case

We use cursor to do a lot of our rapid prototyping for customers, usually as far as POC stage. I can see there is lovable and bolt new support, it is quite awkward to get the agents to reference the web pages for direction consistently,

Proposed solution

Could you either provide a flat file based usage guide for all components so we could distill into lookup mds and tied to cursor rules or a cursor rules solution for consistent use. We typically get the first 50% looking great then it starts reverting back to standard tailwind etc rather than referencing the website or components directory.

Alternatives considered

No response

Examples or mockups

No response

[deebov]

Hey @EAS-Rhys, thanks for the proposal! Do you have any example of others doing this well?

[EAS-Rhys]

Not specifically for component collections but the core premise is the same regardless.

Define best practice for structure of an untitled ui vite app for example and then add rules like:

• When using icons check "untitled_icons.json" for available Icon Classes and correct naming. ( I have just dumped all the icon classes from @untitledui/icons/dist into a file like this. The ideal would be to have a json file for all of them with descriptions along side to aid the decision process )
• When using components check "untitled_components.json" for available components, description and usage to ensure a consistent and compliant approach.
• Always favour untitledui components over standard react/tailwind unless where unavailable, where unavailable make me aware.

The key is structured data for reference, maybe this is available but i havent seen it so far, all the icon resources are the lower-case svg/css type references not the React/Next style class names which is why i think it falls down.

The standard Next.JS mdc for example looks like this:

---

description: This rule explains Next.js conventions and best practices for fullstack development.
globs: /*.js,/.jsx,**/.ts,**/*.tsx
alwaysApply: false

Next.js rules

• Use the App Router structure with page.tsx files in route directories.
• Client components must be explicitly marked with 'use client' at the top of the file.
• Use kebab-case for directory names (e.g., components/auth-form) and PascalCase for component files.
• Prefer named exports over default exports, i.e. export function Button() { /* ... */ } instead of export default function Button() { /* ... */ }.
• Minimize 'use client' directives:
  • Keep most components as React Server Components (RSC)
  • Only use client components when you need interactivity and wrap in Suspense with fallback UI
  • Create small client component wrappers around interactive elements
• Avoid unnecessary useState and useEffect when possible:
  • Use server components for data fetching
  • Use React Server Actions for form handling
  • Use URL search params for shareable state
• Use nuqs for URL search param state management

[EAS-Rhys]

untitled_icons.json

[deebov]

Hey everyone, we've recently released our AGENT.md files which are universal.

Please see:

https://www.untitledui.com/react/integrations/claude#claudemd-instructions
https://www.untitledui.com/react/integrations/gemini#geminimd-instructions