@usevyre/eslint-plugin

Installation

npm install --save-dev @usevyre/eslint-plugin
# or
pnpm add -D @usevyre/eslint-plugin

Setup

ESLint 9+ (flat config)

// eslint.config.js
import vyrePlugin from '@usevyre/eslint-plugin';

export default [
  vyrePlugin.configs.recommended,
  // ...your other config
];

ESLint 8 (legacy config)

// .eslintrc.js
module.exports = {
  plugins: ['@usevyre'],
  extends: ['plugin:@usevyre/recommended'],
};

// or manually:
module.exports = {
  plugins: ['@usevyre'],
  rules: {
    '@usevyre/no-invalid-vyre-props': 'error',
    '@usevyre/no-inline-layout-styles': 'warn',
  },
};

Rule: no-invalid-vyre-props

Errors on invalid component usage. Covers two categories (severity error in the recommended config):

Invalid enum values

// ❌ ESLint error (red underline in editor)
<Button variant="blue" />
// 'blue' is not a valid value for Button variant. Valid: primary, secondary, ghost, accent, teal, danger

// ✅ Valid
<Button variant="accent" />

Hallucinated props

// ❌ ESLint error
<Badge color="green" />
// 'color' prop does not exist on Badge → Use variant= instead

// ✅ Valid
<Badge variant="success" />

Rule: no-inline-layout-styles

Flags hand-written display: flex / display: grid inline styles — the single biggest source of AI-hallucinated layout code — and points to the Stack and Grid primitives, where spacing is a design token instead of a magic number. Severity warn in the recommended config so it does not block adoption. Box's documented style escape hatch is intentionally exempt.

// ⚠️ ESLint warning
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>…</div>
// Avoid inline display:flex. Use <Stack> — gap/align/justify are design tokens.

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>…</div>
// Avoid inline display:grid. Use <Grid> — columns and gap are design tokens.

// ✅ Valid
<Stack direction="row" gap="md" align="center">…</Stack>
<Grid columns={3} gap="md">…</Grid>

// ✅ Still allowed — Box exposes style as a documented escape hatch
<Box style={{ display: 'flex' }}>…</Box>

Editor integration

Works with any editor that supports ESLint — VS Code (ESLint extension), WebStorm, Neovim, and more. Errors appear inline as you type, without running any CLI command.