julianromli/ai-skills

Bash(npx agent-browser:*), Bash(agent-browser:*)

agent-browser open https://example.com/form

# Chain open + wait + snapshot in one call agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

# Navigate and capture agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

agent-browser --auto-connect state save ./auth.json # Use that auth state agent-browser --state ./auth.json open https://app.example.com/dashboard

agent-browser --state ./auth.json open https://app.example.com/dashboard

# First run: login manually or via automation agent-browser --profile ~/.myapp open https://app.example.com/login

agent-browser --profile ~/.myapp open https://app.example.com/login

# All future runs: already authenticated agent-browser --profile ~/.myapp open https://app.example.com/dashboard

agent-browser --profile ~/.myapp open https://app.example.com/dashboard

agent-browser --session-name myapp open https://app.example.com/login

# Next time: state auto-restored agent-browser --session-name myapp open https://app.example.com/dashboard

agent-browser --session-name myapp open https://app.example.com/dashboard

echo "$PASSWORD" | agent-browser auth save myapp --url https://app.example.com/login --username user --password-stdin

# In a future session: agent-browser state load ./auth.json agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

echo '[   ["open", "https://example.com"],

["open", "https://example.com"],

agent-browser open https://example.com/signup

# Save credentials once (encrypted with AGENT_BROWSER_ENCRYPTION_KEY) # Recommended: pipe password via stdin to avoid shell history exposure echo "pass" | agent-browser auth save github --url https://github.com/login --username user --passw

echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin

# Login once and save state agent-browser open https://app.example.com/login

agent-browser open https://app.example.com/login

# Reuse in future sessions agent-browser state load auth.json agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

[Credential-related source omitted]

[Credential-related source omitted]

agent-browser --session-name myapp open https://app.example.com/login

# Next time, state is auto-loaded agent-browser --session-name myapp open https://app.example.com/dashboard

agent-browser --session-name myapp open https://app.example.com/dashboard

# Encrypt state at rest export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32) agent-browser --session-name secure open https://app.example.com

[Credential-related source omitted]

agent-browser --session-name secure open https://app.example.com

agent-browser open https://example.com/checkout

agent-browser open https://example.com/products

agent-browser --session site1 open https://site-a.com

agent-browser --session site2 open https://site-b.com

# Auto-discover running Chrome with remote debugging enabled agent-browser --auto-connect open https://example.com

agent-browser --auto-connect open https://example.com

# Persistent dark mode via flag (applies to all pages and new tabs) agent-browser --color-scheme dark open https://example.com

agent-browser --color-scheme dark open https://example.com

# Or via environment variable AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com

agent-browser --headed open https://example.com

# Launch Safari on a specific device agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

agent-browser snapshot # Output: # --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com ---

# Output: # --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com --- # [accessibility tree]

# --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com ---

export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com" agent-browser open https://example.com        # OK

agent-browser open https://example.com        # OK

agent-browser open https://malicious.com       # Blocked

# Compare staging vs production agent-browser diff url https://staging.example.com https://prod.example.com --screenshot

agent-browser diff url https://staging.example.com https://prod.example.com --screenshot

agent-browser eval 'document.title'

agent-browser eval 'document.querySelectorAll("img").length'

- Single-line, no nested quotes -> regular `eval 'expression'` with single quotes is fine

{   "headed": true,   "proxy": "http://localhost:8080",

"headed": true,   "proxy": "http://localhost:8080",   "profile": "./browser-data"

"proxy": "http://localhost:8080",

Lightpanda does not support `--extension`, `--profile`, `--state`, or `--allow-file-access`. Install Lightpanda from https://lightpanda.io/docs/open-source/installation.

./templates/form-automation.sh https://example.com/form

./templates/authenticated-session.sh https://app.example.com/login

./templates/capture-workflow.sh https://example.com ./output

# Load auth at launch agent-browser --state ./my-auth.json open https://app.example.com/dashboard

agent-browser --state ./my-auth.json open https://app.example.com/dashboard

# Or load into an existing session agent-browser state load ./my-auth.json agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

# First run: login once agent-browser --profile ~/.myapp-profile open https://app.example.com/login

agent-browser --profile ~/.myapp-profile open https://app.example.com/login

# All subsequent runs: already authenticated agent-browser --profile ~/.myapp-profile open https://app.example.com/dashboard

agent-browser --profile ~/.myapp-profile open https://app.example.com/dashboard

agent-browser --profile ~/.profiles/admin open https://app.example.com

agent-browser --profile ~/.profiles/viewer open https://app.example.com

export AGENT_BROWSER_PROFILE=~/.myapp-profile agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

# Auto-saves state on close, auto-restores on next launch agent-browser --session-name twitter open https://twitter.com

agent-browser --session-name twitter open https://twitter.com

# Next time: state is automatically restored agent-browser --session-name twitter open https://twitter.com

agent-browser --session-name twitter open https://twitter.com

[Credential-related source omitted]

[Credential-related source omitted]

agent-browser --session-name secure open https://app.example.com

# Navigate to login page agent-browser open https://app.example.com/login

agent-browser open https://app.example.com/login

# Login first (see above) agent-browser open https://app.example.com/login

agent-browser open https://app.example.com/login

# Navigate directly to protected page agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

# Start OAuth flow agent-browser open https://app.example.com/auth/google

agent-browser open https://app.example.com/auth/google

# Login with credentials agent-browser open https://app.example.com/login --headed  # Show browser

agent-browser open https://app.example.com/login --headed  # Show browser

# Navigate to protected resource agent-browser open https://protected.example.com/api

agent-browser open https://protected.example.com/api

[Credential-related source omitted]

# Navigate to protected page agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

if [[ -f "$STATE_FILE" ]]; then     agent-browser state load "$STATE_FILE"     agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

else     # First-time login     agent-browser open https://app.example.com/login

# First-time login     agent-browser open https://app.example.com/login     # ... login flow ...

agent-browser open https://app.example.com/login

[Credential-related source omitted]

rm -f ./auth-state.json

# Don't persist state in CI    agent-browser open https://app.example.com/login

agent-browser open https://app.example.com/login

agent-browser open <url>      # Navigate to URL (aliases: goto, navigate)                               # Supports: https://, http://, file://, about:, data://

# Supports: https://, http://, file://, about:, data://

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

agent-browser eval "document.title"          # Simple expressions only

# Perform actions agent-browser navigate https://example.com

agent-browser navigate https://example.com

agent-browser profiler start agent-browser navigate https://app.example.com

agent-browser navigate https://app.example.com

agent-browser navigate https://app.example.com

#!/bin/bash agent-browser profiler start agent-browser navigate https://app.example.com

agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle

agent-browser navigate https://app.example.com

- **Chrome DevTools**: Performance panel > Load profile (Ctrl+Shift+I > Performance) - **Perfetto UI**: https://ui.perfetto.dev/ -- drag and drop the JSON file

- **Perfetto UI**: https://ui.perfetto.dev/ -- drag and drop the JSON file

# Via CLI flag agent-browser --proxy "http://proxy.example.com:8080" open https://example.com

agent-browser --proxy "http://proxy.example.com:8080" open https://example.com

# Via environment variable export HTTP_PROXY="http://proxy.example.com:8080"

export HTTP_PROXY="http://proxy.example.com:8080"

agent-browser open https://example.com

# HTTPS proxy export HTTPS_PROXY="https://proxy.example.com:8080"

export HTTPS_PROXY="https://proxy.example.com:8080"

agent-browser open https://example.com

# Both export HTTP_PROXY="http://proxy.example.com:8080"

export HTTP_PROXY="http://proxy.example.com:8080"

export HTTPS_PROXY="http://proxy.example.com:8080"

agent-browser open https://example.com

# Include credentials in URL export HTTP_PROXY="http://username:password@proxy.example.com:8080"

export HTTP_PROXY="http://username:password@proxy.example.com:8080"

agent-browser open https://example.com

# SOCKS5 proxy export ALL_PROXY="socks5://proxy.example.com:1080" agent-browser open https://example.com

agent-browser open https://example.com

# SOCKS5 with auth export ALL_PROXY="socks5://user:pass@proxy.example.com:1080" agent-browser open https://example.com

agent-browser open https://example.com

# Via CLI flag agent-browser --proxy "http://proxy.example.com:8080" --proxy-bypass "localhost,*.internal.com" open https://example.com

agent-browser --proxy "http://proxy.example.com:8080" --proxy-bypass "localhost,*.internal.com" open https://example.com

# Via environment variable export NO_PROXY="localhost,127.0.0.1,.internal.company.com" agent-browser open https://internal.company.com  # Direct connection

export NO_PROXY="localhost,127.0.0.1,.internal.company.com" agent-browser open https://internal.company.com  # Direct connection agent-browser open https://external.com          # Via proxy

agent-browser open https://internal.company.com  # Direct connection

agent-browser open https://external.com          # Via proxy

PROXIES=(     "http://us-proxy.example.com:8080"

"http://us-proxy.example.com:8080"

"http://eu-proxy.example.com:8080"

"http://asia-proxy.example.com:8080"

agent-browser --session "$region" open https://example.com

PROXY_LIST=(     "http://proxy1.example.com:8080"

"http://proxy1.example.com:8080"

"http://proxy2.example.com:8080"

"http://proxy3.example.com:8080"

URLS=(     "https://site.com/page1"

"https://site.com/page1"

"https://site.com/page2"

"https://site.com/page3"

export HTTP_PROXY="http://corpproxy.company.com:8080"

export HTTPS_PROXY="http://corpproxy.company.com:8080"

# External sites go through proxy agent-browser open https://external-vendor.com

agent-browser open https://external-vendor.com

# Internal sites bypass proxy agent-browser open https://intranet.company.com

agent-browser open https://intranet.company.com

# Check your apparent IP agent-browser open https://httpbin.org/ip

agent-browser open https://httpbin.org/ip

# Test proxy connectivity first curl -x http://proxy.example.com:8080 https://httpbin.org/ip

curl -x http://proxy.example.com:8080 https://httpbin.org/ip

# Check if proxy requires auth export HTTP_PROXY="http://user:pass@proxy.example.com:8080"

export HTTP_PROXY="http://user:pass@proxy.example.com:8080"

# For testing only - not recommended for production agent-browser open https://example.com --ignore-https-errors

agent-browser open https://example.com --ignore-https-errors

# Session 1: Authentication flow agent-browser --session auth open https://app.example.com/login

agent-browser --session auth open https://app.example.com/login

# Session 2: Public browsing (separate cookies, storage) agent-browser --session public open https://example.com

agent-browser --session public open https://example.com

# Continue with authenticated session agent-browser open https://app.example.com/dashboard

agent-browser open https://app.example.com/dashboard

if [[ -f "$STATE_FILE" ]]; then     agent-browser state load "$STATE_FILE"     agent-browser open https://app.example.com/dashboard

agent-browser state load "$STATE_FILE"     agent-browser open https://app.example.com/dashboard else

agent-browser open https://app.example.com/dashboard

else     # Perform login     agent-browser open https://app.example.com/login

# Perform login     agent-browser open https://app.example.com/login     agent-browser snapshot -i

agent-browser open https://app.example.com/login

# Start all sessions agent-browser --session site1 open https://site1.com &

agent-browser --session site1 open https://site1.com &

agent-browser --session site2 open https://site2.com &

agent-browser --session site3 open https://site3.com &

# Test different user experiences agent-browser --session variant-a open "https://app.com?variant=a"

agent-browser --session variant-a open "https://app.com?variant=a"

agent-browser --session variant-b open "https://app.com?variant=b"

# These use the same default session agent-browser open https://example.com

agent-browser open https://example.com

# GOOD: Clear purpose agent-browser --session github-auth open https://github.com

agent-browser --session github-auth open https://github.com

agent-browser --session docs-scrape open https://docs.example.com

# AVOID: Generic names agent-browser --session s1 open https://github.com

agent-browser --session s1 open https://github.com

rm /tmp/auth-state.json

Page: Example Site - Home URL: https://example.com

URL: https://example.com

# CORRECT agent-browser open https://example.com

agent-browser open https://example.com

# WRONG agent-browser open https://example.com

agent-browser open https://example.com

# Perform actions agent-browser open https://example.com

agent-browser open https://example.com

# Run your automation agent-browser open https://app.example.com

agent-browser open https://app.example.com

agent-browser open https://app.example.com/login

agent-browser open https://example.com

#!/bin/bash

rm -f "$STATE_FILE"

#!/bin/bash

#!/bin/bash

<body>   <div class="header">     <h1><a href="https://github.com/obra/superpowers" style="color: inherit; text-decoration: none;">Superpowers Brainstorming</a></h1>

<div class="header">     <h1><a href="https://github.com/obra/superpowers" style="color: inherit; text-decoration: none;">Superpowers Brainstorming</a></h1>     <div class="status">Connected</div>

<h1><a href="https://github.com/obra/superpowers" style="color: inherit; text-decoration: none;">Superpowers Brainstorming</a></h1>

Executable file

Executable file

#!/usr/bin/env bash

rm -f "$PID_FILE"

#!/usr/bin/env bash

rm -f "$PID_FILE" "${STATE_DIR}/server.log"

rm -rf "$SESSION_DIR"

# Returns: {"type":"server-started","port":52341,"url":"http://localhost:52341",

Source: @nonzeroexitcode (Daniel Petho) on Threads, https://www.threads.com/@nonzeroexitcode/post/De4xkSrE0Ze. Working demo: `examples/index.html` (normal vs allow-discrete, side by side).

1. [https://react.dev](https://react.dev)

2. [https://react.dev/learn/passing-data-deeply-with-context](https://react.dev/learn/passing-data-deeply-with-context)

3. [https://react.dev/reference/react/use](https://react.dev/reference/react/use)

"abstract": "Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both hum

"references": [     "https://react.dev",     "https://react.dev/learn/passing-data-deeply-with-context",

"https://react.dev",

"https://react.dev/learn/passing-data-deeply-with-context",

"https://react.dev/reference/react/use"

Reference: [Link](https://example.com)

Docs: https://docs.convex.dev/eslint

- Primary: https://docs.convex.dev/understanding/best-practices/

- Error Handling: https://docs.convex.dev/functions/error-handling

- Write Conflicts: https://docs.convex.dev/error#1

- For broader context: https://docs.convex.dev/llms.txt

- Convex Documentation: https://docs.convex.dev/

- Convex LLMs.txt: https://docs.convex.dev/llms.txt

- Best Practices: https://docs.convex.dev/understanding/best-practices/

- Error Handling: https://docs.convex.dev/functions/error-handling

- Write Conflicts: https://docs.convex.dev/error#1

Preview URL: https://my-app-abc123.vercel.app

Claim URL:   https://vercel.com/claim-deployment?code=...

1. Go to https://claude.ai/settings/capabilities

#!/bin/bash

DEPLOY_ENDPOINT="https://codex-deploy-skills.vercel.sh/api/deploy"

rm -rf "$TEMP_DIR"

[Credential-related source omitted]

[Credential-related source omitted]

echo "Deploying..." >&2 RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK")

RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK")

while [ $ATTEMPT -lt $MAX_ATTEMPTS ]; do     HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "$PREVIEW_URL")

HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "$PREVIEW_URL")

#!/bin/bash

DEPLOY_ENDPOINT="https://claude-skills-deploy.vercel.com/api/deploy"

rm -rf "$TEMP_DIR"

[Credential-related source omitted]

[Credential-related source omitted]

echo "Deploying..." >&2 RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK")

RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK")

while [ $ATTEMPT -lt $MAX_ATTEMPTS ]; do     HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "$PREVIEW_URL")

HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "$PREVIEW_URL")

Role models: Emil Kowalski (https://emilkowal.ski/), Jakub Krehel (https://jakub.kr/).

Apache License                            Version 2.0, January 2004                         http://www.apache.org/licenses/

http://www.apache.org/licenses/

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/

http://www.apache.org/licenses/

http://www.apache.org/licenses/LICENSE-2.0

## 7. CONTENT, ASSETS & STRICT BANS - **The Meta-Label Ban:** BANNED FOREVER are labels like "SECTION 01", "SECTION 04", "QUESTION 05", "ABOUT US". Remove them entirely. They look cheap and unprofessional. - **Image Context & Style:** Use `

- **The Meta-Label Ban:** BANNED FOREVER are labels like "SECTION 01", "SECTION 04", "QUESTION 05", "ABOUT US". Remove them entirely. They look cheap and unprofessional. - **Image Context & Style:** Use `https://picsum.photos/seed/{keyword}

- **Image Context & Style:** Use `https://picsum.photos/seed/{keyword}/1920/1080` and match the keyword to the vibe. Apply sophisticated CSS filters (`grayscale`, `mix-blend-luminosity`, `opacity-90`, `contrast-125`) so they do not look lik

Source: @ianneo_ai breakdown of ElevenLabs blog covers (https://x.com/ianneo_ai/status/2113225499556381172).

<script> (() => {   const SVGNS = "http://www.w3.org/2000/svg";

(() => {   const SVGNS = "http://www.w3.org/2000/svg";   const reduceMQ = matchMedia("(prefers-reduced-motion: reduce)");

const SVGNS = "http://www.w3.org/2000/svg";

#!/usr/bin/env python3

#!/usr/bin/env python3

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/

http://www.apache.org/licenses/

http://www.apache.org/licenses/LICENSE-2.0

sudo apt-get install -y poppler-utils

Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)

Reference: [https://vercel.com/blog/how-we-optimized-package-imports-in-next-js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

Reference: [https://nextjs.org/docs/app/api-reference/config/next-config-js/output](https://nextjs.org/docs/app/api-reference/config/next-config-js/output), [https://nextjs.org/learn/seo/dynamic-imports](https://nextjs.org/learn/seo/dynamic

Reference: [https://nextjs.org/docs/app/guides/authentication](https://nextjs.org/docs/app/guides/authentication)

**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests

Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)

export async function GET(request: Request) {   // Runs on EVERY request - expensive!   const fontData = await fetch(

// Runs on EVERY request - expensive!   const fontData = await fetch(     new URL('./fonts/Inter.ttf', import.meta.url)

const fontData = await fetch(

const logoData = await fetch(

// Module-level: runs ONCE when module is first imported const fontData = fetch(

const fontData = fetch(

const logoData = fetch(

With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute), module-level caching is especially effective because multiple concurrent requests share the same function instance. The static assets stay loaded in memory across request

Reference: [https://react.dev/reference/react/cache](https://react.dev/reference/react/cache)

Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)

const [users, setUsers] = useState([])   useEffect(() => {     fetch('/api/users')

useEffect(() => {     fetch('/api/users')       .then(r => r.json())

fetch('/api/users')

Reference: [https://swr.vercel.app](https://swr.vercel.app)

Reference: [https://react.dev/learn/you-might-not-need-an-effect](https://react.dev/learn/you-might-not-need-an-effect)

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.

Reference: [https://react.dev/learn/removing-effect-dependencies#should-this-code-move-to-an-event-handler](https://react.dev/learn/removing-effect-dependencies#should-this-code-move-to-an-event-handler)

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, it automatically optimizes dependency tracking and may handle some of these cases for you.

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bu

Reference: [https://react.dev/reference/react/useDeferredValue](https://react.dev/reference/react/useDeferredValue)

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.

<html>       <head>         <script src="https://example.com/analytics.js" />

<head>         <script src="https://example.com/analytics.js" />         <script src="/scripts/utils.js" />

<script src="https://example.com/analytics.js" />

return (     <>       <Script src="https://example.com/analytics.js" strategy="afterInteractive" />

<>       <Script src="https://example.com/analytics.js" strategy="afterInteractive" />       <Script src="/scripts/utils.js" strategy="beforeInteractive" />

<Script src="https://example.com/analytics.js" strategy="afterInteractive" />

Reference: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)

export default function App() {   prefetchDNS('https://analytics.example.com')

prefetchDNS('https://analytics.example.com')

preconnect('https://api.example.com')

Reference: [https://react.dev/reference/react-dom#resource-preloading-apis](https://react.dev/reference/react-dom#resource-preloading-apis)

Reference: [https://react.dev/reference/react/useTransition](https://react.dev/reference/react/useTransition)

See [this gist](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) and [CSS Triggers](https://csstriggers.com/) for more information on layout-forcing operations.

Reference: [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)

This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see

Reference: [https://react.dev/reference/react/useEffectEvent#effect-event-in-deps](https://react.dev/reference/react/useEffectEvent#effect-event-in-deps)

Reference: [https://react.dev/learn/you-might-not-need-an-effect#initializing-the-application](https://react.dev/learn/you-might-not-need-an-effect#initializing-the-application)

1. [https://react.dev](https://react.dev)

2. [https://nextjs.org](https://nextjs.org)

3. [https://swr.vercel.app](https://swr.vercel.app)

4. [https://github.com/shuding/better-all](https://github.com/shuding/better-all)

5. [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)

6. [https://vercel.com/blog/how-we-optimized-package-imports-in-next-js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

7. [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)

Reference: [Link](https://example.com)

Originally created by [@shuding](https://x.com/shuding) at [Vercel](https://vercel.com).

"abstract": "Comprehensive performance optimization guide for React and Next.js applications, designed for AI agents and LLMs. Contains 40+ rules across 8 categories, prioritized by impact from critical (eliminating waterfalls, reducing bun

"references": [     "https://react.dev",     "https://nextjs.org",

"https://react.dev",

"https://nextjs.org",

"https://swr.vercel.app",

"https://github.com/shuding/better-all",

"https://github.com/isaacs/node-lru-cache",

"https://vercel.com/blog/how-we-optimized-package-imports-in-next-js",

"https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast"

Reference: [Link to documentation or resource](https://example.com)

Reference: [React useEffectEvent: Effect Event in deps](https://react.dev/reference/react/useEffectEvent#effect-event-in-deps)

Reference: [Initializing the application](https://react.dev/learn/you-might-not-need-an-effect#initializing-the-application)

Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)

Reference: [Next.js output](https://nextjs.org/docs/app/api-reference/config/next-config-js/output), [Next.js dynamic imports](https://nextjs.org/learn/seo/dynamic-imports), [Vite features](https://vite.dev/guide/features.html), [esbuild AP

Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

const [users, setUsers] = useState([])   useEffect(() => {     fetch('/api/users')

useEffect(() => {     fetch('/api/users')       .then(r => r.json())

fetch('/api/users')

Reference: [https://swr.vercel.app](https://swr.vercel.app)

See [this gist](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) and [CSS Triggers](https://csstriggers.com/) for more information on layout-forcing operations.

Reference: [How we made the Vercel Dashboard twice as fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)

This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.

export default function App() {   prefetchDNS('https://analytics.example.com')

prefetchDNS('https://analytics.example.com')

preconnect('https://api.example.com')

Reference: [React DOM Resource Preloading APIs](https://react.dev/reference/react-dom#resource-preloading-apis)

<html>       <head>         <script src="https://example.com/analytics.js" />

<head>         <script src="https://example.com/analytics.js" />         <script src="/scripts/utils.js" />

<script src="https://example.com/analytics.js" />

<head>         {/* Independent script - use async */}         <script src="https://example.com/analytics.js" async />

{/* Independent script - use async */}         <script src="https://example.com/analytics.js" async />         {/* DOM-dependent script - use defer */}

<script src="https://example.com/analytics.js" async />

return (     <>       <Script src="https://example.com/analytics.js" strategy="afterInteractive" />

<>       <Script src="https://example.com/analytics.js" strategy="afterInteractive" />       <Script src="/scripts/utils.js" strategy="beforeInteractive" />

<Script src="https://example.com/analytics.js" strategy="afterInteractive" />

Reference: [MDN - Script element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)

Reference: [useTransition](https://react.dev/reference/react/useTransition)

References: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bu

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.

Reference: [Should this code move to an event handler?](https://react.dev/learn/removing-effect-dependencies#should-this-code-move-to-an-event-handler)

**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, it automatically optimizes dependency tracking and may handle some of these cases for you.

Reference: [React useDeferredValue](https://react.dev/reference/react/useDeferredValue)

Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)

Reference: [https://nextjs.org/docs/app/guides/authentication](https://nextjs.org/docs/app/guides/authentication)

**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests

Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)

Reference: [React.cache documentation](https://react.dev/reference/react/cache)

export async function GET(request: Request) {   // Runs on EVERY request - expensive!   const fontData = await fetch(

// Runs on EVERY request - expensive!   const fontData = await fetch(     new URL('./fonts/Inter.ttf', import.meta.url)

const fontData = await fetch(

const logoData = await fetch(

// Module-level: runs ONCE when module is first imported const fontData = fetch(

const fontData = fetch(

const logoData = fetch(

With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute), module-level caching is especially effective because multiple concurrent requests share the same function instance. The static assets stay loaded in memory across request

[eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md)

Reference: [https://example.com](https://example.com)

[LegendList getItemType](https://legendapp.com/open-source/list/api/props/#getitemtype-v2)

[Reanimated useDerivedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue)

[Gesture Handler Tap Gesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture)

- [React Navigation Native Stack](https://reactnavigation.org/docs/native-stack-navigator)

- [React Native Bottom Tabs with React Navigation](https://oss.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-react-navigation)

- [React Native Bottom Tabs with Expo Router](https://oss.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-expo-router)

- [Expo Router Native Tabs](https://docs.expo.dev/router/advanced/native-tabs)

Reference: [https://react.dev/learn/choosing-the-state-structure](https://react.dev/learn/choosing-the-state-structure)

[Reanimated docs](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/#react-compiler-support)

Reference: [https://docs.expo.dev/versions/latest/sdk/image/](https://docs.expo.dev/versions/latest/sdk/image/)

Reference: [https://github.com/nandorojo/galeria](https://github.com/nandorojo/galeria)

Use [zeego](https://zeego.dev) for cross-platform native menus.

Reference: [https://zeego.dev/components/dropdown-menu](https://zeego.dev/components/dropdown-menu)

[Expo Font Documentation](https://docs.expo.dev/versions/latest/sdk/font/)

1. [https://react.dev](https://react.dev)

2. [https://reactnative.dev](https://reactnative.dev)

3. [https://docs.swmansion.com/react-native-reanimated](https://docs.swmansion.com/react-native-reanimated)

4. [https://docs.swmansion.com/react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler)

5. [https://docs.expo.dev](https://docs.expo.dev)

6. [https://legendapp.com/open-source/legend-list](https://legendapp.com/open-source/legend-list)

7. [https://github.com/nandorojo/galeria](https://github.com/nandorojo/galeria)

8. [https://zeego.dev](https://zeego.dev)

Reference: [Link](https://example.com)

"abstract": "Comprehensive performance optimization guide for React Native applications, designed for AI agents and LLMs. Contains 35+ rules across 13 categories, prioritized by impact from critical (core rendering, list performance) to inc

"references": [     "https://react.dev",     "https://reactnative.dev",

"https://react.dev",

"https://reactnative.dev",

"https://docs.swmansion.com/react-native-reanimated",

"https://docs.swmansion.com/react-native-gesture-handler",

"https://docs.expo.dev",

"https://legendapp.com/open-source/legend-list",

"https://github.com/nandorojo/galeria",

"https://zeego.dev"

Reference: [Link to documentation or resource](https://example.com)

Reference: [Reanimated useDerivedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue)

[Reanimated useDerivedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue)

Reference: [Gesture Handler Tap Gesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture)

[Gesture Handler Tap Gesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture)

Reference: [Expo Font Documentation](https://docs.expo.dev/versions/latest/sdk/font/)

[Expo Font Documentation](https://docs.expo.dev/versions/latest/sdk/font/)

Reference: [Link to documentation or resource](https://example.com)

Reference: [LegendList getItemType](https://legendapp.com/open-source/list/api/props/#getitemtype-v2)

[LegendList getItemType](https://legendapp.com/open-source/list/api/props/#getitemtype-v2)

- [React Navigation Native Stack](https://reactnavigation.org/docs/native-stack-navigator)

- [React Native Bottom Tabs with React Navigation](https://oss.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-react-navigation)

- [React Native Bottom Tabs with Expo Router](https://oss.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-expo-router)

- [Expo Router Native Tabs](https://docs.expo.dev/router/advanced/native-tabs)

See the [Reanimated docs](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/#react-compiler-support)

[Reanimated docs](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/#react-compiler-support)

Reference: [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure)

**Lint rule:** Enable `react/jsx-no-leaked-render` from [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md)

[eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md)

Reference: [expo-image](https://docs.expo.dev/versions/latest/sdk/image/)

Reference: [Galeria](https://github.com/nandorojo/galeria)

Use native platform menus instead of custom JS implementations. Native menus provide built-in accessibility, consistent platform UX, and better performance. Use [zeego](https://zeego.dev) for cross-platform native menus.

Use [zeego](https://zeego.dev) for cross-platform native menus.

Reference: [Zeego Documentation](https://zeego.dev/components/dropdown-menu)

When a parent VT exits, nested VTs inside it do **not** fire their own enter/exit — only the outermost VT animates. Per-item staggered animations during page navigation are not possible today. See [react#36135](https://github.com/facebook/r

Install via [skills.sh](https://skills.sh):

npx skills install https://github.com/vercel-labs/react-view-transitions-skill

- [React `<ViewTransition>` docs](https://react.dev/reference/react/ViewTransition)

- [React `addTransitionType` docs](https://react.dev/reference/react/addTransitionType)

- [Next.js `viewTransition` config](https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition)

- [Next.js App Router Playground (view transitions)](https://github.com/vercel/next-app-router-playground/tree/main/app/view-transitions) — Vercel's reference implementation

When a parent VT exits, nested VTs inside it do **not** fire their own enter/exit — only the outermost VT animates. Per-item staggered animations during page navigation are not possible today. See [react#36135](https://github.com/facebook/r

"abstract": "Guide for implementing smooth, native-feeling animations using React's View Transition API. Covers the <ViewTransition> component, addTransitionType, CSS view transition pseudo-elements, shared element transitions, JavaScript a

"references": [     "https://react.dev/reference/react/ViewTransition",     "https://react.dev/reference/react/addTransitionType",

"https://react.dev/reference/react/ViewTransition",

"https://react.dev/reference/react/addTransitionType",

"https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition",

"https://github.com/vercel/next-app-router-playground/tree/main/app/view-transitions"

**To accurately check for schema markup, use one of these methods:** 1. **Browser tool** — render the page and run: `document.querySelectorAll('script[type="application/ld+json"]')` 2. **Google Rich Results Test** — https://search.google.co

1. **Browser tool** — render the page and run: `document.querySelectorAll('script[type="application/ld+json"]')` 2. **Google Rich Results Test** — https://search.google.com/test/rich-results 3. **Screaming Frog export** — if the client prov

2. **Google Rich Results Test** — https://search.google.com/test/rich-results

{       "id": 1,       "prompt": "Can you do an SEO audit of our SaaS website? We're getting about 2,000 organic visits/month but feel like we should be getting more. URL: https://example.com",

"id": 1,       "prompt": "Can you do an SEO audit of our SaaS website? We're getting about 2,000 organic visits/month but feel like we should be getting more. URL: https://example.com",       "expected_output": "Should check for product-mar

"prompt": "Can you do an SEO audit of our SaaS website? We're getting about 2,000 organic visits/month but feel like we should be getting more. URL: https://example.com",

- [Google Search Central: Localized Versions](https://developers.google.com/search/docs/specialty/international/localized-versions)

- [SEJ: Google Combines Hreflang Signals](https://www.searchenginejournal.com/google-combines-hreflang-signals-from-html-sitemaps/389219/)

- [Google Search Central: Localized Versions](https://developers.google.com/search/docs/specialty/international/localized-versions)

- [Semrush: 9 Common Hreflang Errors](https://www.semrush.com/blog/hreflang-errors/)

- [SE Land: 31% of International Websites Contain Hreflang Errors](https://searchengineland.com/study-31-of-international-websites-contain-hreflang-errors-395161)

- [Google Blog: x-default hreflang](https://developers.google.com/search/blog/2013/04/x-default-hreflang-for-international-pages)

- [Google Blog: How x-default can help you (2023)](https://developers.google.com/search/blog/2023/05/x-default)

- [Google Search Central: Localized Versions](https://developers.google.com/search/docs/specialty/international/localized-versions)

- [SE Land: 31% Study](https://searchengineland.com/study-31-of-international-websites-contain-hreflang-errors-395161)

- [SERoundtable: Child Elements Don't Count](https://www.seroundtable.com/google-child-elements-dont-count-towards-sitemap-url-limit-34377.html)

- [SERoundtable: Where To Focus Hreflang](https://www.seroundtable.com/using-hreflang-34127.html)

- [Yoast: hreflang Ultimate Guide](https://yoast.com/hreflang-ultimate-guide/)

- [Digital Ready Marketing: Bing Doesn't Use Hreflang](https://digitalreadymarketing.com/bing-doesnt-use-hreflang-annotation-what-does-it-use/)

- [Yoast: hreflang Ultimate Guide](https://yoast.com/hreflang-ultimate-guide/)

- [John Mueller: hreflang canonical](https://johnmu.com/hreflang-canonical/)

- [Google: Consolidate Duplicate URLs](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls)

- [John Mueller: hreflang canonical](https://johnmu.com/hreflang-canonical/)

- [SEJ: Hreflang Tags Are Hints](https://www.searchenginejournal.com/google-reminds-that-hreflang-tags-are-hints-not-directives/546428/)

- [Google: Consolidate Duplicate URLs](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls)

- [International Web Mastery: Same-Language Duplicate Pages](https://internationalwebmastery.com/blog/how-google-handles-canonicalization-of-same-language-duplicate-near-duplicate-pages/)

- [Google: Managing Multi-Regional Sites](https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites)

- [Google: Pagination Best Practices](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading)

Each `<url>` entry includes `<xhtml:link>` alternates for every locale. Requires `xmlns:xhtml="http://www.w3.org/1999/xhtml"` namespace.

- [Google Search Central: Localized Versions](https://developers.google.com/search/docs/specialty/international/localized-versions)

- [Lumar: How Google Handles Hreflang](https://www.lumar.io/office-hours/hreflang/)

- [Google: Build and Submit a Sitemap](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap)

- [SERoundtable: Sitemap 50,000 Limit](https://www.seroundtable.com/google-sitemap-50-000-limit-based-on-location-urls-not-alternative-urls-33843.html)

- [Google: Build and Submit a Sitemap](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap)

- [Next.js Docs: sitemap.xml](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap)

- [Google: Managing Multi-Regional Sites](https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites)

- [Google Blog: x-default](https://developers.google.com/search/blog/2023/05/x-default)

- [Google Blog: Creating the Right Homepage](https://developers.google.com/search/blog/2014/05/creating-right-homepage-for-your)

- [Google: Locale-Adaptive Pages](https://developers.google.com/search/docs/specialty/international/locale-adaptive-pages)

- [SERoundtable: Consistency Is The Biggest Technical SEO Factor](https://www.seroundtable.com/google-consistency-seo-40427.html)

- [Google Support: International Targeting Deprecated](https://support.google.com/webmasters/answer/12474899?hl=en)

- [next-intl: Routing Configuration](https://next-intl.dev/docs/routing/configuration)

- [Next.js Discussion #18419](https://github.com/vercel/next.js/discussions/18419)

- [Google Spam Policies](https://developers.google.com/search/docs/essentials/spam-policies)

- [Glenn Gabe: Auto-Translating Content](https://www.gsqi.com/marketing-blog/auto-translating-content-google-scaled-content-abuse/)

- [SE Land: Reddit AI Translations](https://searchengineland.com/google-comments-on-reddits-use-of-ai-to-translate-its-pages-456908)

- [Google: Localized Versions](https://developers.google.com/search/docs/specialty/international/localized-versions)

- [Google: Crawl Budget Management](https://developers.google.com/search/docs/crawling-indexing/large-site-managing-crawl-budget)

- [Google Blog: Helpful Content Update](https://developers.google.com/search/blog/2022/08/helpful-content-update)

- [Amsive: What Changed in 2024](https://www.amsive.com/insights/seo/googles-helpful-content-update-ranking-system-what-happened-and-what-changed-in-2024/)

- [Google: Managing Multi-Regional Sites](https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites)

- [Google: Crawl Budget Management](https://developers.google.com/search/docs/crawling-indexing/large-site-managing-crawl-budget)

- [Google Blog: Crawl Budget](https://developers.google.com/search/blog/2017/01/what-crawl-budget-means-for-googlebot)

- [Google: Managing Multi-Regional Sites](https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites)

Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)

**Named presets:** `base-nova`, `radix-nova` **Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) **Preset codes:** Base62 strings starting with `a` (e.g. `a2r

**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com).

# Works with URLs too. npx shadcn@latest add https://api.npoint.io/abc123 --dry-run

npx shadcn@latest add https://api.npoint.io/abc123 --dry-run

input   docs      https://ui.shadcn.com/docs/components/radix/input

docs      https://ui.shadcn.com/docs/components/radix/input

examples  https://raw.githubusercontent.com/.../examples/input-example.tsx

button   docs      https://ui.shadcn.com/docs/components/radix/button

docs      https://ui.shadcn.com/docs/components/radix/button

examples  https://raw.githubusercontent.com/.../examples/button-example.tsx

1. **Named:** `--preset base-nova` or `--preset radix-nova` 2. **Code:** `--preset a2r6bw` (base62 string, starts with lowercase `a`) 3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`

3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`

# Use a custom theme URL. npx shadcn@latest init --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..." --force

npx shadcn@latest init --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..." --force

{   "registries": {     "@acme": "https://acme.com/r/{name}.json",

"registries": {     "@acme": "https://acme.com/r/{name}.json",     "@private": {

"@acme": "https://acme.com/r/{name}.json",

[Credential-related source omitted]

"url": "https://private.com/r/{name}.json",

[Credential-related source omitted]

Community registry index: `https://ui.shadcn.com/r/registries.json`

Source: [ascii-reveal](https://quanhoangindex.github.io/ascii-reveal/) by Quan Hoang, from the repo [quanhoangindex/ascii-reveal](https://github.com/quanhoangindex/ascii-reveal) (v0.3.0). It's **MIT licensed**, so copying or adapting it is 

<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>skeleton-dither demo</title> <link rel="preconnect" href="https://fonts.googleapis.com" />

<title>skeleton-dither demo</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" />

Executable file

* skeleton-dither.js — ASCII dither skeleton + glyph-grid reveal. Zero dependencies.  * Clean reimplementation inspired by ascii-reveal by Quan Hoang (MIT):  * https://github.com/quanhoangindex/ascii-reveal

* Clean reimplementation inspired by ascii-reveal by Quan Hoang (MIT):  * https://github.com/quanhoangindex/ascii-reveal  *

* https://github.com/quanhoangindex/ascii-reveal

Executable file

pg.on('console', lambda m: errs.append(m.text) if m.type in ('error','warning') else None)         pg.on('pageerror', lambda e: errs.append(str(e)))         await pg.goto('http://localhost:8811/demo/index.html')

pg.on('pageerror', lambda e: errs.append(str(e)))         await pg.goto('http://localhost:8811/demo/index.html')         await pg.wait_for_timeout(500); await pg.screenshot(path='../shots/demo-1-skeleton.png')

await pg.goto('http://localhost:8811/demo/index.html')

ctx = await b.new_context(reduced_motion='reduce'); rp = await ctx.new_page()         rp.on('pageerror', lambda e: errs.append('RM '+str(e)))         await rp.goto('http://localhost:8811/demo/index.html')

rp.on('pageerror', lambda e: errs.append('RM '+str(e)))

rp.on('pageerror', lambda e: errs.append('RM '+str(e)))         await rp.goto('http://localhost:8811/demo/index.html')         await rp.wait_for_function("window.__sd.phase==='done'", timeout=10000)

await rp.goto('http://localhost:8811/demo/index.html')

Executable file

* skeleton-dither.js — ASCII dither skeleton + glyph-grid reveal. Zero dependencies.  * Clean reimplementation inspired by ascii-reveal by Quan Hoang (MIT):  * https://github.com/quanhoangindex/ascii-reveal

* Clean reimplementation inspired by ascii-reveal by Quan Hoang (MIT):  * https://github.com/quanhoangindex/ascii-reveal  *

* https://github.com/quanhoangindex/ascii-reveal

Reference: https://supabase.com/docs/guides/database/query-optimization

Reference: https://www.postgresql.org/docs/current/indexes-types.html

Reference: https://www.postgresql.org/docs/current/indexes-multicolumn.html

Reference: https://www.postgresql.org/docs/current/indexes-index-only-scans.html

Reference: https://www.postgresql.org/docs/current/indexes-partial.html

Reference: https://www.postgresql.org/docs/current/runtime-config-client.html#GUC-IDLE-IN-TRANSACTION-SESSION-TIMEOUT

Reference: https://supabase.com/docs/guides/platform/performance#connection-management

Reference: https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pooler

Reference: https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool-modes

Reference: https://supabase.com/blog/postgres-roles-and-privileges

Reference: https://supabase.com/docs/guides/database/postgres/row-level-security

Reference: https://supabase.com/docs/guides/database/postgres/row-level-security#rls-performance-recommendations

Reference: https://www.postgresql.org/docs/current/datatype.html

Reference: https://www.postgresql.org/docs/current/ddl-constraints.html#DDL-CONSTRAINTS-FK

Reference: https://www.postgresql.org/docs/current/ddl-partitioning.html

- Avoid random UUIDs (v4) as primary keys on large tables (causes index   fragmentation) [Identity Columns](https://www.postgresql.org/docs/current/sql-createtable.html#SQL-CREATETABLE-PARMS-GENERATED-IDENTITY)

[Identity Columns](https://www.postgresql.org/docs/current/sql-createtable.html#SQL-CREATETABLE-PARMS-GENERATED-IDENTITY)

Reference: https://www.postgresql.org/docs/current/sql-syntax-lexical.html#SQL-SYNTAX-IDENTIFIERS

Reference: https://www.postgresql.org/docs/current/tutorial-transactions.html

Alternative: use a single statement to update atomically: Detect deadlocks in logs: [Deadlocks](https://www.postgresql.org/docs/current/explicit-locking.html#LOCKING-DEADLOCKS)

[Deadlocks](https://www.postgresql.org/docs/current/explicit-locking.html#LOCKING-DEADLOCKS)

Reference: https://www.postgresql.org/docs/current/explicit-locking.html#ADVISORY-LOCKS

Reference: https://www.postgresql.org/docs/current/sql-select.html#SQL-FOR-UPDATE-SHARE

Reference: https://www.postgresql.org/docs/current/sql-copy.html

Reference: https://supabase.com/docs/guides/database/query-optimization

Reference: https://supabase.com/docs/guides/database/pagination

Reference: https://www.postgresql.org/docs/current/sql-insert.html#SQL-ON-CONFLICT

Reference: https://supabase.com/docs/guides/database/extensions/pg_stat_statements

Reference: https://supabase.com/docs/guides/database/database-size#vacuum-operations

Reference: https://supabase.com/docs/guides/database/inspect

Reference: https://www.postgresql.org/docs/current/datatype-json.html#JSON-INDEXING

Reference: https://supabase.com/docs/guides/database/full-text-search

- https://www.postgresql.org/docs/current/

- https://supabase.com/docs

- https://wiki.postgresql.org/wiki/Performance_Optimization

- https://supabase.com/docs/guides/database/overview

- https://supabase.com/docs/guides/auth/row-level-security

Reference: [Full Text Search](https://supabase.com/docs/guides/database/full-text-search)

Reference: [JSONB Indexes](https://www.postgresql.org/docs/current/datatype-json.html#JSON-INDEXING)

Reference: [Connection Timeouts](https://www.postgresql.org/docs/current/runtime-config-client.html#GUC-IDLE-IN-TRANSACTION-SESSION-TIMEOUT)

Reference: [Database Connections](https://supabase.com/docs/guides/platform/performance#connection-management)

Reference: [Connection Pooling](https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pooler)

Reference: [Prepared Statements with Pooling](https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool-modes)

Reference: [COPY](https://www.postgresql.org/docs/current/sql-copy.html)

Reference: [N+1 Query Problem](https://supabase.com/docs/guides/database/query-optimization)

Reference: [Pagination](https://supabase.com/docs/guides/database/pagination)

Reference: [INSERT ON CONFLICT](https://www.postgresql.org/docs/current/sql-insert.html#SQL-ON-CONFLICT)

Reference: [Advisory Locks](https://www.postgresql.org/docs/current/explicit-locking.html#ADVISORY-LOCKS)

Reference: [Deadlocks](https://www.postgresql.org/docs/current/explicit-locking.html#LOCKING-DEADLOCKS)

[Deadlocks](https://www.postgresql.org/docs/current/explicit-locking.html#LOCKING-DEADLOCKS)

Reference: [Transaction Management](https://www.postgresql.org/docs/current/tutorial-transactions.html)

Reference: [SELECT FOR UPDATE SKIP LOCKED](https://www.postgresql.org/docs/current/sql-select.html#SQL-FOR-UPDATE-SHARE)

Reference: [EXPLAIN](https://supabase.com/docs/guides/database/inspect)

Reference: [pg_stat_statements](https://supabase.com/docs/guides/database/extensions/pg_stat_statements)

Reference: [VACUUM](https://supabase.com/docs/guides/database/database-size#vacuum-operations)

Reference: [Multicolumn Indexes](https://www.postgresql.org/docs/current/indexes-multicolumn.html)

Reference: [Index-Only Scans](https://www.postgresql.org/docs/current/indexes-index-only-scans.html)

Reference: [Index Types](https://www.postgresql.org/docs/current/indexes-types.html)

Reference: [Query Optimization](https://supabase.com/docs/guides/database/query-optimization)

Reference: [Partial Indexes](https://www.postgresql.org/docs/current/indexes-partial.html)

Reference: [Data Types](https://www.postgresql.org/docs/current/datatype.html)

Reference: [Foreign Keys](https://www.postgresql.org/docs/current/ddl-constraints.html#DDL-CONSTRAINTS-FK)

Reference: [Identifiers and Key Words](https://www.postgresql.org/docs/current/sql-syntax-lexical.html#SQL-SYNTAX-IDENTIFIERS)

Reference: [Table Partitioning](https://www.postgresql.org/docs/current/ddl-partitioning.html)

Reference: [Identity Columns](https://www.postgresql.org/docs/current/sql-createtable.html#SQL-CREATETABLE-PARMS-GENERATED-IDENTITY)

[Identity Columns](https://www.postgresql.org/docs/current/sql-createtable.html#SQL-CREATETABLE-PARMS-GENERATED-IDENTITY)

Reference: [Roles and Privileges](https://supabase.com/blog/postgres-roles-and-privileges)

Reference: [Row Level Security](https://supabase.com/docs/guides/database/postgres/row-level-security)

Reference: [RLS Performance](https://supabase.com/docs/guides/database/postgres/row-level-security#rls-performance-recommendations)

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

#!/usr/bin/env bash

sudo apt update && sudo apt install python3

Executable file

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md