convey-app-template

Initialize a minimal hello-world mock-app with React, Vite, TypeScript, Tailwind CSS, React Router, and MSW. Use when scaffolding a new mock-app from scratch, bootstrapping a project skeleton, or starting a fresh prototype. Produces a working app with routing, mock API support, and a hello-world landing page.

Track and manage reusable UI components and patterns in the mock-app. Maintains an inventory of extracted components and unextracted patterns to promote incremental refactoring and prevent code duplication.

End-to-end workflow for implementing a new feature in the mock-app, ensuring data model alignment, sample data, UI/UX consistency, component reuse, and automated verification with Playwright MCP.

Create new Agent Skills for this project. Use when asked to create a skill, document a workflow, or teach Copilot a new capability. Skills are stored in .github/skills/ and can include instructions, scripts, examples, and resources.

Debug and fix failing Playwright E2E tests. Use when tests fail, when asked to fix failing tests, or when investigating test failures. Analyzes test output, screenshots, error context, and uses Playwright MCP to identify root causes.

Always start a fresh browser session after any file change, walk through the full user flow, and monitor for errors before proceeding with further work.

Create comprehensive feature requirement documents for the WCU Mosquito Surveillance Web Application. Use when asked to document a feature, write feature requirements, or create feature specifications from the roadmap. Includes user stories, functional requirements, data model review, workflows, and edge cases.

Extract reusable UI components from inline patterns. Covers component design, TypeScript props, Storybook stories, refactoring strategy, and best practices for creating shared UI primitives.

Generate mock/sample data from Zod schemas for testing, development, and mocks. Use when creating sample data generators, setting up test fixtures, populating mock APIs, or generating realistic fake data for development.

Make UIs responsive across all devices and verify responsiveness using Playwright. Includes scrollbar testing, breakpoint verification, and layout validation. Use when implementing new features, fixing layout issues, or ensuring mobile compatibility.

Add or modify domain entities in the data model using Zod schemas. Use when creating new entities, adding fields, changing relationships, or updating the domain model structure. Covers schema creation, TypeScript types, and updating dependent files.

Create, maintain, and verify end-to-end (E2E) tests for the mock-app using Playwright MCP. Ensures new features and flows are robustly tested and visually verified.