Sync design system from flows.portal

Author: Sebastian BURGIN-FIX (ext)

README.md

@@ -56,6 +56,38 @@ import { pushToast } from '@codebar-ag/storybook-docuhub';
 pushToast({ message: 'Saved.', type: 'success' });
 ```
 
+## Before building new UI in a consuming app
+
+Component-based consistency is the point of this package: every app should look
+identical because every app is built from the same atoms.
+
+1. **Check Storybook first.** Run `npm run dev` in this package (or open the
+   deployed styleguide) and search `src/index.ts`'s barrel export before writing
+   any markup for a new screen or feature.
+2. **Never re-implement an atom.** If this package already ships a `Button`,
+   `Card`, `Table`, `Badge`, `Modal`, form field, dropdown, icon, list-row, metric,
+   or alert, the consuming app must import and use it — not hand-roll an
+   equivalent with raw `<button>`/`<table>`/`<div>` + Tailwind classes.
+3. **Compose, don't fork.** If an atom is close but not quite right, extend it via
+   its existing props/slots/`class` overrides. Don't copy its template into the
+   app and tweak it.
+4. **Domain-specific "organisms"** (billing panels, instance rows, resource lists,
+   …) stay in the consuming app, but must be assembled only from these atoms,
+   never from raw HTML elements.
+
+## Proposing a new atom
+
+Only add a component here when no existing atom (or composition of atoms) can
+satisfy the need. A new atom must:
+
+- Live in `src/components/` as a `<script setup>` Vue 3 SFC.
+- Be styled only with token-driven Tailwind utility classes — no `<style>` blocks,
+  no `@apply`, no bespoke CSS.
+- Ship a `*.stories.ts` entry documenting its variants.
+- Pass `npm run typecheck` and `npm run lint`.
+- Be exported from `src/index.ts` (and registered on the `Flows` plugin if it's a
+  globally-usable atom).
+
 ## Develop
 
 ```bash

eslint.config.js

@@ -17,6 +17,8 @@ export default ts.config(
         rules: {
             // Atoms are intentionally single-word (Button, Card, Icon…).
             'vue/multi-word-component-names': 'off',
+            // `const { class: _omit, ...rest } = attrs` discards `class` on purpose.
+            '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
         },
     },
 );