skills.rest
igoor-noprofit
igoor-noprofitOFFICIAL
Explore all skills by this author →
Website𝕏@igoor_orgGitHub

always-test-frontend-changes

Test Vue frontend changes in a browser before confirming they work.

8|1|Updated Feb 24, 2025
Search Tags:#debugging#vue#frontend testing#playwright#browser testing#ui verification#websocket
One-click install
npx skills add https://github.com/igoor-noprofit/igoor --skill always-test-frontend-changes-igoor-noprofit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: always-test-frontend-changes
Source: https://github.com/igoor-noprofit/igoor/tree/main/.factory/skills/always-test-frontend-changes
Command: npx skills add https://github.com/igoor-noprofit/igoor --skill always-test-frontend-changes-igoor-noprofit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend changes to Vue components, templates, and CSS are often assumed to work without verification, leading to broken UI, failed interactions, and undetected JavaScript errors reaching users. ## Core Features & Use Cases - Browser-Based Verification: Runs the IGOOR server locally and tests all UI changes at http://localhost:9714/ using Playwright or a manual browser session. - Structured Debugging Workflow: Guides inspection of browser console errors, HTML/CSS structure, WebSocket connections on port 9715, and REST API calls on port 9714. - Use Case: After modifying a plugin settings form in a Vue component, start the server, navigate to the extensions tab, submit the form, and confirm success and error states render correctly before declaring the change complete. ## Quick Start Start the IGOOR server with python main.py and test my latest Vue component changes in the browser at localhost:9714.

Frequently Asked Questions about always-test-frontend-changes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Vue component changes in the browser?▼

Start the application server with python main.py, then navigate to http://localhost:9714/ and interact with the changed components. Verify clicks, form submissions, and state changes all behave as expected before confirming the work.

How do I access plugin settings in the IGOOR app?▼

Click the settings gear icon in the top-right header, open the extensions tab, then navigate to the relevant plugin category and click the settings gear of the specific plugin you want to configure.

Can I use Playwright for frontend testing of a local app?▼

Yes, Playwright can automate browser testing against the local server at http://localhost:9714/. It supports interaction testing, viewport resizing for responsive checks, and console error capture.

Why is my frontend change not working after editing the code?▼

Check the browser console for JavaScript errors, inspect the HTML structure and CSS, and verify WebSocket connections at ws://localhost:9715/plugin_name and REST API calls at http://localhost:9714/api/. Fix issues iteratively and retest.

What should I check for accessibility when testing UI changes?▼

Test keyboard navigation through all interactive elements and verify screen reader compatibility for accessibility-critical features. Also test across different viewport sizes when responsive design is relevant.

Related Skills

Explore More Software Engineering Skills→
ShiplightAIShiplightAI

verify

Automate browser-based UI verification with Shiplight MCP tools.

Official
Intermediate
CybernetKZCybernetKZ

tz-implement

Implements OpenSpec change proposals through phased stop-gates, logical commits, and spec-delta archival.

Official
Advanced
jfoxxjfoxx

testing-blocks

Guide AEM Edge Delivery Services testing with linting, browser validation, and unit tests.

Community
Intermediate
ricablericable

qa-regression

Automate QA regression testing with reusable Playwright test suites.

Community
Advanced