Menü
Enforce non-negotiable MedAssist UI guardrails by reusing existing components, styles, and interaction patterns, including equivalent requests phrased in German.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | medassist-ui-consistency |
| description | Enforce non-negotiable MedAssist UI guardrails by reusing existing components, styles, and interaction patterns, including equivalent requests phrased in German. |
Use this skill when implementing or editing UI flows, modals, buttons, forms, schedule views, or settings screens.
This is the guardrail skill for UI work. Use it to enforce consistency and prevent design drift.
Use medassist-frontend-polish only after these guardrails are satisfied.
ConfirmModal, MedicationAvatar) before creating new primitives.Every modal/overlay must follow these rules:
AppModal for app-owned dialogs. Do not create new raw overlay/modal DOM for product UI.AppModalFooter for modal action bars. Do not add className to AppModalFooter; use its props (left, layout, stackOnMobile) for approved variants.justify-content: space-between, zero horizontal padding, or custom sticky/footer scroll behavior.AppModal body. Do not add a second overflow-y: auto on modal content unless a nested scroll region is the explicit product requirement.AppModal/useModalHistory patterns so only the top modal handles close/back behavior.npm --prefix frontend run test:run -- src/test/ui/modal-footer-contract.test.tsnpx playwright test --config=playwright.stable.config.ts e2e/modal-layout-contract.spec.tsProvide:
medassist-frontend-polish constraints remain compatible (if polish work is also requested)Apply assumption clarity, simplicity-first implementation, surgical diffs, and goal-driven verification for non-trivial coding tasks.
Guard MedAssist architectural boundaries and route/data-flow conventions when changing backend or frontend code, including equivalent requests phrased in German.
Validate MedAssist configuration changes across env vars, Docker compose, proxy settings, and runtime defaults, including equivalent requests phrased in German.
Enforce backward-compatible database changes for MedAssist SQLite and Drizzle migrations, including equivalent requests phrased in German.
Ensure MedAssist documentation stays aligned with behavior changes in APIs, configuration, setup, and operations, including equivalent requests phrased in German.
Improve frontend visual quality within the existing MedAssist design system, without introducing new themes, font stacks, or disruptive UI patterns, including equivalent requests phrased in German.