Agent skill
ui-development
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.
Install this agent skill to your Project
npx add-skill https://github.com/JoernStoehler/ai-forecasting-hackathon/tree/main/.claude/skills/ui-development
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
JoernStoehler/ai-forecasting-hackathon
orchestrate-subagents
Orchestrate parallel and/or sequential subagents working in separate git worktrees to deliver PR(s). Use when bundling multiple related GitHub issues into a single task, running best-of-3 identical attempts, monitoring runs, selecting the best PR, and closing/cleaning up the rest.
JoernStoehler/ai-forecasting-hackathon
git-worktrees
Create, list, and remove git worktrees for parallel agent work. Use when you need isolated workdirs, new worktree branches, or safe cleanup workflows.
JoernStoehler/ai-forecasting-hackathon
write-skills
Create or update SKILL.md files for this repo. Use when authoring skills in .claude/skills/.
JoernStoehler/ai-forecasting-hackathon
write-gh-issues-prs
[DEPRECATED] This skill is no longer used. Feature tracking has migrated to PROJECT.md.
JoernStoehler/ai-forecasting-hackathon
maintain-environment
Maintain the repo devcontainer environment and related workflow files. Use when changing .devcontainer or environment setup scripts.
JoernStoehler/ai-forecasting-hackathon
devops-scripts
Write or update repository devops scripts with this project's conventions. Use when creating or modifying shell scripts in scripts/ or packages/*/scripts.
Didn't find tool you were looking for?