To use the API key, you need to select Yes, but the default selection is No (recommended), so if you press Enter without reading the screen carefully, you end up choosing not to use the API key.
It works this way because signing in with an account is the recommended path, but if you meant to use an API key, it is the opposite of what you wanted.

Even if you notice the mistake, quit Claude Code, and run it again, this confirmation screen no longer appears.
That is because your choice is recorded in a file, and Claude Code does not ask again about an API key that already has a record.
The record is stored in the customApiKeyResponses property of the .claude.json file in your home directory.

• macOS: ~/.claude.json
• Windows: C:\Users\username\.claude.json

{
  "customApiKeyResponses": {
    "approved": [],
    "rejected": ["AbCdEfGhIjKlMnOpQrSt"]
  }
}

The values in the arrays are not the full API keys but the last 20 characters of each key.
They are identifiers that tell which API key a response belongs to, and they also keep the full key from being stored in this file as plain text.

When Claude Code starts, it takes the last 20 characters of the key in the environment variable, compares them with the two arrays, and decides on one of three states.

The confirmation screen appears only in the undecided state.
If you select No by mistake, the API key goes into rejected and the state becomes rejected, so the confirmation screen does not appear and the API key is not used.
This record stays even if you log out or reinstall Claude Code.

So if you remove just that value from the rejected array, the state goes back to undecided, and the confirmation screen appears the next time you run Claude Code.
If the array has only one value, you can leave it as an empty array.

{
  "customApiKeyResponses": {
    "approved": [],
    "rejected": []
  }
}

~/.claude.json is a file that Claude Code updates while it is running.
Quit every running Claude Code session before you edit it, so your changes are not overwritten.

There is also a way to fix this without editing the file directly.
With the ANTHROPIC_API_KEY environment variable registered, sign in with an account such as a personal subscription, then go to /config and change Use custom API key from false to true, and the API key moves from rejected to approved.
Then log out again and try using the API key.

If a path contains spaces, wrap it in quotes, like cd "C:\My Project".
type nul > cherry.md erases all the contents of a file with the same name if it already exists, leaving an empty file.

What the path symbols mean:

What the flags mean:

Flags start with - in macOS and PowerShell, and with / in CMD.
In macOS, you can combine ls -a -l into ls -al.

Terminal shortcuts:

• CVE-2025-55182
• CVE-2025-55183
• CVE-2025-55184
• CVE-2025-66478
• CVE-2025-67779

These vulnerabilities carry the risk of leading to pre-authentication remote code execution (RCE) attacks, so every project on an affected version must update right away to the fixed versions below to prevent serious security incidents.

npm update react-server-dom-webpack react-server-dom-parcel react-server-dom-turbopack

npm i next@latest
# or
npx fix-react2shell-next

• Denial of Service and Source Code Exposure in React Server Components
• Next.js Security Update: December 11, 2025

upgrade-insecure-requests is a CSP (Content-Security-Policy) directive that tells the browser to automatically upgrade every HTTP request in a web page (images, scripts, APIs, and so on) to HTTPS.
Loading HTTP resources on a web page served over HTTPS can open security holes such as XSS, MITM, and data interception, so most browsers block these resources or show a mixed content warning.
Automatically converting HTTP resource requests to HTTPS is an easy way to solve this mixed content problem.

Blocking mixed content with the block-all-mixed-content directive is deprecated, and it conflicts with the upgrade-insecure-requests directive.

In a development environment, you usually use an HTTP address such as http://localhost:5173.
With the upgrade-insecure-requests directive, even a local development server like this would have to be redirected to HTTPS, but common browsers such as Chrome and Firefox make an exception so that HTTP requests still work.
Safari, however, is a well-known browser that makes no such exception and strictly tries to redirect HTTP requests to HTTPS.
So when http://localhost is redirected to https://localhost, you can no longer reach a local development server that does not support HTTPS.

A simple way to fix this is to remove the Upgrade Insecure Requests directive from your local development environment.
Apply the directive conditionally, for example with environment variables, so that it is only used in production.

Vite configuration example

Inject the CSP meta tag conditionally at build time.

npm i -D vite-plugin-html

import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

const tags = []
if (process.env.NODE_ENV === 'development') {
  tags.push({
    tag: 'meta',
    attrs: {
      httpEquiv: 'Content-Security-Policy',
      content: 'upgrade-insecure-requests'
    }
  })
}
export default defineConfig({
  plugins: [
    createHtmlPlugin({
      inject: { tags }
    })
  ]
})

Next.js configuration example

Add the CSP header to requests for every path.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: process.env.NODE_ENV === 'production' ? 'upgrade-insecure-requests' : ''
          }
        ]
      }
    ]
  }
}
export default nextConfig

SvelteKit configuration example

Add the CSP meta tag conditionally in the application.

<script lang="ts">
  import { dev } from '$app/environment'
</script>

<svelte:head>
  {#if !dev}
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests" />
  {/if}
</svelte:head>

HTTPS development server example

The first time you run the local Vite development server, you may be asked to enter your password, and a local certificate is installed on your system and browsers.
After that, you can access the server at https://localhost.

npm i -D vite-plugin-mkcert

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  plugins: [
    mkcert()
  ]
})

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useQuery, useQueryClient } from '@tanstack/vue-query'
import type { UseQueryOptions } from '@tanstack/vue-query'

type Movies = Movie[]
interface Movie {
  imdbID: string
  Title: string
  Poster: string
  Year: string
}

const inputText = ref('') // Bound to the input element, so it changes continuously
const searchText = ref('') // Changes only when you search
const queryOptions = computed(() => {
  return {
    queryKey: ['movies', searchText.value],
    queryFn: async () => {
      const res = await fetch(`https://omdbapi.com?apikey=7035c60c&s=${searchText.value}`)
      const { Search: movies = [] } = await res.json()
      return movies as Movies
    },
    staleTime: 1000 * 60 * 60, // Cache for 1 hour
    placeholderData: prev => prev, // Use the previous data as placeholder data (prevents flickering)
    enabled: !!searchText.value // Don't run if there's no search text
  } satisfies UseQueryOptions<Movies>
})
console.log(queryOptions) // ComputedRef
console.log(queryOptions.value) // Query option values

const queryClient = useQueryClient()
const { data, isFetching } = useQuery<Movie[]>(queryOptions) // Pass the ComputedRef object

async function fetchMovies() {
  searchText.value = inputText.value // Use the entered text as the search text
  if (!searchText.value.trim()) return
  // fetchQuery uses the cached data, or fetches new data if there's none!
  await queryClient.fetchQuery(queryOptions) // Pass the ComputedRef object
}
</script>

<template>
  <div>
    <input
      v-model="inputText"
      @keydown.enter="fetchMovies" />
    <button @click="fetchMovies">Search</button>
  </div>
  {{ isFetching ? 'Loading...' : '' }}
  <ul>
    <li
      v-for="movie in data"
      :key="movie.imdbID">
      {{ movie.Title }} ({{ movie.Year }})
    </li>
  </ul>
  <RouterView />
</template>

The tsconfig.json file specifies how the TypeScript compiler converts your project to JS.

{
  "files": ["node_modules/my-library/index.ts"],
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"],
  "extends": "config/base.json",
  "compilerOptions": {}
}

CompilerOptions

Here are the main options you can use in CompilerOptions.

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"]
  }
}

TypeScript, currently at version 5, plans to introduce deprecations and changes to some features for the native transition in the next version, 6, and to release the Go-based native compiler as TypeScript 7 once it reaches feature parity.
Microsoft also said its long-term goal is to let developers choose between the JavaScript-based version and the native version as needed.

A 10x Faster TypeScript

When it was released in 2016, CRA was a great way to start a React project easily while still meeting production requirements.
Today, however, there is much less need for CRA, because of its limits in building high-performance production apps, the lack of active maintainers, and the fact that other frameworks such as Next.js and React Router have already solved many of CRA's problems.

So CRA now moves into maintenance mode. A version that supports React 19 has been released, but new installs show a warning message that discourages you from using it.

From now on, it is recommended to build new apps with frameworks such as Next.js, React Router, or Expo, and to migrate existing apps to a framework or switch to a modern build tool such as Vite.

• Starting a React Project with Vite
• React Router Essentials
• Next.js 15 Essentials

import { EditorView } from 'codemirror'
import { keymap } from '@codemirror/view'
import { Prec } from '@codemirror/state'

new EditorView({
  // ...
  extensions: [
    Prec.highest(
      keymap.of([
        {
          key: 'Backspace',
          run: () => {
            console.log('Backspace key!')
            return false // Moves on to the next handler, so the text can be deleted.
          }
        },
        {
          key: 'Enter',
          run: () => {
            console.log('Enter key!')
            return true // Does not move on to the next handler, so no line break is inserted.
          }
        }
      ])
    )
  ]
})

If the run function of a keymap returns true, the next handler does not run, so you can disable the default keymap.
On the other hand, if it returns false, the next handler runs, so you can combine your behavior with the default keymap.

All options are explained based on the following example.

import { create } from 'zustand'
import { combine, persist } from 'zustand/middleware'

export const useCountStore = create(
  persist(
    combine(
      {
        count: 0,
        double: 0
      },
      set => ({
        increase: () => set(state => ({ count: state.count + 1 }))
      })
    ),
    {
      name: 'count'
    }
  )
)

For overall usage of Zustand, see Zustand Essentials!

storage

Instead of the default local storage (localStorage), you can use other storage such as session storage or IndexedDB.
If you want your own custom storage, return an object that matches the StateStorage interface through the createJSONStorage helper function.

export interface StateStorage {
  getItem: (name: string) => string | null | Promise<string | null>;
  setItem: (name: string, value: string) => unknown | Promise<unknown>;
  removeItem: (name: string) => unknown | Promise<unknown>;
}

// ...
export const useCountStore = create(
  persist(
    // combine(),
    {
      name: 'count',
      storage: createJSONStorage(() => sessionStorage) // Use session storage
    }
  )
)

Partialize

To save only the state you want instead of saving all state to storage, use the partialize option to return an object that contains only the state to save.
Because it's a factory function, you can transform the state when saving, but until rehydration, the current state (currentState) and the storage state (persistedState) may differ.
Hydration is explained in the next option.

// ...
export const useCountStore = create(
  persist(
    // combine(),
    {
      name: 'count',
      partialize: currentState => ({ 
        count: currentState.count // Save only the count property to storage!
      })
    }
  )
)

onRehydrateStorage

The onRehydrateStorage option is a function that runs when the storage is hydrated.
You can write logic that needs to run right after hydration, and the state parameter of onRehydrateStorage includes the actions.

In Zustand, hydration is the process of merging the state saved in storage with the current state.
You can also rehydrate manually at any time with the useCountStore.persist.rehydrate() method.
It's easiest to think of it as merging the storage state into the current state.

// ...
export const useCountStore = create(
  persist(
    // combine(),
    {
      name: 'count',
      onRehydrateStorage: state => {
        console.log('Merged with the storage state!', state)
      }
    }
  )
)

skipHydration

You can skip the initial hydration with the skipHydration option.
You can then rehydrate manually with the useCountStore.persist.rehydrate() method.

// ...
export const useCountStore = create(
  persist(
    // combine(),
    {
      name: 'count',
      skipHydration: true
    }
  )
)

import { useCountStore } from './store/count'

export default function RehydrateCountStore() {
  return (
    <button onClick={() => useCountStore.persist.rehydrate()}>
      Rehydrate!
    </button>
  )
}

version

If you introduce changes that differ significantly from the data already saved in storage, you can specify a new version as a number so that storage data with a mismatched version isn't used.
If you need to make use of the old version's data instead of ignoring it, you can also use the migrate option described next.

// ...
export const useCountStore = create(
  persist(
    // combine(),
    {
      name: 'count',
      version: 1 // Default: 0
    }
  )
)

migrate

The migrate function runs during hydration when the version of the current state differs from the version in storage.
The function must return state of a type that matches the latest version, and it's useful when you need to use the data in storage but its structure or names have changed.

import { create } from 'zustand'
import { combine, persist } from 'zustand/middleware'

interface StateVersion0 {
  count: number
  double: number
}
interface StateVersion1 {
  amount: number
  multiplier: number
  max: number
}

export const useCountStore = create(
  persist(
    combine(
      {
        amount: 0,
        multiplier: 0
      },
      set => ({
        increase: () => set(state => ({ amount: state.amount + 1 }))
      })
    ),
    {
      name: 'count',
      version: 1,
      migrate: (persistedState, version) => {
        if (version === 0) {
          const oldState = persistedState as StateVersion0
          const newState: StateVersion1 = {
            amount: oldState.count,
            multiplier: oldState.double,
            max: 100
          }
          return newState
        }
        return persistedState
      }
    }
  )
)

merge

The merge option lets you specify how the storage state is merged with the current state during hydration.
By default, the storage state and the current state are shallow merged, but if you need a deep merge, you can use Lodash's merge function.
It runs after the migrate function (when both options are set), and it receives the value returned by migrate as its first parameter (persistedState).

npm i lodash-es
npm i -D @types/lodash-es

// ...
import { merge } from 'lodash-es'

export const useCountStore = create(
  persist(
    // combine(),
    {
      name: 'count',
      merge: (persistedState, currentState) => {
        return merge(currentState, persistedState) // Deep merge the current state and the storage state
      }
    }
  )
)

• Builds up to 100x faster
• Minimal installation and configuration code
• Makes full use of modern CSS features (@layer, @property, color-mix(), and more)
• Support for container queries, 3D transforms, and a new color system
• More intuitive customization, configured directly in CSS without JS

When you create a new project with the latest Next.js 15, Tailwind CSS v4 is applied by default.
If you want to use Tailwind CSS v4 in an existing Next project, set it up with the following steps.

First, install each package at its latest version.

npm i -D tailwindcss@4 postcss @tailwindcss/postcss

Change the option name in the PostCSS configuration.

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    // tailwindcss: {}
    "@tailwindcss/postcss": {}
  }
}

export default config

Also change the style code that you import globally.

/* @tailwind base;
@tailwind components;
@tailwind utilities; */
@import "tailwindcss";

/* Omitted.. */

Open the phone's Settings, go to 'Accounts and backup', and select 'Manage accounts'.

In the list of accounts (email addresses) on the phone, select the one you want to delete and remove it.

If you're new to PostgreSQL data types or aren't familiar with them, it can be hard to know which type to choose.
So, to help you choose a data type, I've organized them into a table with descriptions as follows.
Use the table to design a database structure that fits your project!

-- Offset
SELECT *
FROM table_name
ORDER BY created_at DESC
LIMIT 10
OFFSET 10

-- Cursor
SELECT *
FROM table_name
WHERE created_at < :cursor_created_at
ORDER BY created_at DESC
LIMIT 10

.agents/skills/ is a shared path that doesn't belong to any specific tool, but Claude Code only checks .claude/skills/.
If you use Claude Code together with other AI agents like Codex or Cursor in one project, the same skill has to exist in both paths.

If you simply copy the folder, you end up with two or more copies of the same skill.
Once you edit one of them, the copies drift apart, and it becomes hard to tell or manage which one is the latest.
This is where a symbolic link helps: you keep the original in one place and have the other path point to it.

What is a symbolic link

A symbolic link is a special file that stores the path of another file or folder.
When you open the link, it follows the stored path and opens the original, so programs treat the link and the original as the same folder without telling them apart.
On macOS and Linux, you create one with the ln -s command.

ln -s ../../.claude/skills/my-skill .agents/skills/my-skill

Now, if you edit .agents/skills/my-skill/SKILL.md, .claude/skills/my-skill/SKILL.md changes too.
Both paths point to the same file, so an edit on either side shows up on the other side right away.
Deleting the link leaves the original untouched, but deleting the original leaves the link as a broken link with nothing to point to.

However, linking skill folders by hand comes with a lot to check.

• A relative path is resolved from where the link is created, not from where you run the command, so if you leave out ../../ in the command above, you get a broken link.
• You have to run one command per skill, and repeat it every time you add a skill.
• If some skills have their original in .claude/skills and others in .agents/skills, you also have to check the link direction for each skill.
• On Windows, you use the mklink command, and creating a symbolic link requires Developer Mode or administrator privileges.

Creating links the easy way

@heropy/symlink is a CLI tool that compares the entries in several folders and creates symbolic links on the side where they are missing.
You pass the folders to link as arguments, and you can run it with npx without installing anything.

It works on Node.js 20.19 or later.

npx @heropy/symlink .claude/skills .agents/skills
## link   .agents/skills/commit-push -> ../../.claude/skills/commit-push
## link   .agents/skills/writing-style -> ../../.claude/skills/writing-style
## link   .claude/skills/react-router -> ../../.agents/skills/react-router
##
## 3 linked

commit-push and writing-style have their originals in .claude/skills, so links were created in .agents/skills, and react-router is the other way around.
No matter what order you write the arguments in, the side that holds the actual folder becomes the original, and the relative path of each link is calculated from the link's location.
So you don't have to worry about which path you added a skill to or how to write the path.

When you add a new skill, run the same command again.
Entries that are already linked are reported as keep and left as they are, and only the new skill gets linked.

npx @heropy/symlink .claude/skills .agents/skills
## keep   .agents/skills/heropy-commit-push
## keep   .agents/skills/heropy-writing-style
## link   .agents/skills/lighthouse -> ../../.claude/skills/lighthouse
## keep   .claude/skills/react-router
##
## 1 linked, 3 already fine

Running it many times gives the same result, so it is safe to add to a postinstall script.
It never deletes an existing file or folder to make room, and for entries you need to decide on yourself, such as when an original with the same name exists on both sides, it skips them and prints the reason.
On Windows, it creates directory junctions, which need no special privileges, so you can use the same command on any operating system.

AI skills were just the reason I built this tool. Any folder that each tool expects at its own fixed path, such as shared settings, prompt collections, or static assets, can be linked the same way.
For options like --dry-run, --list, and --unlink, notes on Windows, the Node.js API, and more, see the GitHub repository.