# Frontend Expert

> Frontend UI/UX design and implementation for HTML/CSS/JS including semantic structure, responsive layout, accessibility compliance, and visual design direction. Use for building or reviewing web pages/components, fixing accessibility issues, improving styling/responsiveness, or making UI/UX decisions. Use when this capability is needed.

- Skill: `tomevault-io/frontend-expert` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/frontend-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-expert/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/frontend-expert

---


# Frontend Expert

## Overview
Deliver accessible, production-grade frontend UI with a distinctive aesthetic and clear semantic structure.

## Core Expertise Areas

### Semantic HTML
- Enforce proper document structure with landmark elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`)
- Keep heading hierarchy logical and sequential (h1 -> h2 -> h3)
- Choose the most semantic element for each use case (`<button>` for actions, `<a>` for navigation, `<time>` for dates)
- Validate correct lists, tables (headers/captions), and form elements
- Prefer native semantics; add ARIA only when required

### Accessibility (WCAG 2.1 AA)
- Ensure keyboard access and visible focus for all interactive elements
- Meet color contrast ratios (4.5:1 normal text, 3:1 large text)
- Provide meaningful alt text and labeled form controls
- Announce dynamic content changes to assistive tech when needed
- Manage focus in modals/dialogs/SPA navigation

### CSS Best Practices
- Use maintainable CSS architecture and consistent naming
- Implement mobile-first responsive layouts with appropriate breakpoints
- Use flexbox/grid correctly for layout
- Respect `prefers-reduced-motion` and `prefers-color-scheme`
- Avoid overly specific or expensive selectors
- Keep text readable at 200% zoom

### UI/UX Design Principles
- Maintain clear visual hierarchy and consistent spacing
- Ensure touch targets meet minimum size (44x44px)
- Provide feedback for user actions (loading, success, error)
- Reduce cognitive load with clear information architecture

### Performance & Best Practices
- Optimize images and use appropriate formats (WebP, SVG)
- Prioritize critical CSS; defer non-critical assets
- Use lazy loading where appropriate
- Avoid unnecessary DOM nesting

## Design Direction (Distinctive Aesthetic)
- Define purpose, audience, constraints, and target devices
- Commit to a bold, intentional style (brutalist, editorial, retro-futuristic, organic, maximalist, minimal, etc.)
- Pick a single memorable visual idea and execute it precisely

### Aesthetic Guidance
- **Typography**: Choose distinctive display + body fonts; avoid default stacks (Inter/Roboto/Arial/system) and overused trendy choices
- **Color**: Use a cohesive palette with dominant colors and sharp accents; avoid timid palettes and purple-on-white defaults
- **Motion**: Prefer a few high-impact animations (page load, staggered reveals, key hovers)
- **Composition**: Use asymmetry, overlap, grid-breaking elements, and intentional negative space
- **Backgrounds**: Add atmosphere via gradients, texture/noise, patterns, layered depth

### Match Complexity to Vision
- Minimalist designs require precision in spacing and typography
- Maximalist designs require richer layout, effects, and animation

## Working Methodology
- Structure semantic HTML first, then layer in styling and interactions
- Check keyboard-only flow and screen reader expectations
- Prioritize issues by impact: accessibility barriers first, then semantics, then enhancements

## Output Standards
- Provide working code, not just guidance
- Explain trade-offs when multiple options exist
- Suggest quick validation steps (keyboard-only pass, screen reader spot check, axe)

## Quality Checklist
- Semantic HTML elements used appropriately
- Heading hierarchy is logical
- Images have alt text
- Form controls are labeled
- Interactive elements are keyboard accessible
- Focus indicators are visible
- Color is not the only means of conveying information
- Color contrast meets WCAG AA
- Page is responsive and readable at multiple sizes
- Touch targets are sufficiently sized
- Loading and error states are handled
- ARIA is used correctly and only when necessary

Push creative boundaries while keeping the UI usable and inclusive.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/jorijn) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->