Claude Code: From Beginner to Expert in 19 Minutes

TL;DR This video serves as a comprehensive guide to mastering Claude Code, Anthropic's AI coding agent, based on insights from the "Cloth Code Bible" by its creator. It emphasizes customizing the setup through files like cloth.md (system prompt) and cloth_settings.json (tool permissions), and integrating GitHub CLI. A key takeaway is extending Claude's capabilities with custom MCPs like Playwright for browser interaction and creating custom slash commands to automate complex workflows, significantly boosting productivity. The guide details four recommended workflows: Explore-Plan-Code-Commit (with sub-agents and thinking budget prompts), Test-Driven Development, Write Code-Screenshot-Iterate, and leveraging Claude for Git operations. It also covers workflow optimization through specific instructions, URL browsing, early course correction, and context management commands (/clear, /compact). Finally, it introduces advanced uses like headless mode

juanpprieto / Providers.tsx

Created May 9, 2024 16:15 — forked from julrich/Providers.tsx

Unpic blurhash handling with React

	function isStoryblokAsset(object: unknown): object is AssetStoryblok {
	return (object as AssetStoryblok)?.filename !== undefined;
	}

	const Picture = forwardRef<
	HTMLImageElement,
	PictureProps & ImgHTMLAttributes<HTMLImageElement>
	>(({ src, lazy, ...props }, ref) => {
	const internalRef = useRef<HTMLImageElement>(null);

juanpprieto / onetrust-shopify-callback.js

Created March 13, 2024 22:20 — forked from vvastdev/onetrust-shopify-callback.js

Callback to Shopify privacy API on OneTrust banner interaction, passing boolean based on OT tracking consent codes

	<script>

	const performanceCookieCategory = '2,';

	function waitForOneTrust() {
	hasOneTrustLoaded();

	let attempts = 0;
	const interval = setInterval(function () {

juanpprieto / gist:a9bf007124973b3c5ab19b21352ec249

Created August 10, 2023 14:45 — forked from AlemTuzlak/gist:89ee03a57c97cb820d6c30d7cd88b341

Type inference with zod and remix-hook-form

	import type { ZodType, z } from "zod";
	import { zodResolver } from "@hookform/resolvers/zod";
	import { getValidatedFormData as getValidatedFormDataPrimitive, useRemixForm as useForm, UseRemixFormOptions } from "remix-hook-form";

	interface UseRemixFormZodOptions<T extends ZodType, U extends FromZodType<T>> extends UseRemixFormOptions<U> {
	schema: T;
	}

	export type FromZodType<T extends ZodType> = z.infer<T>;

juanpprieto / headless-theme-redirect.liquid

Created May 23, 2023 15:10 — forked from benjaminsehl/headless-theme-redirect.liquid

Shopify Headless Theme.liquid Redirect — UPDATE: replace with this theme: https://github.com/benjaminsehl/shopify-headless-theme

	{% comment %}

	UPDATE: Now you can use this theme to more easily manage your redirects:
	https://github.com/benjaminsehl/shopify-headless-theme

	{% endcomment %}

	{% assign new_website = 'https://headless-website.com/' %}
	<!doctype html>
	<html>

juanpprieto / auth0-rule-shopify-multipass.js

Created March 12, 2023 17:07 — forked from drovani/auth0-rule-shopify-multipass.js

Auth0 Rule to Generate a Multipass token and redirect the user back to the Shopify store

	function (user, context, callback) {
	if (context.clientMetadata && context.clientMetadata.shopify_domain && context.clientMetadata.shopify_multipass_secret)
	{
	const RULE_NAME = 'shopify-multipasstoken';
	const CLIENTNAME = context.clientName;
	console.log(`${RULE_NAME} started by ${CLIENTNAME}`);

	const now = (new Date()).toISOString();
	let shopifyToken = {
	email: user.email,

juanpprieto / karabiner-custom-capslock.json

Created February 24, 2023 20:37 — forked from justinmklam/configs-for-karabiner-layers.md

Map caps lock to esc (if tapped) or control (if held down or combined with another key). Use with Karabiner Elements on MacOS

	{
	"title": "Change caps_lock to Esc and Control",
	"rules": [
	{
	"description": "Post Esc if Caps is tapped, Control if held.",
	"manipulators": [
	{
	"type": "basic",
	"from": {
	"key_code": "caps_lock",

juanpprieto / datalayer.js

Created December 8, 2021 18:42 — forked from elephantsneverforget/datalayer.js

	<!--- Elevar Base Data Layer ----!>


	{% if customer %}
	window.dataLayer.push({
	"event": "dl_user_data"
	"event_id": {{ uuid }} // unique uuid for FB conversion API
	"cart_total": "{{ cart.total_price }}",
	"user_properties": {
	"visitor_type": "logged_in",

juanpprieto / ffmpeg-install.sh

Created November 12, 2021 14:26 — forked from clayton/ffmpeg-install.sh

Install FFMPEG on OS X with HomeBrew to convert Mp4 to WebM

	# Installation
	brew install ffmpeg --with-vpx --with-vorbis --with-libvorbis --with-vpx --with-vorbis --with-theora --with-libogg --with-libvorbis --with-gpl --with-version3 --with-nonfree --with-postproc --with-libaacplus --with-libass --with-libcelt --with-libfaac --with-libfdk-aac --with-libfreetype --with-libmp3lame --with-libopencore-amrnb --with-libopencore-amrwb --with-libopenjpeg --with-openssl --with-libopus --with-libschroedinger --with-libspeex --with-libtheora --with-libvo-aacenc --with-libvorbis --with-libvpx --with-libx264 --with-libxvid

	# Easy Peasy
	ffmpeg -i video.mp4 video.webm

juanpprieto / Convert mp4 to webm Using ffmpeg on Mac

Created November 12, 2021 01:21 — forked from muratgozel/Convert mp4 to webm Using ffmpeg on Mac

	1. Install ffmpeg:
	brew install ffmpeg --with-vpx --with-vorbis --with-libvorbis --with-vpx --with-vorbis --with-theora --with-libogg --with-libvorbis --with-gpl --with-version3 --with-nonfree --with-postproc --with-libaacplus --with-libass --with-libcelt --with-libfaac --with-libfdk-aac --with-libfreetype --with-libmp3lame --with-libopencore-amrnb --with-libopencore-amrwb --with-libopenjpeg --with-openssl --with-libopus --with-libschroedinger --with-libspeex --with-libtheora --with-libvo-aacenc --with-libvorbis --with-libvpx --with-libx264 --with-libxvid

	2. Convert:
	ffmpeg -i input-file.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis output-file.webm

Juan P. Prieto juanpprieto

Claude Code: From Beginner to Expert in 19 Minutes