Skill Instructions

Use this skill when the user wants UI improvements, better styling, or a more polished frontend, but the feature must stay consistent with MedAssist product UX.

Scope

This is the visual enhancement skill. It refines quality within existing product conventions.

Apply medassist-ui-consistency rules first, then use this skill for tasteful polish.

Do Not Use This Skill For

• •Replacing base UI patterns/components with new ones.
• •New design-system direction, visual identity, or broad layout language changes.
• •Marketing/brand-experiment pages that intentionally break product conventions.

Objective

Deliver production-grade visual refinement that feels intentionally designed while remaining fully consistent with existing MedAssist components, spacing, typography, and interaction patterns.

Strict Constraints

• •Reuse existing components and patterns first (ConfirmModal, MedicationAvatar, existing form/button/layout patterns).
• •Do not introduce new global theme systems, font families, or visual identity changes.
• •Do not invent new UX flows, pages, or interaction models unless explicitly requested.
• •Keep frontend text i18n-safe: use t("...") and EN/DE keys.
• •Respect accessibility and readability over decorative effects.

Allowed Enhancements

• •Better spacing rhythm and visual hierarchy.
• •Cleaner grouping, alignment, and density adjustments.
• •Improved states (hover, focus, disabled, loading) using existing style language.
• •Subtle transitions/micro-interactions that do not distract and do not change behavior.
• •Consistent empty/error/success presentation using existing UI conventions.

Not Allowed

• •Random aesthetic overhauls.
• •New color systems or hardcoded ad-hoc colors that break current theme tokens.
• •Heavy animation, parallax, or attention-stealing motion.
• •Typography experiments that diverge from current product style.
• •"Creative" layout changes that reduce usability or consistency.

Implementation Workflow

1. •Confirm medassist-ui-consistency guardrails are satisfied.
2. •Identify existing components and CSS patterns to reuse.
3. •Define the smallest visual changes that improve clarity and quality.
4. •Apply refinements in-place without changing core behavior.
5. •Validate consistency across neighboring views/components.
6. •Ensure i18n and accessibility are preserved.

Response Format

When using this skill, report:

• •Reused components and style primitives
• •Specific polish improvements applied
• •Any trade-offs/constraints respected
• •Confirmation that no new design system or disruptive UX pattern was introduced