Files
ndsolutionswebsite/.agents/skills/bento-grid-architecture/SKILL.md
2026-07-07 00:35:37 +02:00

685 B

name, description
name description
bento-grid-architecture Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).

Bento Grid Architecture Guidelines

  • Non-Linear Layouts: Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (grid-cols-1 md:grid-cols-3) mit unterschiedlichen Box-Breiten (md:col-span-2 vs. md:col-span-1).
  • Content-Mix Rule: Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons).
  • Visual Anchor: Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert).