Pawhaven — pet boarding product case study cover

Pawhaven

Pet boarding
The Pawhaven landing page — a dark hero reading Your Pet Deserves Freedom, Not a Cage

Overview

This version includes the following tech stack :

Claude Code, Supabase, EmailJS, Netlify, PowerShell and VS Code

Role

Product Builder

June 2026 - July 2026

Link to app

Stage 1

Framework for Claude CLI in Powershell

This framework helped transform Claude CLI from a conversational AI into a customizable AI operating system for development. Instead of repeatedly instructing the AI what to do, you encode processes, standards, and tools once, then reuse them consistently.

Component
Purpose
What it does
When to use
How is it used in this project
Hooks
Automate events
Execute scrips automatically before or after claude performs action
Validation, formatting, logging, security, checks, notoification
Maintaining organised file structure. Reviewinga and updating the files with latest standards
Commands
Create reusable prompts
Define custom slash command that encapsulate complex prompts or workflows
Frequently repeated tasks or company-specific workflows
/new-website
Skills
Teach Claude specialized expertise
Package domain knowledge, workflows, templates and best practices into reusable capabilities( heuristics)
Product design, Ux audits
Used two website copywriting url links to create custom skill (website creator skill)
MCP
Connect Claude to external tools
Allow claude to securely communicate with databases, APIs, local files, Github, Figma, browser, cloud, etc.
When Claude needs live data or needs to perform actions outside the chat
Lorem ipsum
Subagents
Delegate work to specealist AI agents
Breaka Complex task into smaller tasks handled by specialized agents with different responsibilities
Large projects, parallel work, multi-step development
Reviewer, Accessebility

Hook

1. Prompt:

“ Build me a HOOK for this project as a website agency workspace where each folder represents a different landing page project. Configure automated checks to validate every HTML, CSS, JavaScript, React, and Tailwind file whenever it is created or modified. The hooks should automatically check formatting, code quality, and adherence to modern best practices, fixing issues where possible and flagging errors before changes are committed. Since I am non-technical, clearly explain what each hook does, why it is needed, and provide a simple overview of how the entire setup works and benefits my workflow.”

2. Run /hooks command

Run this command to check if all the required hooks have been configured

Skills

1. Prompt:

“ Build a skill called website creator adhering to the heuristics of the refference sources added”

Command

1. Prompt:

“ Create a custom command called new-website. When executed, it should prompt me for a website brief and optionally accept brand assets (color palette, typography, logos, or reference websites). Using the Website Creator skill, generate a complete website in a new project folder within this workspace. Each execution should create a separate, self-contained folder with its own files and assets. If any information required to build a high-quality website is missing, ask clarifying questions before generation.”

Sub-agents

1. Prompt:

“ Build two subagents that run in parallel. The first, A11y Checker, should audit my website for accessibility using the latest WCAG standards and modern best practices, identifying issues and recommending or applying fixes where possible. The second, Website Auditor, should evaluate my website against a checklist derived from a reference link that I provide, ensuring compliance with the defined quality, UX, design, and development standards. Both agents should generate clear, actionable reports independently. Ask me any clarifying questions before setting up the agents if any requirements are unclear.”

Stage 2

Run command

/new-website ( Write website brief and add the brand design guide)

Wait for Claude to generate the file

Stage 3

Integrate services

The generated JS secrets file receiving the Supabase and EmailJS keys

Stage 4

Hosting

Hosting on Netlify was done manually by drag and drop of the folder in Netlify account

NetlifyLink to app

Other Projects.