|
1 |
| -# AI rules |
| 1 | +# Guidelines for AI Assistants |
2 | 2 |
|
3 |
| -Use our AI rules to get the most out of Nuxt UI when using AI tools like Cursor, Windsurf, Claude Code, and others. |
| 3 | +Leverage the full power of Nuxt UI in your AI-powered workflow. These guidelines are designed to help AI coding assistants like Cursor, Windsurf, Claude Code, and others understand the best practices for working with the Nuxt UI component library. |
4 | 4 |
|
5 |
| -## Installation |
| 5 | +## Getting Started |
6 | 6 |
|
7 |
| -You can download the latest version of Hugo's AI rules from the [rules folder](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1). Copy and paste these into your prompts as needed, or set them up in your AI tool of choice. |
| 7 | +You can grab the latest version of the guidelines from the [rules folder](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1). From there, you can either copy and paste them into your prompts on a case-by-case basis or integrate them directly into your preferred AI assistant's configuration for persistent access. |
8 | 8 |
|
9 | 9 | ## Using with Cursor
|
10 | 10 |
|
11 |
| -To add these rules to Cursor, create a new file at `.cursor/rules/nuxt-ui.mdc`, and add this header to the new file (adjusting the file extensions if necessary): |
| 11 | +To integrate these guidelines with Cursor, follow these steps: |
12 | 12 |
|
13 |
| -```md |
14 |
| ---- |
15 |
| -name: nuxt-ui |
16 |
| -description: Best practices for using and upgrading Nuxt UI |
17 |
| -globs: ["**/*.{js,ts,css,html,vue}"] |
18 |
| -tags: |
19 |
| - - nuxt-ui |
20 |
| - - nuxt |
21 |
| - - library |
22 |
| - - ui |
23 |
| ---- |
24 |
| -``` |
| 13 | +1. Start by creating a new file named `nuxt-ui.mdc` inside the `.cursor/rules/` directory of your project. |
25 | 14 |
|
26 |
| -Finally copy and paste the [rules](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1) into the end of the file. |
| 15 | +2. Populate the new file with the following header. Be sure to adjust the `globs` property to match the file types you are working with. |
27 | 16 |
|
28 |
| -## Using with Claude Code |
| 17 | + ```md |
| 18 | + --- |
| 19 | + name: nuxt-ui |
| 20 | + description: Best practices for using and upgrading Nuxt UI |
| 21 | + globs: ["**/*.{js,ts,css,html,vue}"] |
| 22 | + tags: |
| 23 | + - nuxt-ui |
| 24 | + - nuxt |
| 25 | + - library |
| 26 | + - ui |
| 27 | + --- |
| 28 | + ``` |
29 | 29 |
|
30 |
| -### Adding the rules as needed |
| 30 | +3. To complete the setup, append the full content of the [guidelines file](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1) to the end of your newly created `nuxt-ui.mdc`. |
31 | 31 |
|
32 |
| -If you want fine-grained control, store the [rules](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1) in a dedicated rules folder like `rules/nuxt-ui.md`. Then, whenever you want to make your current Claude Code session an expert in Nuxt UI, `@`-mention the rules to make Claude read it: |
| 32 | +## Using with Claude Code |
33 | 33 |
|
34 |
| -``` |
35 |
| -╭──────────────────────────────────────────────────────────────────────────────╮ |
36 |
| -│ > read @rules/nuxt-ui.md and create a custom accordion │ |
37 |
| -╰──────────────────────────────────────────────────────────────────────────────╯ |
38 |
| -``` |
| 34 | +You have two main options for using these guidelines with Claude Code. |
39 | 35 |
|
40 |
| -### Referencing in your CLAUDE.md file |
| 36 | +### On-Demand Context |
41 | 37 |
|
42 |
| -Copy and paste the [rules](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1) directly into your `CLAUDE.md` file. Claude Code will now read them for every new session. |
| 38 | +For more granular control, place the [guidelines file](https://github.com/hugorcd/nuxt-ui-rules/blob/main/rules/nuxt-ui.md?plain=1) in a designated project directory, for instance, `rules/nuxt-ui.md`. Then, anytime you need Claude to be aware of Nuxt UI best practices for a specific task, simply `@`-mention the file path in your prompt to load it into the current session's context. |
0 commit comments