browsing-with-playwright
Browser automation with Playwright MCP for web navigation, form interaction, and data extraction.
- Supports navigation, element interaction (click, type, select), screenshots, and accessibility snapshots that return element references for precise targeting
- Includes JavaScript execution via
browser_evaluateand multi-step atomic operations throughbrowser_run_codefor complex workflows - Requires
--shared-browser-contextflag to maintain browser state across sequential commands; server runs on port 8808 - Common workflows covered: form submission, data extraction, waiting for page conditions, and element verification via snapshots
Browser Automation
Automate browser interactions via Playwright MCP server.
Server Lifecycle
Start Server
# Using helper script (recommended)
bash scripts/start-server.sh
# Or manually
npx @playwright/mcp@latest --port 8808 --shared-browser-context &
Stop Server
# Using helper script (closes browser first)
bash scripts/stop-server.sh
More from bilalmk/todo_correct
sqlmodel-expert
Advanced SQLModel patterns and comprehensive database migrations with Alembic. Use when creating SQLModel models, defining relationships (one-to-many, many-to-many, self-referential), setting up database migrations, optimizing queries, solving N+1 problems, implementing inheritance patterns, working with composite keys, creating indexes, performing data migrations, or troubleshooting Alembic issues. Triggers include "SQLModel", "Alembic migration", "database model", "relationship", "foreign key", "migration", "N+1 query", "query optimization", "database schema", or questions about ORM patterns.
106frontend-design-system
Comprehensive UI/UX design skill for building modern, responsive web applications with Tailwind CSS, shadcn/ui, Material UI, Chakra UI, Ant Design, and Mantine. Use when users need to - (1) Choose a design system for their project, (2) Build responsive layouts and components, (3) Implement forms with validation, (4) Create accessible user interfaces, (5) Design task management UIs (todo apps, dashboards), (6) Apply responsive design patterns, (7) Implement dark mode, or (8) Build component libraries. Triggers include requests like 'design a todo app', 'create responsive layout', 'which UI library should I use', 'implement dark mode', 'build a form with validation', or 'make this mobile-friendly'.
38betterauth-fastapi-jwt-bridge
Implement secure authentication bridge between Better Auth (Next.js frontend) and FastAPI (Python backend) using JWKS JWT token verification. Use this skill when users need to (1) Integrate Better Auth with FastAPI backend, (2) Implement JWT authentication with JWKS verification, (3) Set up user isolation and authorization in FastAPI endpoints, (4) Configure frontend to send authenticated API requests, or (5) Troubleshoot Better Auth + FastAPI authentication issues.
31nextjs-devtools
|
18configuring-better-auth
|
16building-nextjs-apps
|
16