Claude-skill-registry ellies-frontend-standards

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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/ellies-frontend-standards" ~/.claude/skills/majiayu000-claude-skill-registry-ellies-frontend-standards && rm -rf "$T"

manifest: skills/data/ellies-frontend-standards/SKILL.md

source content

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