Claude Skills¶

Claude Skills are modular commands that extend Claude Code's capabilities with specialized workflows for common development tasks.

Available Skills¶

Skill	Command	Description
PR Fix	`/pr-fix`	Address PR review comments, make fixes, reply, and resolve threads
Test	`/test`	Router for backend/frontend tests
Test Backend	`/test-backend`	Run Python tests with pytest
Test Frontend	`/test-frontend`	Run TypeScript tests with Vitest
Typecheck Python	`/typecheck-python`	Check typing and fix Python type errors with mypy
Solve Linear Ticket	`/solve-linear-ticket`	Implement Linear issues systematically with task tracking
Browse Playground	`/browse-playground`	Access preprod-ui via Chrome integration
Browse Demo Page	`/browse-demo-page`	Access widget demo page via Chrome integration
Browse Backoffice	`/browse-backoffice`	Access client-backoffice via Chrome integration
Vercel React Best Practices	(auto)	React/Next.js performance optimization guidelines

PR Fix¶

Automates addressing pull request review feedback: analyze comments, make fixes, reply to explain changes, resolve threads, and commit.

Usage:

/pr-fix          # Auto-detect PR from current branch
/pr-fix 123      # Use specific PR number

What it does:

Fetches unresolved review threads via GitHub GraphQL API
Analyzes and categorizes each comment (code change, docs, question, disagree)
Reads relevant files and makes fixes
Replies to each comment explaining what was changed
Resolves the thread
Creates a single commit with all fixes

Notes:

Does NOT push automatically - review changes before pushing
Asks for user confirmation on disagreements (never auto-resolves)
Requires gh CLI to be authenticated

Test¶

Router skill that delegates to test-backend or test-frontend.

Usage:

/test backend          # Run backend tests
/test frontend         # Run frontend tests
/test unit             # Run backend unit tests (auto-routes)
/test smoke            # Run backend smoke tests (auto-routes)
/test coverage         # Run frontend tests with coverage (auto-routes)
/test path/to/test.py  # Run specific backend test (auto-routes)

If no arguments provided, asks which to run.

Test Backend¶

Run Python tests with pytest, parse failures, fix issues, and verify resolution.

Usage:

/test-backend              # Run unit tests (default)
/test-backend unit         # Run unit tests
/test-backend integration  # Run integration tests
/test-backend smoke        # Run smoke tests
/test-backend evaluation   # Run evaluation tests
/test-backend all          # Run all tests (excludes evaluation)
/test-backend path/to/test.py  # Run specific file

What it does:

Runs appropriate pytest command (just test, just unit, just smoke, etc.)
Parses failures (test name, error type, traceback)
Categorizes issues (mock, import, type, assertion, async, fixture)
Applies fixes based on confidence level
Re-runs individual tests to verify
Runs full suite for final verification

Critical rules enforced:

Uses mocker fixture, NEVER unittest.mock
Never skips tests - fixes the issue instead
All async tests must have @pytest.mark.asyncio

Test Frontend¶

Run TypeScript tests with Vitest, parse failures, fix issues, and verify resolution.

Usage:

/test-frontend              # Run all tests
/test-frontend coverage     # Run with coverage
/test-frontend watch        # Watch mode
/test-frontend e2e          # E2E tests with Playwright
/test-frontend path/to/file.test.ts  # Run specific file

What it does:

Runs appropriate vitest command (just test, etc.)
Parses failures (test name, error type, traceback)
Categorizes issues (import, type, assertion, mock, async)
Applies fixes based on confidence level
Re-runs individual tests to verify

Critical rules enforced:

Uses logger from shared utils, NEVER console.log
Tests use Vitest, NOT Jest
Run tests from frontend/ directory

Typecheck Python¶

Run mypy type checking on Python files, parse errors, apply fixes, and verify resolution.

Auto-triggers when:

User mentions "mypy" or "type error"
User asks to fix typing issues
Mypy output is pasted showing errors

Usage:

/typecheck-python                     # Fix errors in recently edited files
/typecheck-python packages/ixchat     # Check a package
/typecheck-python path/to/file.py     # Check specific file

What it does:

Runs just mypy on target files
Parses and categorizes errors by type
Applies fixes based on confidence level:
High confidence: applies directly
Medium confidence: applies with explanation
Low confidence: asks user first
Re-runs mypy to verify fixes

Common fixes:

Missing Optional[] wrappers
Type narrowing with assert or if
Adding return type annotations
Import errors for known modules

Solve Linear Ticket¶

Systematically implement Linear issues by working through TODO subissues with structured task tracking.

Usage:

/solve-linear-ticket IX-1151          # Use issue identifier
/solve-linear-ticket https://linear.app/.../IX-1151  # Use full URL

What it does:

Fetches parent issue and all TODO subissues via Linear MCP
Creates hierarchical task structure with dependencies
For each subissue, executes 7 steps: fetch → analyze → impl → test → visual → commit → linear
Downloads attachments/images using linearis CLI
Commits changes with Linear issue reference
Updates Linear status to "In Review" and adds implementation comment
Creates summary of all completed work

Task hierarchy:

[IX-1151] Parent Issue (epic)
├── [IX-1151/IX-1152/fetch] Download attachments
├── [IX-1151/IX-1152/analyze] Analyze requirements
├── [IX-1151/IX-1152/impl] Implement changes
├── [IX-1151/IX-1152/test] Run tests
├── [IX-1151/IX-1152/visual] Visual verification
├── [IX-1151/IX-1152/commit] Commit changes
├── [IX-1151/IX-1152/linear] Update Linear status
└── [IX-1151/summary] Push and summarize

Requirements:

Linear MCP server configured
linearis CLI installed (for attachments)
gh CLI authenticated (for commits)

Browse Skills (Chrome Integration)¶

Three skills for accessing different UIs via Chrome integration. All require Claude launched with --chrome flag.

Browse Playground¶

Access preprod-ui for testing widget changes.

/browse-playground                 # Open localhost:3001
/browse-playground /ai-sections-test  # Navigate to specific page
/browse-playground chat "Hello"    # Type in chat widget
/browse-playground screenshot      # Take screenshot

Port: 3001 | Start: cd frontend/preprod-ui && just dev

Browse Demo Page¶

Access widget demo page for testing widget builds.

/browse-demo-page                  # Open localhost:8083/demo.html
/browse-demo-page rebuild          # Rebuild widget + demo, then refresh
/browse-demo-page rebuild-sections # Rebuild AI Sections only
/browse-demo-page screenshot       # Take screenshot

Port: 8083 | Start: cd frontend/widget && just dev

Rebuild commands:

Scenario	Command
Any code change	`just rebuild` (server stays running)
AI Sections only	`npx vite build --config vite.sections.config.ts`
Server not running	`just dev` (builds + starts server)

Browse Backoffice¶

Access client-backoffice for admin panel testing.

/browse-backoffice                 # Open localhost:3002
/browse-backoffice /sites          # Navigate to sites list
/browse-backoffice find "Edit"     # Find element on page
/browse-backoffice screenshot      # Take screenshot

Port: 3002 | Start: cd frontend/client-backoffice && just dev

Chrome Integration Prerequisites¶

Launch Claude with --chrome flag: claude --chrome
Install Claude Code Chrome extension
Have dev server running for the target UI
Be logged into Supabase in Chrome (for authenticated pages)

Vercel React Best Practices¶

Auto-triggered skill that provides React and Next.js performance optimization guidelines from Vercel Engineering.

Auto-triggers when:

Writing new React components or Next.js pages
Implementing data fetching
Reviewing code for performance issues
Refactoring React/Next.js code
Optimizing bundle size

Rule categories by priority:

Priority	Category	Impact
1	Eliminating Waterfalls	CRITICAL
2	Bundle Size Optimization	CRITICAL
3	Server-Side Performance	HIGH
4	Client-Side Data Fetching	MEDIUM-HIGH
5	Re-render Optimization	MEDIUM
6	Rendering Performance	MEDIUM
7	JavaScript Performance	LOW-MEDIUM
8	Advanced Patterns	LOW

Key rules:

async-parallel - Use Promise.all() for independent operations
bundle-barrel-imports - Import directly, avoid barrel files
bundle-dynamic-imports - Use next/dynamic for heavy components
server-cache-react - Use React.cache() for per-request deduplication
rerender-memo - Extract expensive work into memoized components

Adding New Skills¶

Skills are stored in .claude/skills/ directory. Each skill has a SKILL.md file with:

YAML frontmatter (name, description, allowed-tools)
Markdown instructions for the workflow

See the Prompt & Skill Workflow for more details on creating and managing skills.