SKILL.md

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", ...}, [...]),
])

Score

Total Score

55/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20

✓LICENSE

ライセンスが設定されている

+10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

10回以上フォークされている

0/5

○Issue管理

オープンIssueが50未満

0/5

✓言語

プログラミング言語が設定されている

○タグ

1つ以上のタグが設定されている

0/5

frontend