Add docs

README.md

@@ -88,8 +88,9 @@ Where rules are included in the configs `recommended`, or `all` it is indicated
 | [`@pandacss/no-important`](docs/rules/no-important.md)                                   |               |
 | [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md)               | ✔️            |
 | [`@pandacss/no-invalid-nesting`](docs/rules/no-invalid-nesting.md)                       | ✔️            |
-| [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md)                   | ✔️            |
+| [`@pandacss/no-margin-properties`](docs/rules/no-margin-properties.md)                   |               |
 | [`@pandacss/no-physical-properties`](docs/rules/no-physical-properties.md)               |               |
+| [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md)                   | ✔️            |
 | [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md)           |               |
 | [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md)       |               |
 | [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md)     |               |

docs/rules/no-margin-properties.md

@@ -0,0 +1,60 @@
+[//]: # (This file is generated by eslint-docgen. Do not edit it directly.)
+
+# no-margin-properties
+
+Discourage using margin properties for spacing; prefer defining spacing in parent elements with `flex` or `grid` using the `gap` property for a more resilient layout. Margins make components less reusable in other contexts.
+
+📋 This rule is enabled in `plugin:@pandacss/all`.
+
+## Rule details
+
+❌ Examples of **incorrect** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ marginLeft: '4' });
+```
+```js
+
+import { css } from './panda/css';
+
+function App(){
+  return <div className={css({ margin: '3' })} />;
+};
+```
+```js
+
+import { Circle } from './panda/jsx';
+
+function App(){
+  return <Circle marginX="2" />;
+}
+```
+
+✔️ Examples of **correct** code:
+```js
+import { css } from './panda/css';
+
+const styles = css({ display: 'flex', gap: '4' });
+```
+```js
+
+import { grid } from './panda/css';
+
+function App(){
+  return <div className={grid({ gap: '3' })} />;
+};
+```
+```js
+
+import { Flex } from './panda/jsx';
+
+function App(){
+  return <Flex gap="2" />;
+}
+```
+
+## Resources
+
+* [Rule source](/plugin/src/rules/no-margin-properties.ts)
+* [Test source](/tests/no-margin-properties.test.ts)