skills.rest
arthrod
arthrodCOMMUNITY
Explore all skills by this author →
GitHub

conejo-frontend

Enforce agent-browser E2E click-flows and design critique for UI changes.

Updated Jul 18, 2026
Search Tags:#automation#design#testing#ui#frontend#react#astro
One-click install
npx skills add https://github.com/arthrod/conejo-skills --skill conejo-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: conejo-frontend
Source: https://github.com/arthrod/conejo-skills/tree/main/skills/conejo-frontend
Command: npx skills add https://github.com/arthrod/conejo-skills --skill conejo-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent, low-quality, or untested frontend UI changes by enforcing a rigorous, automated gatekeeping process that mandates E2E testing and design critique before any work is marked as complete.

Core Features & Use Cases

  • Automated UI Gatekeeping: Enforces a strict red-green-refactor cycle using agent-browser click-flows, ensuring no UI implementation occurs without a failing test.
  • Design Critique Loop: Mandates a multi-step verification process including screenshot comparison, console error checking, and adversarial design critique.
  • Use Case: When building a new dashboard feature, this skill ensures the UI is not only functional but also visually compliant with the design system, free of console errors, and responsive across desktop and mobile viewports.

Quick Start

Use the conejo-frontend skill to implement the new user profile page following the red-green doctrine and the mandatory design critique loop.

Frequently Asked Questions about conejo-frontend

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

FAQPage Schema
How do I enforce E2E testing before committing UI changes in React or Astro?▼

You can enforce E2E testing for UI changes by applying a strict red-green-refactor cycle using agent-browser click-flows. This gatekeeping process requires a failing test to exist before any frontend implementation begins, ensuring functional integrity for React and Astro projects.

What is an automated design critique loop for frontend development?▼

An automated design critique loop is a mandatory verification process for UI changes that includes screenshot comparison, console error checking, and adversarial design review. It ensures visual compliance with design system constraints for typography, layout, and motion before marking work complete.

Do I need a dev server running continuously to use automated UI gatekeeping?▼

Yes, automated UI gatekeeping requires 24/7 dev server availability. The agent-browser E2E click-flows and screenshot comparisons depend on a continuously running local server to validate frontend visual and functional integrity during the development workflow.

Can I use this strict frontend workflow with Tailwind and shadcn/ui components?▼

Yes, this workflow explicitly supports web development tasks using Tailwind and shadcn/ui alongside Astro and React. It enforces specific design system constraints to ensure that all component implementations remain visually compliant across desktop and mobile viewports.

What's the best way to prevent untested UI code from reaching production?▼

The best way to prevent untested UI code is to implement a strict gatekeeping process that mandates E2E click-flows and design critiques. By requiring a failing test before implementation and verifying screenshots and console logs, you block incomplete work from passing.

Why does my frontend workflow allow visual regressions to slip through?▼

Visual regressions slip through when a workflow lacks a mandatory design critique loop and screenshot comparison. Implementing an adversarial design review with strict checks for console errors and viewport responsiveness prevents untested or non-compliant UI changes from passing.

Related Skills

Explore More Software Engineering Skills→
RinKhimeraRinKhimera
2

convex-quickstart

Initialize and configure a Convex backend for frontend projects.

Community
Intermediate
joshua3403joshua3403

phase-9-deployment

Automate production deployments with builds, configurations, and rollback plans.

Community
Advanced
imbue-aiimbue-ai
213

storybook-screenshot

Automate Storybook component story screenshots with Playwright and Python scripts.

Official
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced