frontend-ui

name	frontend-ui
description	Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

Skill: Frontend UI

When to Use

Use this skill when implementing or modifying UI behavior in:

• app/eventyay/static/ assets
• app/eventyay/webapp/ Vue applications
• Django templates under app/eventyay/**/templates/

Core Workflow

1. Identify whether the change belongs to legacy static assets or a Vue app.
2. Keep behavior in external scripts (no inline JS; no jQuery).
3. Ensure responsive behavior across common mobile and desktop widths.
4. Validate accessibility basics: labels, keyboard navigation, focus visibility, and semantic landmarks.
5. Add or update tests when UI behavior changes are user-visible.

Guardrails

• Follow .github/instructions/js.instructions.md for JS/Vue conventions.
• Follow .github/instructions/django-template.instructions.md for template conventions.
• Preserve existing design language unless the task explicitly requests a redesign.

Supporting Artifacts

• Implementation references: references/
• Reusable templates/checklists: assets/
• Example validation scenarios: tests/