Joshua jshmllr

# Gradient Border Technique for Tailwind CSS

A technique for creating refined gradient borders using box shadows instead of CSS borders. This approach allows borders to blend naturally with existing shadows for a modern, polished appearance.

## How It Works
Rather than using a `border`, layered box shadows with negative spread values create the border effect. This enables the border to merge cleanly with element shadows and produces a subtle gradient-like feel.

## Key Principles
1. **Box-sizing**: All elements use `border-box` (set globally).

description: AI Animation + Feedback UX. Standardize how our app visualizes agent thinking, progress, transitions, uncertainty, errors, and feedback loops. Ensure users remain in control, see what the AI is doing, and can steer, stop, or improve it. globs:

"app/**/*"
"src/**/*"
"packages/**/*"
"components/**/*"

Product Design and Market Strategy Lexicon

Originally published on jshmllr.com

Overview

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

Articulate complex design challenges more precisely
Shift perspective from feature-driven to experience-driven design
Create shared understanding across multidisciplinary teams

	/* Hardcover book cover effect for card views in Obsidian Bases */

	.bases-view {
	--bases-cards-background: transparent;
	--bases-cards-cover-background: transparent;
	--bases-cards-shadow: none;
	--bases-cards-shadow-hover: none;
	}
	.bases-cards-group {
	gap: 24px;

	{
	"name": "My workflow 7",
	"nodes": [
	{
	"parameters": {
	"model": "anthropic/claude-3.7-sonnet",
	"options": {}
	},
	"type": "@n8n/n8n-nodes-langchain.lmChatOpenRouter",
	"typeVersion": 1,

	(() => {
	// Find the chat log container
	const chatLog = document.querySelector('div[role="log"][aria-label="Chat messages"]');
	if (!chatLog) {
	console.warn('Chat container not found.');
	return;
	}

	// Remove existing timeline if any
	const existingTimeline = document.getElementById('chat-timeline-sidebar');

	# [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">