/check-product-standards

Verify every Misty Step product meets baseline shipping standards.

Why This Exists

If we charge money, users need:

• Version info — Know what they're running, check for updates

• Attribution — Know who made it, builds trust

• Contact method — Get help when something goes wrong

These are non-negotiable for shipped products.

Required Elements

1. Version Display

Requirement: Visible version number that links to releases page.

Location: Footer, settings, or about section

Format:

v1.2.3 → links to /releases or GitHub releases

Implementation patterns:

// From package.json or build-time injection <a href="/releases" className="text-muted-foreground text-sm"> v{process.env.NEXT_PUBLIC_APP_VERSION} </a>

Check for:

• Version visible somewhere in UI

• Version is dynamic (from package.json, not hardcoded)

• Version links to releases/changelog page

2. Misty Step Attribution

Requirement: "A Misty Step project" or similar, linking to MistyStep.io

Location: Footer

Format:

A Misty Step project → links to https://mistystep.io

Implementation patterns:

<a href="https://mistystep.io" target="_blank" rel="noopener noreferrer" className="text-muted-foreground text-sm hover:text-foreground"

A Misty Step project </a>

Acceptable variations:

• "A Misty Step project"

• "Built by Misty Step"

• "From Misty Step"

• Misty Step logo with link

Check for:

• Attribution text/logo present

• Links to https://mistystep.io

• Opens in new tab (external link)

3. Contact/Support Link

Requirement: Way to contact for help, feedback, or issues.

Location: Footer, help menu, or settings

Format:

Contact | Feedback | Support → mailto:hello@mistystep.io

Implementation patterns:

<a href="mailto:hello@mistystep.io" className="text-muted-foreground text-sm"> Contact </a>

// Or with subject line <a href="mailto:hello@mistystep.io?subject=Feedback%20for%20[AppName]"> Feedback </a>

Acceptable variations:

• "Contact"

• "Support"

• "Feedback"

• "Help"

• "Get in touch"

• Email icon with mailto link

Check for:

• Contact method visible

• Links to hello@mistystep.io (or specific product email)

• Accessible without authentication (can report issues even if logged out)

Audit Process

Step 1: Find Footer/Chrome Components

Common patterns

rg -l "footer" --type tsx --type jsx rg -l "Footer" --type tsx --type jsx rg -l "layout" --type tsx --type jsx

Look for version references

rg "version|VERSION" --type tsx --type jsx --type ts

Look for mistystep references

rg -i "misty.?step" --type tsx --type jsx

Step 2: Check Each Requirement

For each requirement, verify:

• Presence — Element exists in the UI

• Functionality — Links work correctly

• Accessibility — Visible on all pages, not hidden

Step 3: Report Findings

Product Standards Audit

Issues to Create

1. [P1] Add version display to footer
2. [P1] Create /releases page or link to GitHub releases
3. [P1] Add contact email link (hello@mistystep.io)

Priority

P1 (Fundamentals) — These are baseline shipping requirements.

Products without these should not be considered "shipped" regardless of feature completeness.

Integration with /groom

Groom invokes this skill as part of Step 4 (Issue-Creator Skills):

/log-product-standards-issues

Creates issues for any missing requirements with:

• Label: domain/product-standards

• Priority: priority/p1

Quick Fix Patterns

Minimal Footer Component

// components/Footer.tsx export function Footer() { const version = process.env.NEXT_PUBLIC_APP_VERSION || 'dev'

return ( <footer className="border-t py-6 text-center text-sm text-muted-foreground"> <div className="flex items-center justify-center gap-4"> <a href="/releases" className="hover:text-foreground"> v{version} </a> <span>·</span> <a href="https://mistystep.io" target="_blank" rel="noopener noreferrer" className="hover:text-foreground" > A Misty Step project </a> <span>·</span> <a href="mailto:hello@mistystep.io" className="hover:text-foreground" > Contact </a> </div> </footer> ) }

Inject Version at Build Time

// next.config.js const { version } = require('./package.json')

module.exports = { env: { NEXT_PUBLIC_APP_VERSION: version, }, }

Simple Releases Page

// app/releases/page.tsx export default function ReleasesPage() { return ( <div className="container py-12"> <h1>Releases</h1> <p> View full changelog on{' '} <a href="https://github.com/MistyStep/[repo]/releases"> GitHub Releases </a> </p> </div> ) }

Related Skills

• /check-landing — Landing page audit (includes footer checks)

• /brand-builder — Establishes brand profile

• /changelog — Creates releases infrastructure