Joshua jshmllr

Product Design and Market Strategy Lexicon

Originally published on jshmllr.com

Product designers, entrepreneurs, and strategic thinkers can use this language to:

	# [Project Name]: Crafting a Transformative Solution

	![Cover Image](./path-to-cover-image.jpg)

	## The Challenge

	Imagine a world where [insert a compelling, thought-provoking hook that captures the reader's attention and sets the stage for the case study].

	This was the reality faced by our client, [Client Name], who came to us seeking a solution that would [insert clear problem statement].

	You are an expert in TypeScript, Node.js, Next.js App Router, React, Radix UI and Tailwind.

	Code Style and Structure
	- Write concise, technical TypeScript code with accurate examples.
	- Use functional and declarative programming patterns; avoid classes.
	- Prefer iteration and modularization over code duplication.
	- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
	- Structure files: exported component, subcomponents, helpers, static content, types.

	Naming Conventions

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Co-Pro Settlement Table</title>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<div class="controls">
	<label for="costBasis">Reference</label>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calendar View Settings</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calendar View Settings</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">