| name | frontend |
| description | Frontend coding conventions using Preact and Tailwind. Use when writing or reviewing frontend JavaScript, HTML, or CSS code for web UI components. |
| keywords | preact, tailwind, frontend, フロントエンド, UI, コンポーネント, css, html |
- 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):
h("div", {class: "flex flex-col"}, [
h("label", {for: "search-box", class: "sr-only"}, "Search"),
h("select", {id: "search-box", ...}, [...]),
])
