ellies-frontend-standards

wizzeh's avatarfrom wizzeh

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines frontend development by enforcing strict architectural standards and tech stack preferences, including Leptos, HTMX, and SolidJS. It prioritizes modern vanilla CSS and accessibility-first design, ensuring that all generated interfaces are semantic, keyboard-friendly, and compliant with WCAG AA standards without relying on utility-first frameworks like Tailwind CSS.

Use Cases

  • Developing high-performance frontend interfaces using preferred frameworks like Leptos, HTMX, or SolidJS.
  • Implementing responsive and fluid layouts using modern CSS features such as Grid, Flexbox, and Container Queries.
  • Ensuring web accessibility by generating semantic HTML and managing focus for interactive elements.
  • Maintaining consistency across projects by enforcing established frontend patterns and avoiding prohibited libraries like Tailwind CSS.
nameellies-frontend-standards
descriptionFrontend 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