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.
View on GitHubskills/ellies-frontend-standards/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/wizzeh/skills/blob/main/skills/ellies-frontend-standards/SKILL.md -a claude-code --skill ellies-frontend-standardsInstallation paths:
.claude/skills/ellies-frontend-standards/# 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