### Clone and Install Repository

Source: https://github.com/tartinerlabs/skills/blob/main/CONTRIBUTING.md

Initial setup commands to clone the repository and install necessary dependencies including Husky hooks.

```sh
git clone https://github.com/<your-username>/skills.git
cd skills
```

```sh
pnpm install
```

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

### Setup project tooling with /setup

Source: https://context7.com/tartinerlabs/skills/llms.txt

Commands and configuration files generated by the setup skill.

```bash
/setup
```

```bash
pnpm add -D @biomejs/biome
pnpm biome init

pnpm add -D husky
pnpm exec husky init

pnpm add -D @commitlint/cli @commitlint/config-conventional

pnpm add -D lint-staged
```

```bash
#!/bin/sh
gitleaks protect --staged --verbose
pnpm exec lint-staged
```

```bash
#!/bin/sh
pnpm exec commitlint --edit $1
```

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

### Install Skills via Context7

Source: https://github.com/tartinerlabs/skills/blob/main/README.md

Command to install skills using the Context7 tool.

```bash
pnpm dlx ctx7 skills install /tartinerlabs/skills --all --universal
```

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

### Install Skills via CLI

Source: https://github.com/tartinerlabs/skills/blob/main/CLAUDE.md

Commands for installing skills through various distribution channels.

```bash
claude plugin install tartinerlabs/skills
```

```bash
pnpm dlx skills add tartinerlabs/skills
```

```bash
pnpm dlx ctx7 skills install /tartinerlabs/skills --all --universal
```

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

### Install Skills via pnpm

Source: https://github.com/tartinerlabs/skills/blob/main/README.md

Commands to install all skills, a single skill, or specific subsets for workflows.

```bash
pnpm dlx skills add tartinerlabs/skills
```

```bash
pnpm dlx skills add tartinerlabs/skills/commit
```

```bash
# Git and GitHub workflow skills only
pnpm dlx skills add tartinerlabs/skills/commit
pnpm dlx skills add tartinerlabs/skills/create-branch
pnpm dlx skills add tartinerlabs/skills/create-pr
pnpm dlx skills add tartinerlabs/skills/github-issues

# Security-focused subset
pnpm dlx skills add tartinerlabs/skills/security
pnpm dlx skills add tartinerlabs/skills/commit
pnpm dlx skills add tartinerlabs/skills/setup
```

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

### Output Summary Example

Source: https://github.com/tartinerlabs/skills/blob/main/skills/deps/SKILL.md

This is an example of the summary output after supply chain hardening is complete, detailing applied, skipped, and manual steps required.

```markdown
## Supply Chain Hardening Complete

### Applied
- [list of rules applied with brief description]

### Skipped (already configured)
- [list of rules skipped with reason]

### Manual Steps Required
- [any post-setup steps, e.g. "Run `pnpm exec husky` to reinitialise git hooks"]
```

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

### Install lint-staged

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/lint-staged.md

Install the package as a development dependency using your preferred package manager.

```bash
<pm> add -D lint-staged
```

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

### Install GitLeaks using Homebrew

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/gitleaks.md

Use this command to install GitLeaks if you are using macOS and Homebrew.

```bash
brew install gitleaks
```

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

### Branch Naming Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/create-branch/rules/branch-naming.md

Common examples of valid branch names following the project conventions.

```text
feature/add-user-search
bugfix/login-redirect
docs/update-readme
chore/upgrade-dependencies
```

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

### Install Husky

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/husky.md

Initializes Husky in the project, creating the .husky directory and a default pre-commit hook.

```bash
npx husky init
```

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

### Plain Commit Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/commit/rules/message-format.md

Use these formats when no commitlint configuration is present.

```text
fix auth redirect for expired tokens
```

```text
add user search endpoint
```

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

### Install Commitlint CLI and Conventional Config

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/commitlint.md

Install the necessary packages using your package manager. This command adds them as development dependencies.

```bash
<pm> add -D @commitlint/cli @commitlint/config-conventional
```

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

### Configure Commitlint

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/commitlint.md

Create a commitlint configuration file. This example uses the conventional configuration.

```javascript
export default { extends: ["@commitlint/config-conventional"] };
```

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

### Install All Skills via CLI

Source: https://context7.com/tartinerlabs/skills/llms.txt

Use this command to install all available skills from the tartinerlabs/skills package using the skills.sh CLI.

```bash
pnpm dlx skills add tartinerlabs/skills
```

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

### Install TypeScript

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/typescript.md

Install TypeScript as a development dependency using your package manager.

```bash
<pm> add -D typescript
```

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

### Install semantic-release dependencies

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/semantic-release.md

Install the core semantic-release package along with changelog and git plugins as development dependencies.

```bash
<pm> add -D semantic-release @semantic-release/changelog @semantic-release/git
```

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

### Example GitHub Issue Creation

Source: https://context7.com/tartinerlabs/skills/llms.txt

An example of the 'gh issue create' command used by the /github-issues skill, demonstrating title, body with sections, and assignee.

```bash
gh issue create \
  --title "Login redirect fails for expired sessions" \
  --body "## Description
Users with expired sessions see a blank page instead of the login form.

## Steps to Reproduce
1. Login with valid credentials
2. Wait for session to expire (30 minutes)
3. Refresh the page

## Expected Behavior
Redirect to login page with appropriate message." \
  --assignee @me
```

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

### Run tests with /testing

Source: https://context7.com/tartinerlabs/skills/llms.txt

Commands to invoke the testing skill and examples of generated test files.

```bash
/testing
```

```bash
/testing src/utils/format.ts
```

```typescript
// src/utils/format.test.ts
describe('formatCurrency', () => {
  it('formats positive numbers with currency symbol', () => {
    // Arrange
    const amount = 1234.56;

    // Act
    const result = formatCurrency(amount);

    // Assert
    expect(result).toBe('$1,234.56');
  });

  it('handles zero', () => {
    expect(formatCurrency(0)).toBe('$0.00');
  });

  it('formats negative numbers with parentheses', () => {
    expect(formatCurrency(-100)).toBe('($100.00)');
  });
});
```

```bash
pnpm vitest run src/utils/format.test.ts
```

```typescript
// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';

describe('Button', () => {
  it('calls onClick when clicked', async () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    await userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledOnce();
  });
});
```

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

### Conventional Commit Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/commit/rules/message-format.md

Use these formats when commitlint is configured in the project.

```text
fix: handle auth redirect for expired tokens
```

```text
feat: add user search endpoint
```

```text
docs: update API usage examples
```

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

### Install Biome

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/biome.md

Use this command to add Biome as a development dependency to your project.

```bash
<pm> add -D @biomejs/biome
```

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

### Example GitHub Issue Query

Source: https://context7.com/tartinerlabs/skills/llms.txt

Example of querying open issues assigned to the current user using the 'gh issue list' command, as facilitated by the /github-issues skill.

```bash
# Query issues:
gh issue list --state open --assignee @me
```

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

### Example Branch Creation and Push

Source: https://context7.com/tartinerlabs/skills/llms.txt

Illustrates the git commands executed by the /create-branch skill for creating a new branch from main/master/HEAD and pushing it to origin.

```git
# Create branch from main/master/HEAD: git checkout -b feature/user-auth main
# Offer to push: git push -u origin feature/user-auth
```

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

### Install as Claude Code Plugin

Source: https://context7.com/tartinerlabs/skills/llms.txt

Installs the tartinerlabs/skills package as a plugin for Claude Code.

```bash
claude plugin install tartinerlabs/skills
```

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

### Install Single Skill via CLI

Source: https://context7.com/tartinerlabs/skills/llms.txt

Use this command to install a specific skill, such as the 'commit' skill, from the tartinerlabs/skills package.

```bash
pnpm dlx skills add tartinerlabs/skills/commit
```

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

### Example GitHub Pull Request Creation

Source: https://context7.com/tartinerlabs/skills/llms.txt

An example of the 'gh pr create' command executed by the /create-pr skill, including title, body generated from commits, and auto-assignment.

```bash
gh pr create \
  --title "Add user authentication endpoint" \
  --body "- Add JWT token validation middleware
- Create /auth/login and /auth/logout routes
- Add session management with Redis" \
  --assignee @me
```

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

### Example of Correct File Suffixes

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/file-suffixes.md

Demonstrates consistent use of suffixes for different file types like tests, types, and schemas.

```tree
src/
├── user.test.ts
├── auth.test.ts        # Consistent with project pattern
├── user.types.ts
├── user.schema.ts
└── date.utils.ts       # Domain-specific utility
```

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

### Commit Body Example

Source: https://github.com/tartinerlabs/skills/blob/main/skills/commit/rules/message-format.md

Include a body for non-trivial changes to explain the reasoning behind the commit.

```text
feat(payments): switch from Stripe v2 to v3 SDK

v2 is deprecated and loses security patches in Q3.
The new SDK uses a promise-based API and removes the
manual webhook signature workaround in utils/stripe.ts.

Closes #412
```

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

### Correct File Naming Structure

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/case-consistency.md

Example of file and directory naming that adheres to the kebab-case convention.

```text
src/
├── user-profile.tsx
├── use-auth.ts
├── api-client.ts
├── user.types.ts
└── my-component/
```

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

### Example Git Commit with Commitlint

Source: https://context7.com/tartinerlabs/skills/llms.txt

An example of a git commit message formatted according to conventional commit standards, as produced by the /commit skill when commitlint is configured.

```git
git commit -m "feat: add user authentication endpoint"
```

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

### Workflow with Minimal Permissions (Correct)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/permissions.md

This example demonstrates a workflow with a `permissions` block set to `contents: read`, adhering to the principle of least privilege. This is the recommended approach for securing workflows.

```yaml
name: CI
on: [push]

# Minimal permissions — only what's needed
permissions:
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
```

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

### Correct Export Naming Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/export-naming.md

Demonstrates the recommended naming conventions for various exported symbols.

```tsx
// user-profile.tsx
export function UserProfile() { ... }

// use-auth.ts
export function useAuth() { ... }

// api.constants.ts
export const MAX_RETRIES = 3
export const API_BASE_URL = '/api'

// user.types.ts
export type UserProfile = { ... }
```

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

### Example Git Commit without Commitlint

Source: https://context7.com/tartinerlabs/skills/llms.txt

An example of a plain git commit message, produced by the /commit skill when no commitlint configuration is detected.

```git
git commit -m "add user authentication endpoint"
```

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

### Implement secure authentication and JWT configurations

Source: https://github.com/tartinerlabs/skills/blob/main/skills/security/rules/auth-access-control.md

Examples of using middleware for authorization and enforcing strong JWT signing algorithms with expiration.

```ts
// Auth + authorisation middleware
app.get('/api/admin/users', authenticate, authorise('admin'), async (req, res) => {
  const users = await db.users.findMany();
  return res.json(users);
});

// Strong JWT config
jwt.sign(payload, process.env.JWT_SECRET, { algorithm: 'RS256', expiresIn: '1h' });
```

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

### Example GitHub Issue Comment

Source: https://context7.com/tartinerlabs/skills/llms.txt

Example of adding a comment to a specific GitHub issue using the 'gh issue comment' command, as supported by the /github-issues skill.

```bash
# Add comment:
gh issue comment 123 --body "Fixed in PR #456"
```

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

### Example of Incorrect File Suffixes

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/file-suffixes.md

Illustrates inconsistent suffix usage and missing separators, which can lead to confusion.

```tree
src/
├── user.test.ts        # Uses .test.ts
├── auth.spec.ts        # Uses .spec.ts — inconsistent
├── userTypes.ts        # No suffix separator
├── UserSchema.ts       # PascalCase + no suffix separator
└── helpers.ts          # Generic name, no role suffix
```

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

### Managing test setup and teardown

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/vitest-patterns.md

Use beforeEach and afterEach to reset or restore mocks, ensuring test isolation.

```ts
import { vi } from 'vitest';

beforeEach(() => {
  vi.clearAllMocks();
});

afterEach(() => {
  vi.restoreAllMocks();
});
```

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

### Define Package Grouping Rule

Source: https://github.com/tartinerlabs/skills/blob/main/skills/deps/rules/renovate.md

Example configuration for grouping related packages under a single name to prevent version skew.

```json
{
  "description": "Group @commitlint packages",
  "matchPackageNames": ["@commitlint/*"],
  "groupName": "commitlint"
}
```

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

### Avoid Catch-All Files

Source: https://github.com/tartinerlabs/skills/blob/main/skills/project-structure/rules/anti-patterns.md

Split generic utility files into domain-specific modules for better organization. Example shows refactoring a large `utils.ts` into `date.ts` and `currency.ts`.

```plaintext
# Bad
src/utils.ts          # 500 lines of unrelated helpers

# Good
src/lib/date.ts       # Date formatting utilities
src/lib/currency.ts   # Currency formatting utilities
```

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

### Correct Action Pinning (Version Tag for GitHub-Owned, SHA for Third-Party)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/action-pinning.md

This example demonstrates the correct way to pin actions. GitHub-owned actions can use version tags, while third-party actions must be pinned to a full commit SHA with a version comment for clarity.

```yaml
# GitHub-owned — version tags are fine
- uses: actions/checkout@v4
- uses: actions/setup-node@v4

# Third-party — pinned to full commit SHA with version comment
- uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673  # v5.0.7
- uses: JamesIves/github-pages-deploy-action@6c2391ed697a5e80688e3b2d0e42e74bac79deed  # v4.7.3
```

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

### Monorepo Directory Structure

Source: https://github.com/tartinerlabs/skills/blob/main/skills/project-structure/rules/feature-based.md

Separate applications and shared domain-based libraries in a monorepo setup.

```text
apps/           # Applications
├── web/
├── api/
packages/       # Shared libraries (by domain, not language)
├── types/
├── utils/
└── ui/
```

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

### Incorrect File Naming Structure

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/case-consistency.md

Example of file and directory naming that violates the kebab-case convention.

```text
src/
├── UserProfile.tsx
├── useAuth.ts
├── APIClient.ts
├── userTypes.ts
└── MyComponent/
```

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

### Identify insecure authentication and JWT configurations

Source: https://github.com/tartinerlabs/skills/blob/main/skills/security/rules/auth-access-control.md

Examples of missing middleware on protected routes and weak JWT signing configurations.

```ts
// No auth check on sensitive endpoint
app.get('/api/admin/users', async (req, res) => {
  const users = await db.users.findMany();
  return res.json(users);
});

// Weak JWT config
jwt.sign(payload, 'secret', { algorithm: 'HS256' });
```

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

### Workflow with Per-Job Permissions

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/permissions.md

This example illustrates how to define permissions at both the workflow and job levels. The `release` job is granted `contents: write` access, while other jobs inherit the default `contents: read`.

```yaml
permissions:
  contents: read  # default for all jobs

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

  release:
    permissions:
      contents: write  # only this job needs write
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
```

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

### Acceptable Snapshot Use

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Snapshots are suitable for non-UI serialised output like configuration objects. This example uses toMatchInlineSnapshot for a config object.

```ts
it('should generate the expected config', () => {
  expect(buildConfig({ env: 'production' })).toMatchInlineSnapshot(`
    {
      "minify": true,
      "sourcemap": false,
    }
  `);
});
```

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

### Correct: Segregated Read and Write Repository Interfaces

Source: https://github.com/tartinerlabs/skills/blob/main/skills/refactor/rules/design-interface-segregation.md

This example demonstrates the correct application of the Interface Segregation Principle by splitting the large repository interface into smaller, focused interfaces for read and write operations. This allows implementers to choose which specific functionalities they need to provide.

```typescript
interface ReadRepository {
  find(id: string): Promise<Entity>;
  findAll(): Promise<Entity[]>;
}
```

```typescript
interface WriteRepository {
  create(data: CreateDTO): Promise<Entity>;
  update(id: string, data: UpdateDTO): Promise<Entity>;
  delete(id: string): Promise<void>;
}
```

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

### Test Behavior, Not Implementation (Correct)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Focus on the observable outcome of the function. This example tests the submission result for missing name.

```ts
it('should reject submission with missing name', () => {
  const result = form.submit({ name: '' });
  expect(result.error).toBe('Name is required');
});
```

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

### Mocking Third-Party Dependencies (Correct)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Wrap third-party dependencies in your own interface and mock the wrapper. This example demonstrates mocking a custom 'apiClient'.

```ts
// api-client.ts — your wrapper
export const apiClient = {
  getUser: (id: string) => axios.get(`/users/${id}`).then((r) => r.data),
};

// user-service.test.ts — mock your wrapper
vi.mock('./api-client', () => ({
  apiClient: { getUser: vi.fn() },
}));
```

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

### Sequential CI Job Execution

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/matrix.md

An example of a sequential workflow where tasks run one after another, increasing total execution time.

```yaml
# Sequential — slow, waits for each step to finish before starting the next
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm check
      - run: pnpm test
      - run: pnpm build
```

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

### UI Rendering Snapshot (Incorrect)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Avoid using snapshots for UI rendering as they are brittle. This example incorrectly uses toMatchSnapshot for UI output.

```tsx
it('should render correctly', () => {
  const { container } = render(<UserCard name="Alice" />);
  expect(container).toMatchSnapshot();
});
```

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

### Package Manager Audit Commands

Source: https://github.com/tartinerlabs/skills/blob/main/skills/deps/rules/audit-workflow.md

These commands are used to install dependencies and audit them for vulnerabilities, with variations for different package managers. Note that 'bun audit' does not support a severity flag.

```bash
pnpm install --frozen-lockfile
pnpm audit --audit-level=high
```

```bash
npm ci
npm audit --audit-level=high
```

```bash
yarn install --frozen-lockfile
yarn audit --severity high
```

```bash
bun install --frozen-lockfile
bun audit
```

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

### GitHub Actions Audit Workflow

Source: https://github.com/tartinerlabs/skills/blob/main/skills/deps/rules/audit-workflow.md

This workflow runs dependency audits on pull requests and weekly. It checks out code, sets up Node.js, installs dependencies, and runs the audit command. Ensure actions versions match your project's standards.

```yaml
name: Audit

on:
  pull_request:
    branches:
      - main
  schedule:
    - cron: "0 1 * * 1"

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

permissions:
  contents: read

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - run: <pm> install --frozen-lockfile

      - run: <pm> audit --audit-level=high

```

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

### Correct Issue Title Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-issues/rules/issue-title.md

Examples of preferred issue titles using natural and descriptive language.

```text
Add dark mode support
Login redirect fails after token expiry
Update React and TypeScript dependencies
```

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

### Incorrect Issue Title Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-issues/rules/issue-title.md

Examples of issue titles that use conventional commit prefixes, which are discouraged.

```text
feat: add dark mode support
fix: broken login redirect
chore: update dependencies
```

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

### Set Up Husky Commit-Msg Hook

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/commitlint.md

Create a commit-msg hook file in your .husky directory. This script runs commitlint on the commit message.

```bash
npx --no -- commitlint --edit $1
```

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

### Mocking with vi utilities

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/vitest-patterns.md

Use vi.fn() for standalone mocks, vi.spyOn() for existing methods, and vi.mock() for module-level mocking.

```ts
import { vi } from 'vitest';

// Standalone mock
const onClick = vi.fn();

// Spy on an existing method
vi.spyOn(console, 'error').mockImplementation(() => {});

// Module mock
vi.mock('./api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ id: '1', name: 'Alice' }),
}));
```

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

### Configure Node.js Caching in GitHub Actions

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/caching.md

Compare incorrect and correct configurations for caching Node.js dependencies using setup-node.

```yaml
# No caching — downloads all dependencies every run
- uses: actions/setup-node@v4
  with:
    node-version: 'lts/*'
- run: pnpm install --frozen-lockfile
```

```yaml
# Caching enabled — reuses dependencies across runs
- uses: actions/setup-node@v4
  with:
    node-version: 'lts/*'
    cache: 'pnpm'
- run: pnpm install --frozen-lockfile
```

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

### Incorrect Desktop-First Responsive Implementation

Source: https://github.com/tartinerlabs/skills/blob/main/skills/tailwind/rules/mobile-first.md

Avoid this pattern as it defines styles for larger screens first and attempts to override them for smaller ones.

```tsx
<!-- Desktop-first — shrinking down -->
<div className="text-2xl md:text-xl sm:text-lg">
<div className="grid-cols-4 md:grid-cols-2 sm:grid-cols-1">
```

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

### Correct Mobile-First Responsive Implementation

Source: https://github.com/tartinerlabs/skills/blob/main/skills/tailwind/rules/mobile-first.md

Use this pattern to define base mobile styles and apply responsive prefixes to scale up for larger viewports.

```tsx
<!-- Mobile-first — scaling up -->
<div className="text-lg md:text-xl lg:text-2xl">
<div className="grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
```

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

### Refactor Tailwind CSS classes

Source: https://context7.com/tartinerlabs/skills/llms.txt

Examples of common Tailwind CSS refactoring patterns for spacing and dimensions.

```jsx
<div className="h-10 w-10">
```

```jsx
<div className="size-10">
```

```jsx
<div className="mt-4">
```

```jsx
<div className="mb-4">
```

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

### Correct Dependency Version Pinning

Source: https://github.com/tartinerlabs/skills/blob/main/skills/deps/rules/version-pinning.md

This JSON snippet demonstrates correct dependency versioning by pinning to exact versions. This ensures reproducible builds and prevents unexpected updates.

```json
{
  "dependencies": {
    "express": "4.18.2",
    "lodash": "4.17.21"
  }
}
```

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

### Incorrect Export Naming Examples

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/export-naming.md

Illustrates common naming violations for components, hooks, constants, and types.

```tsx
// user-profile.tsx
export function userProfile() { ... }     // Should be PascalCase
export const User_Profile = () => { ... } // Snake_Case component

// use-auth.ts
export function UseAuth() { ... }         // Should be camelCase

// api.constants.ts
export const maxRetries = 3               // Should be UPPER_SNAKE_CASE
export const apiBaseUrl = '/api'           // Should be UPPER_SNAKE_CASE

// user.types.ts
export type userProfile = { ... }         // Should be PascalCase
```

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

### Configure Renovate with JSON

Source: https://github.com/tartinerlabs/skills/blob/main/skills/deps/rules/renovate.md

Defines the base Renovate configuration including pinning strategy, scheduling, and automated merge rules for development dependencies.

```json
{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"],
  "rangeStrategy": "pin",
  "schedule": ["before 9am on Monday"],
  "packageRules": [
    {
      "description": "Auto-merge patch updates for devDependencies",
      "matchDepTypes": ["devDependencies"],
      "matchUpdateTypes": ["patch"],
      "automerge": true
    }
  ],
  "lockFileMaintenance": {
    "enabled": true,
    "schedule": ["before 9am on the first day of the month"]
  }
}
```

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

### Incorrect Commit Message Example

Source: https://github.com/tartinerlabs/skills/blob/main/skills/commit/rules/message-format.md

Avoid overly long subject lines that exceed the 72-character limit.

```text
Updated the authentication flow to handle edge cases with expired tokens and added retry logic
```

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

### Migrate Prettier Configuration

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/biome.md

Use this command to migrate your Prettier configuration to Biome.

```bash
npx @biomejs/biome migrate prettier
```

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

### Test Behavior, Not Implementation (Incorrect)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Avoid testing internal methods. This example incorrectly spies on an internal '_validate' method.

```ts
it('should call the internal _validate method', () => {
  const spy = vi.spyOn(form, '_validate');
  form.submit({ name: 'Alice' });
  expect(spy).toHaveBeenCalled();
});
```

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

### Incorrect Barrel Re-export Patterns

Source: https://github.com/tartinerlabs/skills/blob/main/skills/refactor/rules/ts-barrel-reexports.md

Examples of barrel files that re-export multiple modules or perform trivial single-module re-exports.

```ts
// components/index.ts — re-exports from many modules
export * from "./button";
export * from "./input";
export * from "./modal";

// consumer
import { Button } from "./components";
```

```ts
// utils/index.ts — trivial single-module re-export
export * from "./format";
```

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

### Fetch user data using async/await

Source: https://github.com/tartinerlabs/skills/blob/main/skills/refactor/rules/ts-async-await.md

Demonstrates the preferred approach using async/await with try/catch blocks for error handling.

```typescript
async function fetchUser(id: string) {
  try {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    return transformUser(data);
  } catch (err) {
    handleError(err);
  }
}
```

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

### Correct Test Naming

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-structure.md

Use descriptive names for describe blocks (unit) and it blocks (expected behavior starting with 'should').

```typescript
describe('formatCurrency', () => {
  it('should format USD with two decimal places', () => { ... });
  it('should return "0.00" for zero input', () => { ... });
  it('should throw for negative amounts', () => { ... });
});
```

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

### Biome Configuration

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/biome.md

Create a biome.json file to configure Biome's behavior, including VCS integration, file handling, formatting, and linting rules.

```json
{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}
```

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

### Correct Direct Import Usage

Source: https://github.com/tartinerlabs/skills/blob/main/skills/naming-format/rules/index-files.md

Import components directly from their source files to optimize build performance and dependency tracking.

```ts
// Direct imports — no barrel file needed
import { Button } from '@/components/button'
import { Card } from '@/components/card'
```

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

### Fetch user data using .then() chains

Source: https://github.com/tartinerlabs/skills/blob/main/skills/refactor/rules/ts-async-await.md

Demonstrates the use of promise chaining for fetching and transforming user data.

```typescript
function fetchUser(id: string) {
  return fetch(`/api/users/${id}`)
    .then((res) => res.json())
    .then((data) => transformUser(data))
    .catch((err) => handleError(err));
}
```

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

### Correct usage of size-* utility classes

Source: https://github.com/tartinerlabs/skills/blob/main/skills/tailwind/rules/equal-dimensions.md

Use the size-* utility to define equal width and height in a single class.

```tsx
<div className="size-8">
<div className="size-12">
<div className="size-full">
<div className="size-6">
```

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

### Skipped Tests Without Justification (Incorrect)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Skipping tests with 'test.skip' or 'test.todo' without explanation is discouraged. These examples show incorrect usage.

```ts
it.skip('should handle concurrent requests', () => { ... });
it.todo('should retry on failure');
```

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

### Project Directory Structure for Layer-Based Grouping

Source: https://github.com/tartinerlabs/skills/blob/main/skills/project-structure/rules/layer-based.md

Standard directory layout for separating concerns in backend applications.

```text
src/
├── controllers/    # Request handling
├── services/       # Business logic
├── models/         # Data models
├── routes/         # Route definitions
├── middleware/      # Express/Fastify middleware
└── utils/          # Shared utilities
```

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

### Harden supply chain with /deps

Source: https://context7.com/tartinerlabs/skills/llms.txt

Configuration files for npm security, version pinning, and CI audit workflows.

```bash
/deps
```

```bash
# .npmrc
ignore-scripts=true
registry=https://registry.npmjs.org/
audit=true
fund=false
```

```json
{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"],
  "minimumReleaseAge": "3 days",
  "vulnerabilityAlerts": {
    "enabled": true
  }
}
```

```yaml
name: Audit
on:
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pnpm audit --audit-level=high
```

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

### Configure GitLeaks Pre-commit Hook

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/gitleaks.md

Add this command to your `.husky/pre-commit` file as the first command to enable staged secret detection before other hooks.

```bash
gitleaks protect --staged --verbose
```

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

### Correct PR Title Formats

Source: https://github.com/tartinerlabs/skills/blob/main/skills/create-pr/rules/pr-title.md

Examples of PR titles that adhere to the natural language and sentence case guidelines. These are clear, specific, and informative.

```text
Add user authentication
```

```text
Fix login timeout on expired sessions
```

```text
Update React and TypeScript dependencies
```

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

### Skipped Tests With Justification (Correct)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

When skipping tests, provide a clear comment explaining the reason and a tracking issue. This example shows justified skipping.

```ts
// TODO(#123): Flaky due to race condition in CI — investigate timing
it.skip('should handle concurrent requests', () => { ... });
```

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

### Incorrect PR Title Formats

Source: https://github.com/tartinerlabs/skills/blob/main/skills/create-pr/rules/pr-title.md

Examples of PR titles that do not follow the recommended natural language format. These often use conventional commit prefixes.

```text
feat: add user authentication
```

```text
fix: resolve login timeout
```

```text
chore: update dependencies
```

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

### Migrate ESLint Configuration

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/biome.md

Use this command to migrate your ESLint configuration to Biome.

```bash
npx @biomejs/biome migrate eslint
```

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

### UI Rendering Assertion (Correct)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Prefer asserting specific elements or text content for UI tests. This example checks for the presence of the user's name.

```tsx
it('should display the user name', () => {
  render(<UserCard name="Alice" />);
  expect(screen.getByText('Alice')).toBeInTheDocument();
});
```

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

### Using screen for queries

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/component-testing.md

Import and use the screen object directly instead of destructuring from render.

```tsx
import { render, screen } from '@testing-library/react';

render(<Header title="Dashboard" />);
expect(screen.getByRole('heading', { name: /dashboard/i })).toBeInTheDocument();
```

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

### Importing vi utilities

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/vitest-patterns.md

Import the vi object explicitly when utilizing mock utilities.

```ts
import { vi } from 'vitest';
```

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

### Mocking Third-Party Dependencies (Incorrect)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/rules/test-quality.md

Directly mocking external libraries like 'axios' can lead to brittle tests. This example shows an incorrect direct mock of axios.

```ts
vi.mock('axios', () => ({
  default: { get: vi.fn() },
}));
```

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

### Correct Direct Import Pattern

Source: https://github.com/tartinerlabs/skills/blob/main/skills/refactor/rules/ts-barrel-reexports.md

Recommended approach using direct imports from source modules to facilitate better tree-shaking.

```ts
// Import directly from the source module
import { Button } from "./components/button";
import { formatDate } from "./utils/format";
```

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

### Create Branch Linked to GitHub Issue

Source: https://context7.com/tartinerlabs/skills/llms.txt

Example of invoking the /create-branch skill with a GitHub issue number to create a linked branch. This uses 'gh issue develop' command.

```bash
# Create branch linked to GitHub issue (uses gh issue develop)
/create-branch 123
```

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

### Correct List Format

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-issues/rules/no-checklists.md

Use numbered lists for sequential steps to maintain clean documentation.

```markdown
## Steps
1. Review requirements
2. Implement solution
3. Add tests
```

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

### Insecure Coding Patterns for OWASP Vulnerabilities

Source: https://github.com/tartinerlabs/skills/blob/main/skills/security/rules/owasp-top-10.md

Examples of vulnerable code patterns including raw SQL queries, unsanitized HTML rendering, and unsafe shell command execution.

```typescript
// SQL injection
const user = await db.query(`SELECT * FROM users WHERE id = '${req.params.id}'`);

// XSS
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// Command injection
exec(`convert ${userFilename} output.png`);
```

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

### Configure semantic-release

Source: https://github.com/tartinerlabs/skills/blob/main/skills/setup/rules/semantic-release.md

Define the release configuration in release.config.js, specifying branches and the plugin pipeline.

```js
export default {
  branches: ["main"],
  plugins: [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    "@semantic-release/npm",
    ["@semantic-release/git", {
      assets: ["CHANGELOG.md", "package.json"],
      message: "chore(release): ${nextRelease.version}"
    }],
    "@semantic-release/github"
  ]
};
```

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

### Organize Monorepo Packages by Domain

Source: https://github.com/tartinerlabs/skills/blob/main/skills/project-structure/rules/anti-patterns.md

In monorepos, group packages by their functional domain rather than by programming language for better cohesion. Example shows domain-based grouping over language-based grouping.

```plaintext
# Bad
packages/typescript/
packages/go/

# Good
packages/auth/
packages/payments/
```

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

### Run Vitest Tests

Source: https://github.com/tartinerlabs/skills/blob/main/skills/testing/SKILL.md

Execute tests using the project's package manager. Use `vitest run <file>` to target a specific test file.

```bash
# Use the project's package manager
pnpm run test          # or npm/bun/yarn equivalent
pnpm vitest run <file> # run a specific test file
```

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

### Workflow without Permissions Block (Incorrect)

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/permissions.md

This example shows a workflow that omits the `permissions` block, resulting in default broad read/write access. Always declare explicit permissions.

```yaml
name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
```

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

### Audit Dependencies for Vulnerabilities

Source: https://github.com/tartinerlabs/skills/blob/main/skills/security/rules/insecure-dependencies.md

Run this command to check for known vulnerabilities in your project's dependencies. It supports npm, pnpm, yarn, and bun.

```bash
# npm
npm audit

# pnpm
pnpm audit

# yarn
yarn audit

# bun
bun audit
```

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

### Workflow With Concurrency Queuing

Source: https://github.com/tartinerlabs/skills/blob/main/skills/github-actions/rules/concurrency.md

This YAML configuration demonstrates a workflow where in-progress runs are queued instead of canceled. This is suitable for deployment workflows to production where sequential execution is desired.

```yaml
concurrency:
  group: deploy-production
  cancel-in-progress: false  # queue instead of cancel
```