ci(jsci): add strict checks for new files only

.github/workflows/jsci.yaml

@@ -102,3 +102,44 @@ jobs:
         run: |
           cd frontend && pnpm generate:config:web-settings
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated web settings types. Run pnpm generate:config:web-settings in frontend/ locally and commit."; exit 1)
+  code-quality:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: node-install
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
+      - name: install-pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 10
+      - name: install-frontend
+        run: cd frontend && pnpm install
+      - name: get-new-files
+        id: new-files
+        run: |
+          cd frontend
+          NEW_TS=$(git diff --name-only --diff-filter=A origin/main...HEAD -- src/ | grep -E '\.(ts|tsx)$' | tr '\n' ' ' || true)
+          NEW_SCSS=$(git diff --name-only --diff-filter=A origin/main...HEAD -- src/ | grep -E '\.scss$' | tr '\n' ' ' || true)
+          echo "ts=$NEW_TS" >> $GITHUB_OUTPUT
+          echo "scss=$NEW_SCSS" >> $GITHUB_OUTPUT
+          echo "New TS files: $NEW_TS"
+          echo "New SCSS files: $NEW_SCSS"
+      - name: lint-new-ts-files
+        if: steps.new-files.outputs.ts != ''
+        run: |
+          cd frontend
+          pnpm oxlint -c .oxlintrc.strict.json ${{ steps.new-files.outputs.ts }}
+      - name: lint-new-scss-files
+        if: steps.new-files.outputs.scss != ''
+        run: |
+          cd frontend
+          pnpm stylelint --config .stylelintrc.strict.cjs ${{ steps.new-files.outputs.scss }}

frontend/.oxlintrc.json

@@ -295,6 +295,18 @@
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "signoz/no-dashboard-fetch-outside-root": "error",
     // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
+    "signoz/no-raw-html-text-elements": "warn",
+    // Bans raw span/p/h1-6 elements - use Typography component instead
+    "signoz/no-multiple-components": "warn",
+    // Bans multiple component exports per file - split into separate files
+    "signoz/no-inline-helpers": "warn",
+    // Bans too many helper functions in component files - move to utils.ts
+    "signoz/max-component-lines": ["warn", { "max": 300 }],
+    // Warns when component files exceed max lines - split into smaller components
+    "signoz/no-getByText": "warn",
+    // Bans getByText in tests - use getByTestId or getByRole instead
+    "signoz/no-fireEvent": "warn",
+    // Bans fireEvent in tests - use userEvent instead
     "no-restricted-globals": [
       "error",
       {

frontend/.oxlintrc.strict.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "extends": ["./.oxlintrc.json"],
+  "env": {
+    "builtin": true,
+    "es2021": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "signoz/no-raw-html-text-elements": "error",
+    "signoz/no-multiple-components": "error",
+    "signoz/no-inline-helpers": "error",
+    "signoz/no-getByText": "error",
+    "signoz/no-fireEvent": "error"
+  }
+}

frontend/.stylelintrc.cjs

@@ -12,11 +12,17 @@ module.exports = {
 		),
 		path.join(__dirname, 'stylelint-rules/css-modules/prefer-css-variables.js'),
 		path.join(__dirname, 'stylelint-rules/css-modules/class-name-pattern.js'),
+		path.join(__dirname, 'stylelint-rules/no-font-properties.js'),
+		path.join(__dirname, 'stylelint-rules/no-primitive-color-tokens.js'),
+		path.join(__dirname, 'stylelint-rules/no-styles-scss.js'),
 	],
 	customSyntax: 'postcss-scss',
 	rules: {
 		// Applies to all SCSS files
 		'local/no-unsupported-asset-url': true,
+		'local/no-font-properties': [true, { severity: 'warning' }],
+		'local/no-primitive-color-tokens': [true, { severity: 'warning' }],
+		'local/no-styles-scss': [true, { severity: 'warning' }],
 	},
 	overrides: [
 		{

frontend/.stylelintrc.strict.cjs

@@ -0,0 +1,14 @@
+// Strict config for new files - rules that are warnings in base config become errors here
+// oxlint-disable-next-line typescript/no-require-imports
+const baseConfig = require('./.stylelintrc.cjs');
+
+module.exports = {
+	...baseConfig,
+	rules: {
+		...baseConfig.rules,
+		// Override warnings to errors for new files
+		'local/no-font-properties': true, // error (no severity = error)
+		'local/no-primitive-color-tokens': true,
+		'local/no-styles-scss': true,
+	},
+};

frontend/package.json

@@ -16,6 +16,8 @@
     "lint:generated": "oxlint ./src/api/generated --fix",
     "lint:fix": "oxlint ./src --fix",
     "lint:styles": "stylelint \"src/**/*.scss\"",
+    "lint:strict": "oxlint -c .oxlintrc.strict.json",
+    "lint:styles:strict": "stylelint --config .stylelintrc.strict.cjs",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",

frontend/plugins/rules/max-component-lines.mjs

@@ -0,0 +1,71 @@
+/**
+ * Rule: max-component-lines
+ *
+ * Warns when a component file exceeds configured line limit.
+ * Large components should be split into smaller ones.
+ *
+ * Config: ["warn", { "max": 300 }]
+ * Default: 300 lines
+ *
+ * This rule should always be "warn" (never "error").
+ */
+
+const DEFAULT_MAX_LINES = 300;
+
+export default {
+	meta: {
+		docs: {
+			description: 'Warn when component files exceed a line limit',
+			category: 'Code Quality',
+		},
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					max: {
+						type: 'number',
+						minimum: 1,
+					},
+				},
+				additionalProperties: false,
+			},
+		],
+	},
+	create(context) {
+		const options = context.options?.[0] || {};
+		const maxLines = options.max || DEFAULT_MAX_LINES;
+		const filename = context.getFilename();
+
+		// Only check .tsx files (component files)
+		if (!/\.tsx$/.test(filename)) {
+			return {};
+		}
+
+		// Skip test files
+		if (/\.(test|spec)\.tsx$/.test(filename)) {
+			return {};
+		}
+
+		// Skip utility/type files
+		if (
+			/\/(utils|helpers|constants|types|hooks)\.(ts|tsx)$/.test(filename) ||
+			/\/(utils|helpers|constants|types)\//.test(filename)
+		) {
+			return {};
+		}
+
+		return {
+			Program(node) {
+				const sourceCode = context.getSourceCode();
+				const lines = sourceCode.lines?.length || sourceCode.getText().split('\n').length;
+
+				if (lines > maxLines) {
+					context.report({
+						node,
+						message: `Component file has ${lines} lines (max ${maxLines}). Consider splitting into smaller components or extracting logic into hooks/utils.`,
+					});
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-fireEvent.mjs

@@ -0,0 +1,48 @@
+/**
+ * Rule: no-fireEvent
+ *
+ * Bans fireEvent in test files. Use userEvent instead for more realistic
+ * user interaction simulation.
+ *
+ * BAD:
+ *   fireEvent.click(button)
+ *   fireEvent.change(input, { target: { value: 'test' } })
+ *
+ * GOOD:
+ *   await userEvent.click(button)
+ *   await userEvent.type(input, 'test')
+ */
+
+export default {
+	create(context) {
+		return {
+			// fireEvent.click(...), fireEvent.change(...)
+			MemberExpression(node) {
+				if (
+					node.object.type === 'Identifier' &&
+					node.object.name === 'fireEvent'
+				) {
+					context.report({
+						node,
+						message:
+							"Avoid 'fireEvent'. Use userEvent from @testing-library/user-event for more realistic user interactions.",
+					});
+				}
+			},
+
+			// import { fireEvent } from '@testing-library/react'
+			ImportSpecifier(node) {
+				if (
+					node.imported.type === 'Identifier' &&
+					node.imported.name === 'fireEvent'
+				) {
+					context.report({
+						node,
+						message:
+							"Avoid importing 'fireEvent'. Use userEvent from @testing-library/user-event instead.",
+					});
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-getByText.mjs

@@ -0,0 +1,53 @@
+/**
+ * Rule: no-getByText
+ *
+ * Bans getByText, queryByText, findByText, getAllByText, queryAllByText, findAllByText
+ * in test files. Use getByTestId or getByRole instead.
+ *
+ * BAD:
+ *   screen.getByText('Submit')
+ *   getByText('Submit')
+ *
+ * GOOD:
+ *   screen.getByTestId('submit-button')
+ *   screen.getByRole('button', { name: 'Submit' })
+ */
+
+const BANNED_METHODS = new Set([
+	'getByText',
+	'queryByText',
+	'findByText',
+	'getAllByText',
+	'queryAllByText',
+	'findAllByText',
+]);
+
+export default {
+	create(context) {
+		return {
+			CallExpression(node) {
+				let methodName = null;
+
+				// screen.getByText(...) or result.getByText(...)
+				if (
+					node.callee.type === 'MemberExpression' &&
+					node.callee.property.type === 'Identifier'
+				) {
+					methodName = node.callee.property.name;
+				}
+
+				// Direct getByText(...) from destructured import
+				if (node.callee.type === 'Identifier') {
+					methodName = node.callee.name;
+				}
+
+				if (methodName && BANNED_METHODS.has(methodName)) {
+					context.report({
+						node,
+						message: `Avoid '${methodName}'. Use getByTestId or getByRole instead for more stable selectors.`,
+					});
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-inline-helpers.mjs

@@ -0,0 +1,161 @@
+/**
+ * Rule: no-inline-helpers
+ *
+ * Bans too many helper functions in component files.
+ * Helper functions should be moved to utils.ts or specialized files.
+ *
+ * Exempt:
+ * - Hooks (use* functions)
+ * - Exported functions (they're intentionally in the file)
+ * - Files named utils.ts, helpers.ts, constants.ts
+ *
+ * Threshold: More than 3 private helper functions triggers warning.
+ */
+
+const MAX_HELPERS = 3;
+
+function isHookName(name) {
+	return /^use[A-Z]/.test(name);
+}
+
+function isComponentName(name) {
+	return /^[A-Z]/.test(name);
+}
+
+export default {
+	create(context) {
+		const filename = context.getFilename();
+
+		// Skip utility files
+		if (
+			/\/(utils|helpers|constants|types|hooks)\.(ts|tsx|js|jsx)$/.test(filename) ||
+			/\/(utils|helpers|constants|types)\//.test(filename)
+		) {
+			return {};
+		}
+
+		// Skip test files
+		if (/\.(test|spec)\.(ts|tsx|js|jsx)$/.test(filename)) {
+			return {};
+		}
+
+		const privateHelpers = [];
+		const exportedNames = new Set();
+		let hasComponent = false;
+
+		return {
+			// Track exported names
+			ExportNamedDeclaration(node) {
+				if (node.declaration) {
+					if (node.declaration.type === 'FunctionDeclaration' && node.declaration.id) {
+						exportedNames.add(node.declaration.id.name);
+						if (isComponentName(node.declaration.id.name)) {
+							hasComponent = true;
+						}
+					}
+					if (node.declaration.type === 'VariableDeclaration') {
+						for (const decl of node.declaration.declarations) {
+							if (decl.id.type === 'Identifier') {
+								exportedNames.add(decl.id.name);
+								if (isComponentName(decl.id.name)) {
+									hasComponent = true;
+								}
+							}
+						}
+					}
+				}
+			},
+
+			ExportDefaultDeclaration(node) {
+				if (
+					node.declaration.type === 'FunctionDeclaration' &&
+					node.declaration.id &&
+					isComponentName(node.declaration.id.name)
+				) {
+					hasComponent = true;
+				}
+				if (node.declaration.type === 'Identifier') {
+					exportedNames.add(node.declaration.name);
+				}
+			},
+
+			// Track private function declarations
+			FunctionDeclaration(node) {
+				if (!node.id) {
+					return;
+				}
+
+				const name = node.id.name;
+
+				// Will check if exported later
+				if (
+					!isHookName(name) &&
+					!isComponentName(name) &&
+					node.parent.type !== 'ExportNamedDeclaration' &&
+					node.parent.type !== 'ExportDefaultDeclaration'
+				) {
+					privateHelpers.push({ name, node });
+				}
+			},
+
+			// Track private arrow/function expressions
+			VariableDeclaration(node) {
+				// Skip if this is an export
+				if (
+					node.parent.type === 'ExportNamedDeclaration' ||
+					node.parent.type === 'Program'
+				) {
+					for (const decl of node.declarations) {
+						if (decl.id.type !== 'Identifier') {
+							continue;
+						}
+
+						const name = decl.id.name;
+						const init = decl.init;
+
+						// Only track functions
+						if (
+							!init ||
+							(init.type !== 'ArrowFunctionExpression' &&
+								init.type !== 'FunctionExpression')
+						) {
+							continue;
+						}
+
+						// Skip hooks, components, and exports
+						if (
+							!isHookName(name) &&
+							!isComponentName(name) &&
+							node.parent.type !== 'ExportNamedDeclaration'
+						) {
+							privateHelpers.push({ name, node: decl });
+						}
+					}
+				}
+			},
+
+			'Program:exit'() {
+				// Only check files with components
+				if (!hasComponent) {
+					return;
+				}
+
+				// Filter out any that ended up exported
+				const actualPrivate = privateHelpers.filter(
+					(h) => !exportedNames.has(h.name),
+				);
+
+				if (actualPrivate.length > MAX_HELPERS) {
+					// Report on helpers beyond the threshold
+					for (let i = MAX_HELPERS; i < actualPrivate.length; i++) {
+						const { name, node } = actualPrivate[i];
+						context.report({
+							node,
+							message: `Too many helper functions (${actualPrivate.length}) in component file. Move '${name}' and other helpers to utils.ts. Helpers: ${actualPrivate.map((h) => h.name).join(', ')}.`,
+						});
+					}
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-multiple-components.mjs

@@ -0,0 +1,142 @@
+/**
+ * Rule: no-multiple-components
+ *
+ * Bans multiple React component exports in a single file.
+ * Each component should have its own file.
+ *
+ * BAD:
+ *   export function ComponentA() { return <div /> }
+ *   export function ComponentB() { return <div /> }
+ *
+ * GOOD:
+ *   // ComponentA.tsx
+ *   export function ComponentA() { return <div /> }
+ *
+ *   // ComponentB.tsx (separate file)
+ *   export function ComponentB() { return <div /> }
+ *
+ * Note: index.tsx files are exempt (re-export barrels).
+ */
+
+function isPascalCase(name) {
+	return /^[A-Z][a-zA-Z0-9]*$/.test(name);
+}
+
+function hasJSXReturn(node) {
+	if (!node.body) {
+		return false;
+	}
+
+	// Arrow function with direct JSX return: () => <div />
+	if (node.body.type === 'JSXElement' || node.body.type === 'JSXFragment') {
+		return true;
+	}
+
+	// Function body - check return statements
+	if (node.body.type === 'BlockStatement') {
+		for (const stmt of node.body.body) {
+			if (
+				stmt.type === 'ReturnStatement' &&
+				stmt.argument &&
+				(stmt.argument.type === 'JSXElement' ||
+					stmt.argument.type === 'JSXFragment' ||
+					// Conditional: condition ? <A /> : <B />
+					(stmt.argument.type === 'ConditionalExpression' &&
+						(stmt.argument.consequent.type === 'JSXElement' ||
+							stmt.argument.alternate.type === 'JSXElement')) ||
+					// Logical: condition && <A />
+					(stmt.argument.type === 'LogicalExpression' &&
+						(stmt.argument.left.type === 'JSXElement' ||
+							stmt.argument.right.type === 'JSXElement')))
+			) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
+export default {
+	create(context) {
+		const exportedComponents = [];
+
+		return {
+			// export function ComponentName() { }
+			ExportNamedDeclaration(node) {
+				if (!node.declaration) {
+					return;
+				}
+
+				// function ComponentName() {}
+				if (node.declaration.type === 'FunctionDeclaration') {
+					const name = node.declaration.id?.name;
+					if (name && isPascalCase(name) && hasJSXReturn(node.declaration)) {
+						exportedComponents.push({ name, node });
+					}
+				}
+
+				// const ComponentName = () => {} or const ComponentName = function() {}
+				if (node.declaration.type === 'VariableDeclaration') {
+					for (const declarator of node.declaration.declarations) {
+						const name = declarator.id?.name;
+						if (!name || !isPascalCase(name)) {
+							continue;
+						}
+
+						const init = declarator.init;
+						if (!init) {
+							continue;
+						}
+
+						// Arrow function or function expression
+						if (
+							(init.type === 'ArrowFunctionExpression' ||
+								init.type === 'FunctionExpression') &&
+							hasJSXReturn(init)
+						) {
+							exportedComponents.push({ name, node });
+						}
+
+						// React.memo(Component) or memo(Component)
+						if (
+							init.type === 'CallExpression' &&
+							((init.callee.type === 'Identifier' &&
+								(init.callee.name === 'memo' ||
+									init.callee.name === 'forwardRef')) ||
+								(init.callee.type === 'MemberExpression' &&
+									init.callee.object.name === 'React' &&
+									(init.callee.property.name === 'memo' ||
+										init.callee.property.name === 'forwardRef')))
+						) {
+							exportedComponents.push({ name, node });
+						}
+					}
+				}
+			},
+
+			// export default function ComponentName() { }
+			ExportDefaultDeclaration(node) {
+				if (node.declaration.type === 'FunctionDeclaration') {
+					const name = node.declaration.id?.name;
+					if (name && isPascalCase(name) && hasJSXReturn(node.declaration)) {
+						exportedComponents.push({ name, node });
+					}
+				}
+			},
+
+			'Program:exit'() {
+				if (exportedComponents.length > 1) {
+					// Report on all but the first component
+					for (let i = 1; i < exportedComponents.length; i++) {
+						const { name, node } = exportedComponents[i];
+						context.report({
+							node,
+							message: `Multiple component exports in same file. Move '${name}' to its own file. Found ${exportedComponents.length} components: ${exportedComponents.map((c) => c.name).join(', ')}.`,
+						});
+					}
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-raw-html-text-elements.mjs

@@ -0,0 +1,39 @@
+/**
+ * Rule: no-raw-html-text-elements
+ *
+ * Bans raw HTML text elements (span, p, h1-h6) in JSX.
+ * Use Typography component from @signozhq/ui instead.
+ *
+ * BAD:
+ *   <span>Hello</span>
+ *   <p>Paragraph</p>
+ *   <h1>Title</h1>
+ *
+ * GOOD:
+ *   <Typography>Hello</Typography>
+ *   <Typography.Text>Hello</Typography.Text>
+ *   <Typography.Title level={1}>Title</Typography.Title>
+ */
+
+const BANNED_ELEMENTS = new Set(['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+
+export default {
+	create(context) {
+		return {
+			JSXOpeningElement(node) {
+				if (node.name.type !== 'JSXIdentifier') {
+					return;
+				}
+
+				const elementName = node.name.name;
+
+				if (BANNED_ELEMENTS.has(elementName)) {
+					context.report({
+						node,
+						message: `Avoid raw '<${elementName}>' element. Use Typography component from @signozhq/ui instead.`,
+					});
+				}
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -13,6 +13,12 @@ import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
+import noGetByText from './rules/no-getByText.mjs';
+import noFireEvent from './rules/no-fireEvent.mjs';
+import noRawHtmlTextElements from './rules/no-raw-html-text-elements.mjs';
+import noMultipleComponents from './rules/no-multiple-components.mjs';
+import noInlineHelpers from './rules/no-inline-helpers.mjs';
+import maxComponentLines from './rules/max-component-lines.mjs';
 
 export default {
 	meta: {
@@ -27,5 +33,11 @@ export default {
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
+		'no-getByText': noGetByText,
+		'no-fireEvent': noFireEvent,
+		'no-raw-html-text-elements': noRawHtmlTextElements,
+		'no-multiple-components': noMultipleComponents,
+		'no-inline-helpers': noInlineHelpers,
+		'max-component-lines': maxComponentLines,
 	},
 };

frontend/stylelint-rules/no-font-properties.js

@@ -0,0 +1,97 @@
+/**
+ * Stylelint rule: local/no-font-properties
+ *
+ * Bans direct font/text CSS properties with hardcoded values.
+ * Use Typography component from @signozhq/ui or design tokens.
+ *
+ * BAD:
+ *   font-family: Arial;
+ *   font-weight: bold;
+ *   font-size: 14px;
+ *   line-height: 1.5;
+ *   letter-spacing: 1px;
+ *
+ * GOOD (prefer Typography component):
+ *   <Typography size="base" weight="medium">Text</Typography>
+ *
+ * GOOD (CSS tokens when Typography not applicable):
+ *   font-size: var(--font-size-base);
+ *   font-weight: var(--font-weight-medium);
+ *   line-height: var(--line-height-normal);
+ *   letter-spacing: var(--letter-spacing-normal);
+ *
+ * Available tokens from @signozhq/design-tokens:
+ *   --font-size-{xs,sm,base,lg,xl,2xl...9xl}
+ *   --font-weight-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}
+ *   --line-height-{none,tight,snug,normal,relaxed,loose}
+ *   --letter-spacing-{tighter,tight,normal,wide,wider}
+ *   --periscope-font-size-{small,base,medium,large}
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-font-properties';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	banned: (property) =>
+		`Direct '${property}' with hardcoded value is banned. Use Typography component or design tokens (--font-size-*, --font-weight-*, --line-height-*, --letter-spacing-*).`,
+});
+
+const BANNED_PROPERTIES = new Set([
+	'font-family',
+	'font-weight',
+	'font-size',
+	'font-style',
+	'font',
+	'text-transform',
+	'text-decoration',
+	'letter-spacing',
+	'line-height',
+	'word-spacing',
+	'text-indent',
+]);
+
+// Allow if value uses CSS variable tokens
+function usesDesignToken(value) {
+	return /var\s*\(\s*--/.test(value);
+}
+
+// Allow inherit/initial/unset
+function isAllowedValue(value) {
+	const lower = value.toLowerCase().trim();
+	return ['inherit', 'initial', 'unset', 'normal', 'none'].includes(lower);
+}
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkDecls((decl) => {
+			const prop = decl.prop.toLowerCase();
+
+			if (!BANNED_PROPERTIES.has(prop)) {
+				return;
+			}
+
+			// Allow if using design tokens or allowed values
+			if (usesDesignToken(decl.value) || isAllowedValue(decl.value)) {
+				return;
+			}
+
+			stylelint.utils.report({
+				message: messages.banned(decl.prop),
+				node: decl,
+				result,
+				ruleName,
+			});
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/no-primitive-color-tokens.js

@@ -0,0 +1,87 @@
+/**
+ * Stylelint rule: local/no-primitive-color-tokens
+ *
+ * Bans primitive color tokens from @signozhq/design-tokens.
+ * Use semantic tokens instead.
+ *
+ * PRIMITIVE (banned):
+ *   --bg-robin-500, --bg-cherry-200, --bg-slate-400
+ *   --text-robin-500, --text-vanilla-100
+ *   --bg-gradient-coral, --text-gradient-dawn
+ *   --bg-base-black, --text-base-white
+ *
+ * SEMANTIC (allowed):
+ *   --l1-background, --l2-foreground, --l3-border
+ *   --primary-*, --secondary-*, --accent-*
+ *   --danger-*, --warning-*, --success-*
+ *   --callout-*, --chart-*, --sidebar-*
+ *
+ * See docs/css-modules-guide.md for semantic token reference.
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-primitive-color-tokens';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	primitiveToken: (token) =>
+		`Primitive color token '${token}' is banned. Use semantic tokens (--l1-*, --l2-*, --l3-*, --accent-*, --primary-*, etc). See docs/css-modules-guide.md.`,
+});
+
+// Primitive color names from @signozhq/design-tokens
+const PRIMITIVE_COLORS = [
+	'robin',
+	'sienna',
+	'cherry',
+	'aqua',
+	'sakura',
+	'amber',
+	'forest',
+	'ink',
+	'vanilla',
+	'slate',
+	'neutraldark',
+	'neutrallight',
+	'base',
+	'gradient',
+];
+
+// Matches: --bg-<color>-<number|name> or --text-<color>-<number|name>
+// Examples: --bg-robin-500, --text-cherry-400, --bg-base-black, --bg-gradient-coral
+const PRIMITIVE_TOKEN_PATTERN = new RegExp(
+	`--(bg|text)-(${PRIMITIVE_COLORS.join('|')})-[a-z0-9-]+`,
+	'gi',
+);
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkDecls((decl) => {
+			const value = decl.value;
+
+			// Reset lastIndex for global regex
+			PRIMITIVE_TOKEN_PATTERN.lastIndex = 0;
+
+			const matches = value.match(PRIMITIVE_TOKEN_PATTERN);
+			if (matches) {
+				for (const token of matches) {
+					stylelint.utils.report({
+						message: messages.primitiveToken(token),
+						node: decl,
+						result,
+						ruleName,
+					});
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/no-styles-scss.js

@@ -0,0 +1,59 @@
+/**
+ * Stylelint rule: local/no-styles-scss
+ *
+ * Bans files named styles.scss (non-module).
+ * Use .module.scss for CSS modules instead.
+ *
+ * BAD:
+ *   styles.scss
+ *   Component.styles.scss
+ *
+ * GOOD:
+ *   Component.module.scss
+ *   styles.module.scss
+ */
+import stylelint from 'stylelint';
+import path from 'path';
+
+const ruleName = 'local/no-styles-scss';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	banned: (filename) =>
+		`Non-module SCSS file '${filename}' is banned. Use .module.scss for CSS modules instead.`,
+});
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		const filename = result.opts?.from;
+		if (!filename) {
+			return;
+		}
+
+		const basename = path.basename(filename);
+
+		// Check if it's a non-module styles.scss file
+		if (
+			basename.endsWith('.scss') &&
+			!basename.endsWith('.module.scss') &&
+			(basename === 'styles.scss' || basename.includes('.styles.scss'))
+		) {
+			stylelint.utils.report({
+				message: messages.banned(basename),
+				node: root,
+				result,
+				ruleName,
+			});
+		}
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };