SKILL.md

name: ui-development description: Autonomous screenshot-based UI development workflow for React/Tailwind webapps. Use when (1) implementing new UI components or pages, (2) modifying existing visual elements or styles, (3) fixing visual bugs or dark mode issues, (4) updating layouts or responsive design, (5) changing colors, typography, or spacing. Always triggers for CSS/styling work and React component visual changes.

UI Development Workflow

Core Loop

Implement changes
Start dev server in background: npm run dev & (check output for port)
Take screenshots: npx playwright screenshot --viewport-size=1280,720 --full-page http://localhost:PORT/path scratch/name.png
Read screenshots yourself
Iterate 2-3 times (Anthropic guidance: first pass is good, 2-3 iterations much better)
Commit only after visual verification

Standard Screenshots for This Project

Light and dark mode for:

Menu page (/)
Game page (/game)
Post-game page (/post-game)
Tutorial modal (first visit to /)

Dark Mode Testing

This project uses class-based dark mode (<html class="dark">), not prefers-color-scheme.

The --color-scheme=dark flag won't work. To test dark mode, navigate and click the toggle button, or use localStorage injection.

Project-Specific Context

Stack: React 18, Vite, Tailwind CSS (class-based dark mode)

Colors: Beige/warm palette (beige-50 through beige-300), amber accents, NOT generic white/gray

Common issues:

Modals missing dark: variants
Focus indicators invisible in dark mode
Components reverting to white backgrounds

Detailed Review Criteria

See references/review-criteria.md for accessibility, contrast, typography, and visual consistency checklists.

スコア

総合スコア

50/100

リポジトリの品質指標に基づく評価

✓SKILL.md

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

+20

○LICENSE

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

0/10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

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

0/5

✓Issue管理

オープンIssueが50未満

+5

✓言語

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

+5

○タグ

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

0/5

レビュー

💬

レビュー機能は近日公開予定です