Agent Skill
2/7/2026

ui-verify

Visual UI verification workflow with responsive screenshot comparison and AC validation

Y
yuens1002
1GitHub Stars
2Views
npx skills add yuens1002/ecomm-ai-app

SKILL.md

Nameui-verify
DescriptionVisual UI verification workflow with responsive screenshot comparison and AC validation
<div align="center">

Artisan Roast

The open-source e-commerce platform built for specialty coffee

Your beans deserve better than Shopify.

Try the Live Demo | Self-Host Guide | Documentation

Build Nightly QA


Artisan Roast Demo

</div>

Try the Demo

No signup required. Click "Sign in as Admin" or "Sign in as Demo Customer" on the sign-in page to explore instantly.

AccountWhat You'll See
AdminFull dashboard: products, orders, analytics, Menu Builder, Pages CMS
Demo CustomerOrder history, active subscription, AI-powered recommendations

This is a shared demo environment. Please be respectful with the data.


Why Artisan Roast?

Most e-commerce platforms treat coffee like any other product. But your customers don't just want "a bag of coffee" - they want their coffee. Light and fruity? Dark and chocolatey? Something new to try?

Artisan Roast understands coffee.

  • AI that speaks coffee - "I like bright, citrusy flavors" → instant recommendations
  • Subscriptions that just work - Set it and forget it, with easy customer self-service
  • Menu Builder - Organize your catalog the way you think about it (Origins → Ethiopian → Yirgacheffe)
  • Self-host for free - MIT licensed, your data stays yours

See It In Action

For Your CustomersFor You
Browse by origin, roast, or tasting notesBeautiful admin dashboard
AI chat: "What's similar to Ethiopian Yirgacheffe?"Drag-and-drop menu organization
One-click subscriptionsOrder management & analytics
Stripe checkout (cards, Apple Pay, Google Pay)Pages CMS with AI content generation

Screenshots

<details> <summary><strong>Homepage</strong> - Clean, modern storefront</summary>

Homepage

</details> <details> <summary><strong>AI Chat Assistant</strong> - Natural language coffee recommendations</summary>

AI Chat

</details> <details> <summary><strong>Product Page</strong> - Rich product details with variant selection</summary>

Product Page

</details> <details> <summary><strong>Admin Dashboard</strong> - Analytics and store overview</summary>

Admin Dashboard

</details> <details> <summary><strong>Menu Builder</strong> - Drag-and-drop catalog organization</summary>

Menu Builder

</details>

Self-Hosting

Setting up Artisan Roast requires a free database (Neon) and a deployment host (Vercel). No code changes needed — about 30 minutes to a running store.

Full self-host guide


Features

For Customers

  • Smart Search - Find coffee by name, origin, roast level, or tasting notes
  • AI Recommendations - Personalized suggestions based on browsing and purchase history
  • AI Chat Assistant - Ask questions like "What's good for cold brew?"
  • Flexible Subscriptions - Weekly, bi-weekly, or monthly delivery
  • Subscription Portal - Pause, skip, or cancel anytime (Stripe Billing Portal)

For Store Owners

  • Menu Builder - Visual drag-and-drop catalog organization
    • Multi-select with Shift+click range selection
    • Context menus for bulk operations (clone, delete, move)
    • Keyboard shortcuts (Delete, C, V, H)
    • 5 table views: Menu, Labels, Categories, and detail views
    • Mobile-friendly with 44px touch targets (WCAG 2.5.5)
  • Pages CMS - AI-powered content management
    • 10-question wizard generates About pages in your brand voice
    • Rich text editing with hero images
    • Draft/publish workflow
  • Admin Dashboard - Sales, trending products, top searches, activity trends
  • Order Management - Track orders from purchase to delivery

Technical

  • Next.js 16 with App Router and React 19
  • Type-safe end-to-end (TypeScript strict + Prisma)
  • Stripe payments and subscriptions
  • OAuth login (Google, GitHub)
  • AI powered by any OpenAI-compatible provider
  • 1,000+ tests with Jest and Testing Library

The Stack

LayerTechnology
FrameworkNext.js 16 (App Router, React 19)
LanguageTypeScript (strict mode)
DatabasePostgreSQL (Neon)
ORMPrisma
AuthNextAuth.js v5
PaymentsStripe Checkout + Billing Portal
EmailResend
AIAny OpenAI-compatible provider
StylingTailwind CSS 4 + shadcn/ui
StateZustand (cart) + SWR (data)
TestingJest + Testing Library
DeploymentVercel

Build Quality

Every merge to main is verified by two automated pipelines:

CheckWhat it guarantees
Build (every PR + merge)TypeScript compiles, ESLint passes, 1,000+ unit tests pass, production build succeeds
Nightly QA (nightly cron)A real fresh install — empty database, deployed to Vercel — passes all 16 acceptance criteria end-to-end

On merge to main, the QA database is reset and the QA deployment is refreshed. The following morning, a Claude Agent SDK + Playwright script walks through the full setup flow, known-value round-trips, and initial app state checks — using the accessibility tree instead of CSS selectors. Any regression opens a GitHub issue automatically.

How it works · Acceptance criteria


Roadmap

  • Core e-commerce (cart, checkout, orders)
  • Stripe subscriptions
  • AI product recommendations
  • AI chat assistant
  • Menu Builder (drag-and-drop catalog)
  • Pages CMS with AI generation
  • Voice AI barista (demo only)
  • Inventory management
  • Multi-store support

Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

Quick wins we'd love help with:

  • Documentation improvements
  • Accessibility audits
  • Translation/i18n
  • Bug reports and fixes

License

MIT License - Use it however you want. See LICENSE.


<div align="center">

Built by a coffee nerd who codes.

Demo · GitHub · Setup Guide

</div>
Skills Info
Original Name:ui-verifyAuthor:yuens1002