| 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)
- Leptos (Rust) - Preferred when Rust is an option
- HTMX or SolidJS - Preferred for JS-based projects
- 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