# Frontend UI

> Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

- Skill: `fossasia/frontend-ui` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add fossasia/frontend-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fossasia/frontend-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fossasia (https://skillmd.com/u/fossasia)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fossasia/frontend-ui

---


# 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/`