JSX Tool/docs

rules.md

Customize how JSX Tool understands your project by defining styling guidelines, component patterns, and coding conventions in a rules.md file.

Coming in v1.0.6+

The rules.md file is not yet supported in the current version of the JSX Tool browser extension. This feature will be available in version 1.0.6 and later. You can create the file now in preparation for the update.

What is rules.md?

The rules.md file provides context to the LLMs powering JSX Tool about your project's coding standards, styling preferences, and architectural decisions. When you use the extension to generate or modify code, these rules help ensure the AI produces code that matches your project's conventions.

When Will This Be Useful?

After version 1.0.6 of the browser extension is released, the LLMs will automatically read your rules.md file to understand your project's styling conventions and code patterns. Check back after the release for detailed examples and best practices.

Creating rules.md

Using the Init Command

The easiest way to create a rules.md file is with the init command:

npx @jsx-tool/jsx-tool init

This creates a .jsxtool/ directory with both rules.md and (for non-Vite projects) config.json.

Manual Creation

You can also create the file manually:

mkdir -p .jsxtool
touch .jsxtool/rules.md

File Location

The .jsxtool/ directory should be placed next to your package.json:

.jsxtool/
├── config.json    # Dev server configuration (non-Vite only)
└── rules.md       # Custom prompting rules

Monorepos: Place the .jsxtool/ directory in your app package directory (where your dev server runs), not at the monorepo root.

How It Will Work

Once supported in the browser extension (v1.0.6+):

  1. JSX Tool will automatically read your rules.md file when you start using the extension
  2. The rules will be included in the context sent to the LLM
  3. Generated and modified code will follow your documented conventions
  4. You can update the rules at any time and they'll apply to future interactions

Use Cases

The rules.md file will be particularly useful for:

  • Documenting styling frameworks and design systems (e.g., Tailwind conventions, custom component libraries)
  • Defining component structure and organization patterns
  • Specifying naming conventions for files, components, and functions
  • Outlining accessibility requirements and standards
  • Establishing state management patterns
  • Setting code quality guidelines and best practices

What's Next

Detailed documentation including examples and best practices will be added once version 1.0.6 of the JSX Tool browser extension is released. In the meantime:

  • Create the file now if you'd like to be ready for the feature
  • Document your project's conventions in markdown format
  • Watch for the v1.0.6 release announcement
  • Return to this page for comprehensive examples and guidelines