javeedishaq/visual-testing
skills/ballee/visual-testing/SKILL.md
Run the app locally and take screenshots using Puppeteer to verify UI changes; use when validating demo pages, checking visual regressions, or capturing UI state for analysis
$ install --global
skillsauthnpx skillsauth add javeedishaq/ai-workflow-orchestrator visual-testingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 6, 2026, 3:10 AM8.1s3 files scanned
SKILL.md
- name:
- visual-testing
- description:
- Run the app locally and take screenshots using Puppeteer to verify UI changes; use when validating demo pages, checking visual regressions, or capturing UI state for analysis
- version:
- 1.0.0
- last_updated:
- 2025-12-14
Visual Testing
Take screenshots of the running app to verify UI changes visually.
When to Use This Skill
Use this skill when:
- Verifying visual changes to demo/showcase pages
- Capturing screenshots for UI review
- Debugging layout or styling issues
- Testing demo component interactions
- Checking cursor alignment in interactive demos
Quick Start
# Check dev server status
./.claude/skills/visual-testing/scripts/visual-test.sh status
# Start dev server if needed
./.claude/skills/visual-testing/scripts/visual-test.sh start
# Screenshot a demo slide with debug markers
./.claude/skills/visual-testing/scripts/visual-test.sh demo cast-assignment --debug
# View the screenshot (Claude can read images)
# Path: /tmp/ballee-screenshots/demo-cast-assignment-TIMESTAMP.png
Commands
| Command | Description |
|---------|-------------|
| status | Check if dev server is running on port 3012 |
| start | Start dev server in background |
| stop | Stop dev server |
| screenshot <url> | Take screenshot of any URL |
| demo [slide-id] | Screenshot demo showcase (optional slide) |
| demo-all | Screenshot all demo slides |
| list-slides | List available demo slide IDs |
Options
| Option | Description | Default |
|--------|-------------|---------|
| --debug | Add ?debug=true to URL (shows target markers) | false |
| --viewport WxH | Set viewport dimensions | 1200x900 |
| --name <name> | Custom screenshot filename | auto-generated |
| --full-page | Capture full scrollable height | false |
| --wait <ms> | Extra wait time after page load | 2000 |
Demo Slide IDs
| ID | Interactive Demo |
|----|------------------|
| cast-assignment | CastAssignmentDemo |
| contract-acceptance | ContractAcceptanceDemo |
| event-creation | EventCreationDemo |
| hire-order-view | HireOrderViewDemo |
| invoice-download | InvoiceDownloadDemo |
| invoice-validate | InvoiceValidateDemo |
| reimbursement-upload | ReimbursementUploadDemo |
Screenshot Output
Screenshots are saved to: /tmp/ballee-screenshots/
Naming pattern:
- Demo:
demo-{slide-id}-{timestamp}.png - Custom:
{custom-name}.png - URL:
screenshot-{timestamp}.png
Example Workflows
Verify Demo After Coordinate Changes
# 1. Ensure server is running
./.claude/skills/visual-testing/scripts/visual-test.sh status
# 2. Screenshot the changed slide with debug markers
./.claude/skills/visual-testing/scripts/visual-test.sh demo cast-assignment --debug
# 3. Read the screenshot to verify cursor alignment
# Use Claude's Read tool on /tmp/ballee-screenshots/demo-cast-assignment-*.png
Capture All Demo States
# Screenshot all demo slides for full review
./.claude/skills/visual-testing/scripts/visual-test.sh demo-all --debug
# Screenshots saved to /tmp/ballee-screenshots/
Custom Page Screenshot
# Screenshot any page
./.claude/skills/visual-testing/scripts/visual-test.sh screenshot \
http://localhost:3012/admin/events \
--name "admin-events" \
--viewport 1920x1080
Troubleshooting
"Dev server not running"
Start the dev server:
./.claude/skills/visual-testing/scripts/visual-test.sh start
# Or manually: pnpm dev
"Screenshot timeout"
- Check the URL is correct
- Ensure dev server is responding:
curl http://localhost:3012 - Try increasing wait time:
--wait 5000
"Puppeteer not found"
Puppeteer should be installed. If not:
cd apps/web && pnpm add -D puppeteer
Related Files
- Demo showcase:
apps/web/app/demo/fever/showcase/page.tsx - Demo components:
apps/web/components/demo/interactive/demos/ - Interactive demo wrapper:
apps/web/components/demo/interactive/interactive-demo.tsx
Related Skills
javeedishaq/templates/skills/test-patterns
tools
VerifiedTrustedCommunity
# Test Patterns Testing patterns for reliable, maintainable, and fast tests. > **Template Usage:** Customize for your test framework (Vitest, Jest, Playwright, etc.) and assertion library. ## Test Structure ```typescript // user.test.ts import { describe, it, expect, beforeEach, afterEach } from 'vitest'; import { userService } from '@/services/user.service'; import { createTestUser, cleanupTestData } from '@/tests/helpers'; describe('UserService', () => { let testUserId: string; befor
1SKILL.mdUpdated Apr 6, 2026
javeedishaq/templates/skills/state-management
tools
VerifiedTrustedCommunity
# State Management Patterns Client-side state management patterns for modern applications. > **Template Usage:** Customize for your state library (React Query, Zustand, Jotai, Redux, etc.). ## State Categories | Type | Description | Solution | |------|-------------|----------| | **Server State** | Data from API/database | React Query, SWR | | **Client State** | UI state, user preferences | Zustand, Jotai, useState | | **Form State** | Form inputs, validation | React Hook Form, Formik | | **U
1SKILL.mdUpdated Apr 6, 2026
javeedishaq/templates/skills/service-patterns
development
VerifiedTrustedCommunity
# Service Patterns Service layer patterns for clean architecture with proper error handling, logging, and type safety. > **Template Usage:** Customize for your ORM (Prisma, Drizzle, TypeORM, etc.) and logging solution. ## Result Type Pattern Never throw exceptions from services. Always return a Result type. ```typescript // lib/result.ts export type Result<T, E = Error> = | { success: true; data: T } | { success: false; error: E }; export function ok<T>(data: T): Result<T, never> { r
1SKILL.mdUpdated Apr 6, 2026
javeedishaq/templates/skills/rls-security
testing
VerifiedTrustedCommunity
# Row-Level Security Patterns Database security patterns for multi-tenant and user-scoped data. > **Template Usage:** Customize for your database (PostgreSQL, Supabase, etc.) and auth system. ## RLS Fundamentals ### Enable RLS on Tables ```sql -- Enable RLS (required before policies take effect) ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE posts ENABLE ROW LEVEL SECURITY; ALTER TABLE comments ENABLE ROW LEVEL SECURITY; -- Force RLS for table owners too (recommended) ALTER TABLE
1SKILL.mdUpdated Apr 6, 2026