SrRusian/atomic-page-builder

Atomic Page Builder

Setzen Sie Seiten aus bestehenden Komponenten zusammen. Diese Fähigkeit baut; atomic-design erstellt.

Regeln

Tun	Nicht tun
Importieren Sie Komponenten aus dem Designsystem	Neue Atome, Moleküle oder Organismen erstellen
Übernehmen Sie Layout-Werte aus der Designquelle (Figma, Spezifikation, Mockup)	Raster, Abstände oder Padding raten
Verwenden Sie bereichsbezogene Styles, die aus Tokens lesen	Werte hartcodieren (#333, 24px)
Passen Sie das Design exakt an, einschließlich responsivem Verhalten	Werte runden oder „Verbesserungen“ hinzufügen
Verwenden Sie ausschließlich die Komponentenbibliothek des Projekts	Eine externe UI-Bibliothek einbinden, die das Projekt nicht verwendet

Übergabe an atomic-design

Wechseln Sie zu atomic-design, wenn:

• ein benötigtes Atom, Molekül oder Organismus nicht existiert;
• ein neues Token erforderlich ist;
• sich ein Token-Wert im Design geändert hat und zuerst aktualisiert werden muss.

Arbeitsablauf

1. Layout-Spezifikation einholen. Wenn eine Designquelle existiert (Figma via MCP, eine Spezifikation, ein Screenshot), extrahieren Sie Raster, Abstände, Padding, Margins und Breakpoints daraus. Wenn keine existiert, fragen Sie nach einer oder geben Sie die Annahmen explizit an. Notieren Sie seiten-spezifische Überschreibungen.
2. Inventur. Listen Sie die Komponenten auf, die das Projekt bereits hat (Atome, Moleküle, Organismen, Templates) mit ihren Props.
3. Lückenanalyse. Ordnen Sie jeden Bereich der Seite einer vorhandenen Komponente zu. Listen Sie alles Nicht-Zugeordnete auf.
4. Bauen oder stoppen.
   • Alles vorhanden: Setzen Sie die Seite zusammen und gleichen Sie sie 1:1 mit der Spezifikation ab.
   • Etwas fehlt: Stoppen, die Lücken melden und zu atomic-design wechseln.
5. Verifizieren. Vergleichen Sie mit dem Design bei mobilen, Tablet- und Desktop-Breiten.

Seitenmuster

/** Dashboard-Seite. Layout von: <Design-Link oder Knoten-ID> */
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
import { Card } from '@/design-system/molecules/Card';
import { DataTable } from '@/design-system/organisms/DataTable';
import styles from './Dashboard.module.css';

export const Dashboard = () => (
  <DashboardLayout>
    <div className={styles.statsGrid}>
      <Card title="Umsatz">$12.450</Card>
    </div>
    <DataTable columns={columns} data={data} />
  </DashboardLayout>
);

.statsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
@media (min-width: 768px) {
  .statsGrid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}

Passen Sie Import-Pfade und den Styling-Ansatz an das Projekt an.

Verifikation

Rendern Sie die Seite in einem echten Browser (playwright-cli) bei 375, 768 und 1440 Pixeln in hellem und dunklem Modus, lesen Sie die Konsole und vergleichen Sie mit der Designquelle. Überprüfen Sie auch die Überschriftenreihenfolge, Landmarken, den Tastaturfluss sowie Lade-, Leer- und Fehlerzustände.

Arbeitet mit

Bedarf	Fähigkeit oder Werkzeug
Fehlende Komponente oder Token	atomic-design (erforderlicher Begleiter)
Seitenweise Kritik oder Verfeinerung	impeccable
Barrierefreiheitsprüfung	fixing-accessibility, design:accessibility-review
Seiten-Metadaten, Titel, Open Graph	fixing-metadata
Übergabe an die Entwicklung	design:design-handoff

Zusätzliche Regeln

• Setzen Sie in den Slots des Templates zusammen; greifen Sie nicht in das Innere einer Komponente ein und überschreiben Sie nicht ihre Styles.
• Seiten-spezifische Styles sind auf Layout (Raster, Abstände, Platzierung) beschränkt; alles Visuelle gehört in eine Komponente oder ein Token.
• Kopieren Sie niemals eine Komponente, um sie anzupassen; fordern Sie eine Variante über atomic-design an.
• Übergeben Sie echte, repräsentative Inhalte (lange Namen, leere Listen, Fehler) beim Überprüfen der Seite.
• Setzen Sie den Dokumenttitel und ein h1 pro Seite.
• Eine Seitendatei enthält nur Komposition und Datenverkabelung; keine wiederverwendbare UI-Logik.

Referenzen

Datei	Lesen, wenn
references/design-source-extraction.md	Layout-Werte extrahieren und die Seiten-Spezifikation schreiben
references/inventory-and-gaps.md	Komponenten inventarisieren und Lücken finden
references/composition-patterns.md	Layouts, Slots, Datenzustände, Import-Reihenfolge

Ausgabe-Checkliste

• Layout-Werte stammen aus der Designquelle, nicht aus Schätzungen
• Responsives Verhalten entspricht dem Design
• Alle Importe kommen aus dem Designsystem des Projekts
• Keine hartcodierten Werte
• Keine neuen Komponenten
• Design-Link in der Seitendatei dokumentiert