---
name: clarity-web-design
description: Customize the Clarity HTML landing page for a product while retaining its responsive layout and functional demo.
---

# Clarity Web Design

An original WOG Labs workflow for the included Clarity template. This is a plain Markdown skill file; importing or installing it depends on your AI coding assistant.

## Required inputs
- The included index.html source.
- Product name, audience, main task and verified features.
- Primary action and its real destination.
- Brand colors and any copy or layout constraints.

## Workflow
1. Read index.html and the product brief before editing. Identify fictional sample content.
2. Replace the product name, headline, copy, task data and actions with verified inputs. Keep unknown claims absent.
3. Reuse CSS tokens and the responsive layout. Keep the page self-contained unless the brief explicitly requests an integration.
4. Preserve meaningful navigation, focus visibility, keyboard controls, mobile Escape/focus return, FAQ disclosures and reduced-motion handling.
5. Keep sample data clearly labeled. Do not invent customers, testimonials, prices, accounts, persistence or backend success.
6. Test desktop/mobile widths and every interactive state, including all/active/done filters, empty views, task progress and reset.
7. Deliver the actual file, a brief change list, verification results and any unfinished integration boundary.

## Boundaries
No credentials, network access, dependency installation, payment or deployment are needed to use this template. Do not perform those actions unless the user requests them separately. Keep the included MIT copyright/license notice with redistributed copies.