### Interactive Setup

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/typefully/SKILL.md

Initiate the Typefully CLI setup process interactively. This command guides the user through configuration steps.

```bash
./scripts/typefully.js setup
```

--------------------------------

### Install Dotfiles

Source: https://github.com/freekmurze/dotfiles/blob/main/README.md

Clone the repository, navigate into it, and run the install script to set up all configurations and tools.

```bash
git clone git@github.com:freekmurze/dotfiles.git ~/.dotfiles
cd ~/.dotfiles
bin/install
```

--------------------------------

### Install project dependencies

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/vercel-react-best-practices/README.md

Run this command to install the necessary dependencies for the project.

```bash
pnpm install
```

--------------------------------

### Example Task Fetch Execution

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/context7-auto-research/SKILL.md

An example of how to trigger a documentation fetch for a specific library ID.

```text
Task: Fetch Next.js middleware docs
Prompt: node .claude/skills/context7-auto-research/context7-api.js context "/vercel/next.js" "middleware configuration"
```

--------------------------------

### Example Task Search Execution

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/context7-auto-research/SKILL.md

An example of how to trigger a search for a specific library and query.

```text
Task: Search for Next.js
Prompt: node .claude/skills/context7-auto-research/context7-api.js search "next.js" "How to configure middleware in Next.js 15"
```

--------------------------------

### Verify Package Setup

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/spatie-package-skeleton/SKILL.md

Checks the directory structure and composer configuration after setup.

```bash
# Check the directory structure
ls -la src/
# Verify composer.json looks correct
cat composer.json | head -20
# Check tests passed during setup
```

--------------------------------

### Install Flare CLI

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/flare/SKILL.md

Install the CLI globally via Composer.

```bash
composer global require spatie/flare-cli
```

--------------------------------

### Install Packages from Brewfile

Source: https://github.com/freekmurze/dotfiles/blob/main/README.md

Installs all Homebrew packages defined in the specified Brewfile, ensuring consistent environment setup.

```bash
brew bundle --file=~/.dotfiles/config/Brewfile
```

--------------------------------

### Install Dotfiles Environment

Source: https://context7.com/freekmurze/dotfiles/llms.txt

Clones the repository and executes the installation script to set up the development environment, including Oh My Zsh, Homebrew, and language-specific tools.

```bash
# Clone and install dotfiles
git clone git@github.com:freekmurze/dotfiles.git ~/.dotfiles
cd ~/.dotfiles
bin/install

# The script will:
# 1. Install Oh My Zsh with custom agnoster theme
# 2. Create symlinks for shell config, git, vim, editors
# 3. Install Homebrew and all packages from Brewfile
# 4. Set up fnm for Node.js version management
# 5. Install PHP extensions (imagick, memcached, xdebug, redis)
# 6. Install global npm packages (agent-browser)
# 7. Install global Composer packages (pint, envoy, phpunit-watcher, valet)
# 8. Start MySQL service
# 9. Optionally set up Claude Code with skills and agents
```

--------------------------------

### Install State Libraries

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-atomic-state.md

Commands to install Jotai or Zustand.

```bash
npm install jotai
# or
npm install zustand
```

--------------------------------

### Start Development Server

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-components/SKILL.md

Use this command to start the Vite development server and verify the live result of your React components.

```bash
npm run dev
```

--------------------------------

### Flashlight CLI Installation and Usage

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-measure-fps.md

Commands to install the Flashlight benchmarking tool and initiate performance measurement on an Android device.

```bash
# Method 1: Built-in Perf Monitor
# Shake device → Dev Menu → "Perf Monitor"

# Method 2: Flashlight (Android, detailed reports)
curl https://get.flashlight.dev | bash
flashlight measure
```

```bash
# Install Flashlight CLI
curl https://get.flashlight.dev | bash
```

```bash
# Start measuring (app must be running on Android)
flashlight measure
```

--------------------------------

### Install react-native-performance

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/native-measure-tti.md

Install the recommended library for performance monitoring in React Native. This is a prerequisite for setting up performance markers.

```bash
npm install react-native-performance
```

--------------------------------

### Check Flare CLI installation

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/flare/SKILL.md

Verify the installed version of the CLI.

```bash
flare --version
```

--------------------------------

### Example Prompt for React Component Conversion

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-components/README.md

This is an example prompt to initiate the conversion of a design screen into a React component system.

```text
Convert my Landing Page screen in my Podcast Stitch Project to a React component system.
```

--------------------------------

### Install iOS Dependencies with CocoaPods

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/native-platform-setup.md

After installing JavaScript dependencies, navigate to the `ios` directory and run `pod install` to set up native iOS dependencies. This requires Ruby and Bundler.

```bash
# Install pods after npm install
cd ios && bundle exec pod install
```

--------------------------------

### Troubleshoot Pod Install Failures

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/native-platform-setup.md

Run this command when `pod install` fails to ensure you are using the correct bundle and updating repositories.

```bash
bundle exec pod install --repo-update
```

--------------------------------

### Perform form submission

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/agent-browser/SKILL.md

Example workflow for filling out a form and submitting it.

```bash
agent-browser open https://example.com/form
agent-browser snapshot -i
# Output shows: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]

agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Check result
```

--------------------------------

### Install React Compiler for React Native

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-react-compiler.md

Commands to install the compiler plugin and runtime for standard React Native projects.

```bash
npm install -D babel-plugin-react-compiler@latest
```

```bash
npm install react-compiler-runtime@beta
```

--------------------------------

### Migration Script Example using Search-Replace

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-barrel-exports.md

Example of a search-and-replace pattern that can be used in scripts or IDEs to automate the refactoring of barrel imports to direct imports.

```bash
# Use codemod or search-replace
# Find: import { (\w+) } from '\.\/components';
# Replace: import $1 from './components/$1';
```

--------------------------------

### Install Metro Serializer for Tree Shaking

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-barrel-exports.md

Install the `@rnx-kit/metro-serializer-esbuild` package to enhance Metro's capabilities for tree shaking and code optimization.

```bash
npm install @rnx-kit/metro-serializer-esbuild
```

--------------------------------

### Complete Lazy Loading Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-code-splitting.md

A full example demonstrating how to lazily load a 'HeavyFeature' component and display it only after a button press, with a fallback loading indicator.

```tsx
// App.tsx
import React, { Suspense, useState } from 'react';
import { Button, View, ActivityIndicator } from 'react-native';

// Lazy load heavy feature
const HeavyFeature = React.lazy(() =>
  import(/* webpackChunkName: "heavy-feature" */ './HeavyFeature')
);

const App = () => {
  const [showFeature, setShowFeature] = useState(false);
  
  return (
    <View>
      <Button 
        title="Load Feature" 
        onPress={() => setShowFeature(true)} 
      />
      
      {showFeature && (
        <Suspense fallback={<ActivityIndicator />}>
          <HeavyFeature />
        </Suspense>
      )}
    </View>
  );
};

```

--------------------------------

### List Installed Node.js Versions

Source: https://github.com/freekmurze/dotfiles/blob/main/README.md

Display all Node.js versions currently managed by FNM.

```bash
fnm list
```

--------------------------------

### Provide good code example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/vercel-react-best-practices/README.md

Placeholder for demonstrating correct patterns in a rule file.

```typescript
// Good code example
```

--------------------------------

### Install Claude Code

Source: https://context7.com/freekmurze/dotfiles/llms.txt

Installs Claude Code independently or configures it within an existing dotfiles setup.

```bash
# Install Claude Code independently (without full dotfiles)
curl -fsSL https://raw.githubusercontent.com/freekmurze/dotfiles/main/bin/install-claude-code | bash

# Or if dotfiles are already installed:
~/.dotfiles/bin/install-claude-code

# Creates symlinks for:
# ~/.claude/CLAUDE.md         -> config guidelines
# ~/.claude/skills/           -> all Claude Code skills
# ~/.claude/agents/           -> all Claude Code agents
# ~/.claude/settings.json     -> permissions and preferences
```

--------------------------------

### Create process guides with Step-by-Step Block

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/seo-audit/references/aeo-geo-patterns.md

Use this template for 'How to [X]' queries to create structured, list-based snippets.

```markdown
## How to [Action/Goal]

[1-sentence overview of the process]

1. **[Step Name]**: [Clear action description in 1-2 sentences]
2. **[Step Name]**: [Clear action description in 1-2 sentences]
3. **[Step Name]**: [Clear action description in 1-2 sentences]
4. **[Step Name]**: [Clear action description in 1-2 sentences]
5. **[Step Name]**: [Clear action description in 1-2 sentences]

[Optional: Brief note on expected outcome or time estimate]
```

```markdown
## How to Optimize Content for Featured Snippets

Earning featured snippets requires strategic formatting and direct answers to search queries.

1. **Identify snippet opportunities**: Use tools like Semrush or Ahrefs to find keywords where competitors have snippets you could capture.
2. **Match the snippet format**: Analyze whether the current snippet is a paragraph, list, or table, and format your content accordingly.
3. **Answer the question directly**: Provide a clear, concise answer (40-60 words for paragraph snippets) immediately after the question heading.
4. **Add supporting context**: Expand on your answer with examples, data, and expert insights in the following paragraphs.
5. **Use proper heading structure**: Place your target question as an H2 or H3, with the answer immediately following.

Most featured snippets appear within 2-4 weeks of publishing well-optimized content.
```

--------------------------------

### Install ESLint Plugin for Expo

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-react-compiler.md

Commands to set up the ESLint plugin for Expo projects.

```bash
npx expo lint  # Ensures ESLint is set up
npx expo install eslint-plugin-react-compiler -- -D
```

--------------------------------

### Setup

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/typefully/SKILL.md

Configure the Typefully CLI, either interactively or non-interactively using API keys and location settings.

```APIDOC
## POST /api/setup (Setup)

### Description
Sets up the Typefully CLI configuration.

### Method
POST

### Endpoint
/api/setup

### Parameters
#### Query Parameters
- **--key** (string) - Required (non-interactive) - Your Typefully API key.
- **--location** (string) - Optional (non-interactive) - The location setting (e.g., `global`).
- **--default-social-set** (string) - Optional (non-interactive) - The ID of the default social set to use.
- **--no-default** (boolean) - Optional (non-interactive) - Skip default social set selection.

### Request Example
```bash
./scripts/typefully.js setup
./scripts/typefully.js setup --key typ_xxx --location global
./scripts/typefully.js setup --key typ_xxx --location global --default-social-set 123
./scripts/typefully.js setup --key typ_xxx --no-default
```
```

--------------------------------

### Emotional Storytelling Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/social-content/references/reverse-engineering.md

Shows how to start content with personal feelings and vulnerability to create a stronger emotional connection with the audience, followed by the lesson learned.

```text
❌ "Here's what I learned about pricing"

✅ "I was terrified to raise my prices.

My hands were shaking when I sent the email.

Here's what happened..."
```

--------------------------------

### Install Claude Code CLI

Source: https://github.com/freekmurze/dotfiles/blob/main/README.md

Installs the standalone Claude Code CLI tool by downloading and executing an installation script.

```bash
curl -fsSL https://raw.githubusercontent.com/freekmurze/dotfiles/main/bin/install-claude-code | bash
```

--------------------------------

### View Snapshot Output Format

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/agent-browser/references/snapshot-refs.md

Example of the structured output generated by the snapshot command.

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

@e1 [header]
  @e2 [nav]
    @e3 [a] "Home"
    @e4 [a] "Products"
    @e5 [a] "About"
  @e6 [button] "Sign In"

@e7 [main]
  @e8 [h1] "Welcome"
  @e9 [form]
    @e10 [input type="email"] placeholder="Email"
    @e11 [input type="password"] placeholder="Password"
    @e12 [button type="submit"] "Log In"

@e13 [footer]
  @e14 [a] "Privacy Policy"
```

--------------------------------

### Install and Use Node.js LTS Versions with FNM

Source: https://github.com/freekmurze/dotfiles/blob/main/README.md

Manage Node.js installations using FNM. Installs the latest LTS version and switches the active Node.js environment to it.

```bash
fnm install --lts
```

```bash
fnm use lts-latest
```

--------------------------------

### Create a new project via CLI

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/flare/references/workflows.md

Initializes a new project with specified fields like name, team ID, stage, and technology.

```bash
flare create-project --field name="My App" --field team_id=1 --field stage=production --field technology=Laravel
```

--------------------------------

### Install Fast Image

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-native-assets.md

Install the react-native-fast-image library for improved caching and performance.

```bash
npm install react-native-fast-image
```

--------------------------------

### Compare Dependency Sizes

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-library-size.md

Workflow examples for checking package URLs and comparing alternative library sizes.

```text
https://bundlephobia.com/package/[package-name]
```

```text
moment (289 kB) vs date-fns (75 kB) vs dayjs (6 kB)
```

--------------------------------

### Analyze Library Composition

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-library-size.md

Example output showing minified size, gzipped size, and dependency tree.

```text
react-native-paper
├── Minified: 312 kB
├── Gzipped: 78 kB
└── Dependencies: 12 packages
    ├── @callstack/react-theme-provider
    ├── color
    └── ...
```

--------------------------------

### Build for WebGPU

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/building-native-ui/references/webgpu-three.md

Commands to prebuild and run the application for WebGPU support.

```bash
npx expo prebuild
npx expo run:ios
```

--------------------------------

### Execute Context7 API Workflow Actions

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/context7-auto-research/SKILL.md

Command-line examples for searching and fetching documentation context within specific library versions.

```bash
node context7-api.js search "react" "useEffect fetch data"
```

```bash
node context7-api.js context "/facebook/react/v19.0.0" "useEffect data fetching"
```

```bash
node context7-api.js search "next.js" "middleware configuration"
```

```bash
node context7-api.js context "/vercel/next.js/v15.1.8" "middleware"
```

```bash
node context7-api.js search "prisma" "one-to-many relations"
```

```bash
node context7-api.js context "/prisma/prisma" "one-to-many relations"
```

--------------------------------

### Storage Hook Usage Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/building-native-ui/references/storage.md

Example implementation of the useStorage hook within a React component.

```tsx
function Settings() {
  const [theme, setTheme] = useStorage("theme", "light");

  return (
    <Switch
      value={theme === "dark"}
      onValueChange={(dark) => setTheme(dark ? "dark" : "light")}
    />
  );
}
```

--------------------------------

### Setup Typefully API Key

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/typefully/SKILL.md

Run this command to set up your Typefully API key securely. Ensure you replace `<skill-path>` with the actual directory of the skill.

```bash
<skill-path>/scripts/typefully.js setup
```

--------------------------------

### Create Repository from Template

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/spatie-package-skeleton/SKILL.md

Initializes a new repository from the Spatie Laravel skeleton template and clones it locally.

```bash
gh repo create <vendor>/<package-name> --template spatie/package-skeleton-laravel --public --clone
cd <package-name>
```

--------------------------------

### Install React Compiler for Expo

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-react-compiler.md

Commands to install the compiler plugin for different Expo SDK versions.

```bash
npx expo install babel-plugin-react-compiler
```

```bash
npx expo install babel-plugin-react-compiler@beta react-compiler-runtime@beta
```

--------------------------------

### Start Recording to File

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/agent-browser/references/video-recording.md

Begins a new video recording session, saving the output to the specified file path. Ensure the directory exists if providing a path.

```bash
# Start recording to file
agent-browser record start ./output.webm
```

--------------------------------

### Install Dependencies with Legacy Flags

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/building-native-ui/references/webgpu-three.md

Use the legacy peer dependency flag to resolve installation conflicts.

```bash
npm install <packages> --legacy-peer-deps
```

--------------------------------

### Structure a Migration Section

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/competitor-alternatives/references/templates.md

Use this template to explain the switching process, including data transfer and support.

```markdown
## Switching from [Competitor]

### What transfers
- [Data type]: [How easily, any caveats]
- [Data type]: [How easily, any caveats]

### What needs reconfiguration
- [Thing]: [Why and effort level]
- [Thing]: [Why and effort level]

### Migration support

We offer [migration support details]:
- [Free data import tool / white-glove migration]
- [Documentation / migration guide]
- [Timeline expectation]
- [Support during transition]

### What customers say about switching

> "[Quote from customer who switched]"
> — [Name], [Role] at [Company]
```

--------------------------------

### Tree Shaking Verification Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-tree-shaking.md

Example code to verify that unused exports are removed from the final bundle.

```tsx
// test-treeshake.js
export const usedFunction = () => 'used';
export const unusedFunction = () => 'unused'; // Should be removed

// app.js
import { usedFunction } from './test-treeshake';
```

--------------------------------

### Fluent API Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/spatie-package-skeleton/SKILL.md

Demonstrates a fluent or chainable API pattern for building objects. This allows for natural chaining of configuration calls.

```php
Pdf::view('invoice', $data)->format('a4')->landscape()->save('invoice.pdf');
```

--------------------------------

### Detect Cold Start on Android

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/native-measure-tti.md

Detect a cold start in an Android application by observing the activity lifecycle and checking if the first post-enqueue is immediately followed by activity creation. This method helps differentiate cold starts from other launch types.

```kotlin
class MainApplication : Application() {
    var isColdStart = false
    
    override fun onCreate() {
        super.onCreate()
        
        var firstPostEnqueued = true
        Handler().post { firstPostEnqueued = false }
        
        registerActivityLifecycleCallbacks(object : ActivityLifecycleCallbacks {
            override fun onActivityCreated(activity: Activity, savedInstanceState: Bundle?) {
                unregisterActivityLifecycleCallbacks(this)
                if (firstPostEnqueued && savedInstanceState == null) {
                    isColdStart = true
                }
            }
            // ... other callbacks
        })
    }
}
```

--------------------------------

### Install Import Cost Extension

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-library-size.md

Command to install the Import Cost VS Code extension via CLI.

```bash
code --install-extension wix.vscode-import-cost
```

--------------------------------

### Install ESLint Plugin for React Native

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-react-compiler.md

Command to install the ESLint hooks plugin for standard React Native projects.

```bash
npm install -D eslint-plugin-react-hooks@latest
```

--------------------------------

### HowTo Schema Markup

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/schema-markup/references/schema-examples.md

For instructional content and tutorials. Break down the process into distinct steps with associated URLs.

```json
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Add Schema Markup to Your Website",
  "description": "A step-by-step guide to implementing JSON-LD schema",
  "totalTime": "PT15M",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Choose your schema type",
      "text": "Identify the appropriate schema type for your page content...",
      "url": "https://example.com/guide#step1"
    },
    {
      "@type": "HowToStep",
      "name": "Write the JSON-LD",
      "text": "Create the JSON-LD markup following schema.org specifications...",
      "url": "https://example.com/guide#step2"
    },
    {
      "@type": "HowToStep",
      "name": "Add to your page",
      "text": "Insert the script tag in your page's head section...",
      "url": "https://example.com/guide#step3"
    }
  ]
}
```

--------------------------------

### Start Basic Browser Recording

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/agent-browser/references/video-recording.md

Initiates a video recording of browser automation. Specify the output filename for the WebM video.

```bash
# Start recording
agent-browser record start ./demo.webm
```

--------------------------------

### Quick Start iOS Simulator Automation

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/ios-simulator-skill/SKILL.md

A sequence of commands to verify the environment, launch an application, map the screen, and perform basic interactions.

```bash
# 1. Check environment
bash scripts/sim_health_check.sh

# 2. Launch app
python scripts/app_launcher.py --launch com.example.app

# 3. Map screen to see elements
python scripts/screen_mapper.py

# 4. Tap button
python scripts/navigator.py --find-text "Login" --tap

# 5. Enter text
python scripts/navigator.py --find-type TextField --enter-text "user@example.com"
```

--------------------------------

### Compress Images with Sharp

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-native-assets.md

Use the sharp CLI to optimize image quality and reduce file size before bundling.

```bash
npx sharp-cli input.jpg -o output.jpg --quality 80
```

--------------------------------

### Detect Cold Start on iOS

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/native-measure-tti.md

Determine if the application is launching from a cold start on iOS. This check is based on the environment variable 'ActivePrewarm'.

```swift
let isColdStart = ProcessInfo.processInfo.environment["ActivePrewarm"] != "1"
```

--------------------------------

### Initialize Re.Pack

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-code-splitting.md

Install and initialize Re.Pack to replace Metro as the bundler. This command sets up the necessary configurations for using Re.Pack.

```bash
npx @callstack/repack-init
```

--------------------------------

### POST create-project

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/flare/references/commands.md

Creates a new project with the specified configuration.

```APIDOC
## POST create-project

### Description
Create a new project.

### Method
POST

### Endpoint
flare create-project

### Parameters
#### Request Body
- **name** (string) - Required - Project name
- **team_id** (integer) - Required - Team ID to own the project
- **stage** (string) - Required - local, development, staging, production
- **technology** (string) - Required - Laravel, PHP, JS, Vue, React
- **group** (string) - Optional - Project group name
```

--------------------------------

### Install and Configure ESLint Plugin for No Barrel Files

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-barrel-exports.md

Instructions to install the `eslint-plugin-no-barrel-files` and configure ESLint to enforce the avoidance of barrel files in the project.

```bash
npm install -D eslint-plugin-no-barrel-files
```

```javascript
// eslint.config.js
import noBarrelFiles from 'eslint-plugin-no-barrel-files';

export default [
  {
    plugins: { 'no-barrel-files': noBarrelFiles },
    rules: {
      'no-barrel-files/no-barrel-files': 'error',
    },
  },
];
```

--------------------------------

### Configuration

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/typefully/SKILL.md

Commands for setting up the CLI and managing configuration settings.

```APIDOC
## setup

### Description
Configure the CLI environment.

### Parameters
#### Query Parameters
- **--key** (string) - Optional - API key.
- **--location** (string) - Optional - Storage location (global or local).
- **--default-social-set** (string) - Optional - Set the default social set ID.
- **--no-default** (boolean) - Optional - Skip default social set selection.
```

--------------------------------

### Install and Use Specific Node.js Version with FNM

Source: https://github.com/freekmurze/dotfiles/blob/main/README.md

Install a specific Node.js version (e.g., 20) using FNM and switch to using it.

```bash
fnm install 20
```

```bash
fnm use 20
```

--------------------------------

### Use Native Stack Navigator

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/native-sdks-over-polyfills.md

Switch to native stack navigation for better performance and platform-specific UI.

```bash
npm install @react-navigation/native-stack react-native-screens
```

```tsx
// BEFORE: JS-based stack (more flexible, less native)
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

// AFTER: Native stack (native feel, better performance)
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

// Usage is nearly identical
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
```

--------------------------------

### GTM Naming Conventions Examples

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/analytics-tracking/references/gtm-implementation.md

Examples of recommended naming conventions for Tags, Triggers, and Variables in Google Tag Manager for consistency and clarity.

```plaintext
[Type] - [Description] - [Detail]

Tags:
GA4 - Event - Signup Completed
GA4 - Config - Base Configuration
FB - Pixel - Page View
HTML - LiveChat Widget

Triggers:
Click - CTA Button
Submit - Contact Form
View - Pricing Page
Custom - signup_completed

Variables:
DL - user_id
JS - Current Timestamp
LT - Campaign Source Map
```

--------------------------------

### Quick Reference Workflow

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/convert-github-issue-to-discussion/SKILL.md

A consolidated sequence of commands for performing the conversion process.

```bash
# Open issue page with visible browser
agent-browser open "https://github.com/owner/repo/issues/123" --headed

# Wait for user to log in, then get elements
agent-browser snapshot -i

# Click convert button (ref from snapshot)
agent-browser click @e137

# Wait for dialog, get new elements
agent-browser wait 1000 && agent-browser snapshot -i

# Select category and confirm
agent-browser select @e2 "Q&A"
agent-browser click @e9

# Verify - should redirect to discussions
agent-browser wait 2000 && agent-browser get url
```

--------------------------------

### Install Node Modules

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-components/SKILL.md

Run this command in your project's root directory to install necessary dependencies if 'node_modules' is missing. This enables validation tools.

```bash
npm install
```

--------------------------------

### Quick start browser automation

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/agent-browser/SKILL.md

Basic sequence for opening a page, identifying interactive elements, and performing actions.

```bash
agent-browser open <url>        # Navigate to page
agent-browser snapshot -i       # Get interactive elements with refs
agent-browser click @e1         # Click element by ref
agent-browser fill @e2 "text"   # Fill input by ref
agent-browser close             # Close browser
```

--------------------------------

### Barrel File Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/bundle-barrel-exports.md

An example of a barrel file (`index.ts`) exporting multiple components. Usage of this barrel file results in all exported components being bundled.

```tsx
// components/index.ts (barrel file)
export { Button } from './Button';
export { Card } from './Card';
export { Modal } from './Modal';
export { Sidebar } from './Sidebar';

// Usage (barrel import)
import { Button } from './components';
```

--------------------------------

### Initialize and Play Video with expo-video

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/building-native-ui/references/media.md

Use `expo-video` for video playback. Initialize the player with a source and configure playback options like looping and auto-play. Requires `expo-video` and `expo` packages.

```tsx
import { useVideoPlayer, VideoView } from 'expo-video';
import { useEvent } from 'expo';

const videoSource = 'https://example.com/video.mp4';

const player = useVideoPlayer(videoSource, player => {
  player.loop = true;
  player.play();
});

const { isPlaying } = useEvent(player, 'playingChange', { isPlaying: player.playing });

<VideoView player={player} fullscreenOptions={{}} allowsPictureInPicture />
```

--------------------------------

### Create Project via CLI

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/flare/SKILL.md

Create a new project using the Flare CLI. This is the first step in setting up error monitoring for a new application.

```bash
flare create-project --name="My New App"
```

--------------------------------

### Basic PDF Cropping Setup

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/pdf/reference.md

Initializes a PdfReader and PdfWriter for performing PDF operations, specifically demonstrating the setup for advanced PDF cropping. Requires pypdf.

```python
from pypdf import PdfWriter, PdfReader

reader = PdfReader("input.pdf")
writer = PdfWriter()
```

--------------------------------

### Quick Reference Commands

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/fix-github-issue/SKILL.md

A collection of common commands for viewing issues, creating branches, committing changes, creating pull requests, and monitoring CI checks.

```bash
# View issue
gh issue view 123

# Create branch
git checkout -b fix/issue-123-description

# After fixing and tests pass
git add -A && git commit -m "Fix #123: description"
git push -u origin fix/issue-123-description
gh pr create --fill

# Watch CI
gh pr checks --watch
```

--------------------------------

### Full Migration Example: Controlled Search Input

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/react-native-best-practices/references/js-uncontrolled-components.md

An example of a controlled search input component before migration. It uses the `value` prop, which can lead to performance issues.

```jsx
const SearchInput = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const handleChange = (text) => {
    setQuery(text);
    fetchResults(text).then(setResults);
  };
  
  return (
    <View>
      <TextInput
        value={query}              // Remove this
        onChangeText={handleChange}
        placeholder="Search..."
      />
      <ResultsList data={results} />
    </View>
  );
};
```

--------------------------------

### Install WebGPU & Three.js Dependencies

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/building-native-ui/references/webgpu-three.md

Installs the necessary packages for WebGPU and Three.js integration. The `--legacy-peer-deps` flag may be required for compatibility with certain Expo versions.

```bash
npm install react-native-wgpu@^0.4.1 three@0.172.0 @react-three/fiber@^9.4.0 wgpu-matrix@^3.0.2 @types/three@0.172.0 --legacy-peer-deps
```

--------------------------------

### Basic Usage of NativeTabs

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/building-native-ui/references/tabs.md

Demonstrates how to set up NativeTabs with triggers, labels, icons, and badges for a tab-based navigation layout.

```APIDOC
## Basic Usage of NativeTabs

### Description
This example shows the fundamental setup for `NativeTabs` in Expo Router, including how to define navigation triggers, labels, icons (using SF Symbols), and badges.

### Method
N/A (Component Setup)

### Endpoint
N/A (Component Setup)

### Parameters
N/A (Component Setup)

### Request Example
```tsx
import {
  NativeTabs,
  Icon,
  Label,
  Badge,
} from "expo-router/unstable-native-tabs";

export default function TabLayout() {
  return (
    <NativeTabs minimizeBehavior="onScrollDown">
      <NativeTabs.Trigger name="index">
        <Label>Home</Label>
        <Icon sf="house.fill" />
        <Badge>9+</Badge>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="settings">
        <Icon sf="gear" />
        <Label>Settings</Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="(search)" role="search">
        <Label>Search</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}
```

### Response
N/A (Component Setup)
```

--------------------------------

### API Routing Examples

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/laravel-php-guidelines.md

Use plural resource names and kebab-case for API endpoints, keeping nesting shallow.

```text
/error-occurrences/1
/errors/1/occurrences
```

--------------------------------

### Incorrect Hydration Mismatch Example

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md

This example shows a common scenario that leads to hydration warnings because the date will differ between server and client rendering. Use `suppressHydrationWarning` to avoid this.

```tsx
function Timestamp() {
  return <span>{new Date().toLocaleString()}</span>
}
```

--------------------------------

### Complete Request Example with Modifiers

Source: https://github.com/freekmurze/dotfiles/blob/main/config/claude/skills/ray-skill/SKILL.md

Send a green, labeled log message using a cURL request. This example demonstrates combining log, color, and label payloads.

```bash
curl -X POST http://localhost:23517/ \
  -H "Content-Type: application/json" \
  -H "User-Agent: Ray 1.0" \
  -d '{ \
    "uuid": "my-unique-id-123", \
    "payloads": [ \
      { \
        "type": "log", \
        "content": { \
          "values": ["User logged in", {"user_id": 42, "name": "John"}] \
        }, \
        "origin": { \
          "file": "/app/AuthController.php", \
          "line_number": 55, \
          "hostname": "dev-server" \
        } \
      }, \
      { \
        "type": "color", \
        "content": { "color": "green" }, \
        "origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" } \
      }, \
      { \
        "type": "label", \
        "content": { "label": "Auth" }, \
        "origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" } \
      } \
    ], \
    "meta": { \
      "project_name": "my-app" \
    } \
  }'
```