# Frontend

> Frontend coding conventions using Preact and Tailwind. Use when writing or reviewing frontend JavaScript, HTML, or CSS code for web UI components.

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

---


* Use Preact unless otherwise specified
* Use Tailwind unless otherwise specified

## Framework Selection

| Framework | When to Use |
|-----------|-------------|
| Next.js + shadcn/ui | `workers/` directory (Cloudflare Workers) |
| Preact + Tailwind | `cluster/applications/` static frontends |

## Preact

* Create elements with `h` function instead of JSX/TSX syntax

## Accessibility

| Framework | Approach |
|-----------|----------|
| shadcn/ui | Built-in accessibility via Radix UI primitives |
| Preact + Tailwind | Manual implementation required |

### Manual Accessibility Implementation

When not using shadcn/ui, ensure accessibility compliance:

| Element | Required |
|---------|----------|
| `<select>` | Associate with `<label>` using `for`/`id`, use `class: "sr-only"` if visual label not needed |
| `<input>` | Associate with `<label>` or use `aria-label` attribute |
| `<table>` headers | Use `<th scope="col">` or `<th scope="row">` |

Example (Preact):
```javascript
h("div", {class: "flex flex-col"}, [
    h("label", {for: "search-box", class: "sr-only"}, "Search"),
    h("select", {id: "search-box", ...}, [...]),
])
```