Ellies Frontend Standards

---
name: ellies-frontend-standards
description: Frontend development standards for Ellie's projects. Use when building frontend interfaces, components, pages, or applications. Enforces tech stack preferences (Leptos > HTMX/SolidJS > React, modern vanilla CSS, no Tailwind) and accessibility-first development. Always apply these standards unless they conflict with an existing project's established patterns.
---

# Ellie's Frontend Standards

## Core Principles

**Consistency trumps these guidelines.** If working in an existing project with established patterns, follow those patterns even if they contradict the preferences below.

## Tech Stack

### Frameworks (in order of preference)

1. **Leptos** (Rust) - Preferred when Rust is an option
2. **HTMX** or **SolidJS** - Preferred for JS-based projects
3. **React** - Only when required by existing project or explicit request

### CSS

**Use modern vanilla CSS.** Take advantage of:
- CSS custom properties (variables)
- Native CSS nesting
- Container queries
- `:has()`, `:is()`, `:where()` selectors
- CSS Grid and Flexbox
- `clamp()` for fluid typography and spacing

**Never use Tailwind.** No exceptions.

### Aesthetics

Defer to the `frontend-design` skill for visual design guidance (typography, color, motion, layout aesthetics).

## Accessibility

Accessibility is a priority, not an afterthought:

- **Semantic HTML first** - Use the right element for the job (`<button>`, `<nav>`, `<main>`, `<article>`, etc.)
- **Keyboard navigation** - All interactive elements must be keyboard accessible
- **Focus management** - Visible focus indicators, logical focus order, focus trapping in modals
- **ARIA when needed** - Only when semantic HTML isn't sufficient; prefer native elements
- **Color contrast** - Meet WCAG AA minimum (4.5:1 for text, 3:1 for large text/UI)
- **Motion** - Respect `prefers-reduced-motion`
- **Screen reader testing** - Consider how content reads linearly