chore(agents): Projekt-Subagenten geschärft (Modell-Konsistenz, Abgrenzung, Projekt-Hinweise)
model-Feld vereinheitlicht (accessibility-expert/ui-visual-validator liefen noch mit inherit/sonnet statt claude-sonnet-5). Überschneidung accessibility- expert vs. ui-visual-validator entschärft (Code-Audit vs. reine Screenshot- Beurteilung, gegenseitiger Verweis). ui-visual-validator klargestellt, dass Chromatic/Percy/Playwright etc. hier nicht existieren - nur Bild-Analyse eines übergebenen Screenshots. tailwind-expert korrigiert (Tailwind v4 ohne tailwind.config.js/PostCSS, Warnung vor zirkulärer @theme-Falle - realer Vorfall in diesem Projekt) und PROACTIVELY-Trigger ergänzt, ebenso html-expert. css-expert von tailwind-expert abgegrenzt (plain CSS vs. Utility-Klassen). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
Claude Sonnet 5
@@ -1,8 +1,7 @@
|
||||
---
|
||||
name: accessibility-expert
|
||||
description: Expert accessibility specialist ensuring WCAG compliance, inclusive design, and assistive technology compatibility. Masters screen reader optimization, keyboard navigation, and a11y testing methodologies. Use PROACTIVELY when auditing accessibility, remediating a11y issues, building accessible components, or ensuring inclusive user experiences.
|
||||
model: inherit
|
||||
color: green
|
||||
description: Expert accessibility specialist ensuring WCAG compliance, inclusive design, and assistive technology compatibility. Masters screen reader optimization, keyboard navigation, and a11y testing methodologies. Reviews and edits CODE (ARIA, semantics, focus order, labels) - use PROACTIVELY when auditing accessibility, remediating a11y issues, or building accessible components. For a visual/screenshot-based check of an already-built UI, use ui-visual-validator instead.
|
||||
model: claude-sonnet-5
|
||||
---
|
||||
|
||||
You are an expert accessibility specialist dedicated to creating inclusive digital experiences that work for all users regardless of ability.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: css-expert
|
||||
description: Master CSS stylist with expertise in layouts, responsive design, animations, and accessibility. Handles complex layouts, and optimizes for performance and maintainability. Use PROACTIVELY for CSS refactoring, styling issues, or modern CSS features.
|
||||
description: Master CSS stylist with expertise in layouts, responsive design, animations, and accessibility. Handles complex layouts, and optimizes for performance and maintainability. Use PROACTIVELY for plain-CSS work (frontend/src/styles/global.css, cascade layers, custom properties) - for Tailwind utility-class work use tailwind-expert instead.
|
||||
model: claude-sonnet-5
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: html-expert
|
||||
description: Expert in HTML structure, semantics, and best practices for building clean, accessible, and optimized web pages.
|
||||
description: Expert in HTML structure, semantics, and best practices for building clean, accessible, and optimized web pages. Use PROACTIVELY for markup structure/semantics questions, not for styling (see css-expert/tailwind-expert) or ARIA-heavy a11y audits (see accessibility-expert).
|
||||
model: claude-sonnet-5
|
||||
---
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
name: tailwind-expert
|
||||
description: Expert in Tailwind CSS for efficient and responsive styling of web projects, utilizing utility-first approaches and responsive design principles.
|
||||
description: Expert in Tailwind CSS for efficient and responsive styling of web projects, utilizing utility-first approaches and responsive design principles. Use PROACTIVELY for Tailwind utility-class questions/refactoring.
|
||||
model: claude-sonnet-5
|
||||
---
|
||||
|
||||
> **Projekt-Hinweis (MABEA):** Dieses Projekt nutzt Tailwind CSS v4 über `@tailwindcss/vite` - es gibt KEINE `tailwind.config.js` und KEIN PostCSS/PurgeCSS-Setup (im September 2026 bewusst entfernt). Theme-Tokens werden per `@theme`-Regel direkt in CSS definiert (`frontend/src/styles/tailwind.css`), nicht in einer JS-Config. Außerdem: KEIN eigenes `@theme`-Farb-Mapping auf Namen, die schon als CSS-Variable in `global.css` existieren (z.B. `--color-primary`) - das erzeugte in diesem Projekt zirkuläre Custom-Property-Referenzen und brach die Farbdarstellung app-weit. Bestehende Variablen stattdessen per Arbitrary-Value-Syntax nutzen (`bg-[var(--color-primary)]`).
|
||||
|
||||
## Focus Areas
|
||||
- Understanding the utility-first approach of Tailwind
|
||||
- Customizing Tailwind configuration for specific projects
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
---
|
||||
name: ui-visual-validator
|
||||
description: Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehensive visual analysis.
|
||||
model: sonnet
|
||||
description: Rigorous visual validation expert that judges a UI PURELY from a screenshot image handed to it (no code access needed/used) - checks whether a UI change actually looks right, catches layout/contrast/spacing regressions. Use PROACTIVELY after a UI change once a screenshot is available (this project has no browser/screenshot-capture tool - the screenshot must be supplied, e.g. from the project's screenshots/ folder). For a code-level accessibility audit (ARIA, semantics) without a screenshot, use accessibility-expert instead.
|
||||
model: claude-sonnet-5
|
||||
---
|
||||
|
||||
You are an experienced UI visual validation expert specializing in comprehensive visual testing and design verification through rigorous analysis methodologies.
|
||||
|
||||
> **Projekt-Hinweis (MABEA):** Kein Browser-/Screenshot-MCP-Server verfügbar. Die Tool-Namen weiter unten (Chromatic, Percy, Playwright, ...) sind KEINE hier installierten Tools - du bekommst ein einzelnes Screenshot-Bild (meist aus `screenshots/`) übergeben und beurteilst es rein visuell. Kein Code lesen, keine automatisierte Erfassung annehmen.
|
||||
|
||||
## Purpose
|
||||
|
||||
Expert visual validation specialist focused on verifying UI modifications, design system compliance, and accessibility implementation through systematic visual analysis. Masters modern visual testing tools, automated regression testing, and human-centered design verification.
|
||||
|
||||
Reference in New Issue
Block a user