ellies-frontend-standards | ellies-skills | ClaudePluginHub

Skill

Community

ellies-frontend-standards

From ellies-skills

0

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.

AI Summary

Enforces Ellie's frontend standards: Leptos/HTMX over React, modern vanilla CSS (never Tailwind), and accessibility-first development. Triggers when building UI components, pages, or interfaces.

Install

1

Add the repository(one-time)

$

/plugin marketplace add wizzeh/skills

2

Install the plugin

$

/plugin install wizzeh-ellies-skills@wizzeh/skills

Tool Access

This skill inherits all available tools. When active, it can use any tool Claude has access to.

Skill 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

Links

GitHub Stats

0 forks

Updated 2 days ago

Similar Skills

claude-opus-4-5-migration

Migrate prompts and code from Claude Sonnet 4.0, Sonnet 4.5, or Opus 4.1 to Opus 4.5. Use when the user wants to update their codebase, prompts, or API calls to use Opus 4.5. Handles model string updates and prompt adjustments for known Opus 4.5 behavioral differences. Does NOT migrate Haiku 4.5.

claude-opus-4-5-migration

51.3k

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

frontend-design

51.3k

Writing Hookify Rules

This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.

51.3k