AI Guide. Part 1: Fundamentals

AI Guide. Part 1: Fundamentals

Introduction

By 2025, it has become clear that AI assistants are no longer "toys" but full-fledged development tools. Along with this realization came the understanding that simply "asking ChatGPT to write a component" leads to bugs, technical debt, and loss of control.

This article is for developers who want to maximize AI's potential without drowning in the chaos of generated code. In this first part, we'll explore the fundamental principles of working with AI: how to properly manage context, build effective prompts, and utilize core capabilities of tools like Cursor and Claude Code.

Context is Everything

Getting poor AI results? The issue is probably context

The AI model doesn't see your entire project—it only sees what you've fed it in the current session. This is called the context window, measured in tokens.

What are tokens?
Simply put, they're pieces of text. 1000 tokens ≈ 600-800 words. Different models have different limits:

  • GPT-5: 200K tokens
  • Claude 4 Sonnet, Claude 4.5 Sonnet: 200K tokens
  • Gemini 2.5 Pro: 1M tokens

When context runs out, the model starts "forgetting" old instructions, repeating itself, or giving contradictory answers.

How to Manage Context

  • Be surgically precise
    Don't feed the AI your entire project. Use @mentions (in Cursor/Claude Code) or explicitly specify files:

@src/components/UserProfile.tsx — work only with this component

  • Use summarization
    For large files, first ask the AI to create a summary:

Read @docs/design-system.md and give a brief summary of the key component patterns

Then work with this digest instead of the full document.

  • Clear context regularly
    Claude Code has a /clear command — use it between tasks. In Cursor — create a new chat for each feature.
  • Structure context with files
    Create in your project

project-root/

├── .cursor          # AI Behavior

├── docs/

│   ├── architecture.md  # Project Architecture

│   ├── status.md        # Current Progress

│   └── technical.md     # Technical Standards

During work (especially before clearing context), ask the AI to document the current status in a file. After clearing context, you can always resume by writing something like:

@docs/status.md — continue from where we left off with the checkout flow

Advanced Prompting

Core Principles

  • Specificity > everything else

❌ Optimize this component

✅ Memorize this component using React.memo.
Add useMemo for the filtered data array.
The component re-renders on every parent update but props rarely change.

  • Context before task (can be placed in cursorrules, CLAUDE.md etc)

You are a senior React developer working on a SaaS dashboard.
We use React 18, TypeScript, TanStack Query, and Tailwind CSS.
All components must have:

  • Proper TypeScript types for props
  • Error boundaries for error handling
  • Loading and error states
  • Accessible markup (ARIA labels)
  • Iterativity

Don't try to get perfect results from the first prompt. Break down tasks:

  1. Create the basic component structure
  2. Add data fetching with TanStack Query
  3. Implement filtering and sorting
  4. Add loading and error states
  5. Write tests

After completing a task, especially if you’re not sure about the result, it can be helpful to clear the context and in a new session ask the AI to evaluate the current implementation, identify weaknesses and improve it. This approach can be used multiple times in a row.

  • Format matters

Specify exactly what you want to see:

Return the result as:

  • Single .tsx file
  • Functional component with TypeScript
  • Props interface exported
  • TailwindCSS for styling (core utilities only)
  • JSDoc comments for complex logic only

Advanced techniques

Few-shot prompting
Show the AI examples of what you want:

Here's how I want my custom hooks to look:

 

interface UseCounterReturn {

 count: number;

 increment: () => void;

 decrement: () => void;

 reset: () => void;

}

 
export function useCounter(initialValue = 0): UseCounterReturn {

 const [count, setCount] = useState(initialValue);

  const increment = useCallback(() => setCount(c => c + 1), []);

 const decrement = useCallback(() => setCount(c => c - 1), []);

 const reset = useCallback(() => setCount(initialValue), [initialValue]);

 
 return { count, increment, decrement, reset };

}

Now create a similar hook for managing a toggle state.

Chain-of-thought
Ask the AI to "think aloud":

Before writing the code, explain step by step:

  1. What edge cases should be handled (empty states, loading, errors)
  2. What performance optimizations to add (memorization, lazy loading)
  3. How component re-renders will be managed

Then write the code.

Tools — Cursor, Claude Code, Codex CLI

Cursor: AI-Powered IDE

Basic commands:

  • Cmd+K (Ctrl+K) — inline edit of selected code
  • Cmd+L (Ctrl+L) — open AI chat
  • Cmd+I (Ctrl+I) — agent mode for complex tasks

Key features:

       1. cursor/rules/ — modern configuration approach

It's now recommended to use the .cursor/rules/ structure with .mdc files instead of the old .cursorrules. This allows modular organization of rules by categories.

Structure:

.cursor/

├── rules/

│   ├── base.mdc       # Project-Wide Rules

│   ├── components.mdc # Component rules

│   ├── typescript.mdc # TypeScript conventions

│   └── testing.mdc    # Testing guidelines

Example of .cursor/rules/base.mdc:

---

name: "React TypeScript Base Rules"
description: "Core conventions for the project"
globs: ["src/**/*.{ts,tsx}"]

---

You are working on a React 19 + TypeScript project.

Tech Stack:

  • React 18 with functional components
  • TypeScript (strict mode)
  • TanStack Query for server state
  • Zustand for client state
  • Tailwind CSS for styling

 Code Style - Always:

  • Use functional components with hooks
  • Export TypeScript interfaces at the top of files
  • Use const for immutable values
  • Prefer named exports over default exports
  • Keep files under 250 lines

 Code Style - Never:

  • Don't use class components
  • Don't use 'any' type (use 'unknown' if needed)
  • Don't add console.log in production code
  • Don't create inline styles

How Cursor Uses These Rules:

  • Cursor automatically reads all .mdc files from .cursor/rules/
  • Rules are applied based on glob patterns
  • You can explicitly include a rule via @base.mdc in your prompt
  • Priority: explicit → glob pattern → base user rules

Legacy support: The old .cursorrules file still works, but migrating to the new structure is recommended for:

  • Better organization (separate files for different purposes)
  • Conditional application (via globs)
  • Rule reuse across projects

        2. .cursorignore

Exclude unnecessary files from indexing (saves tokens):

node_modules/
.git/
dist/
build/
*.log

Claude Code: CLI Agent for Terminal

Quick start:

# Installation

npm install -g @anthropic-ai/claude-code

# Launch

claude

Key features:

  • /clear between tasks
    Always clear context between different features:
    /clear
  • Markdown checklists for large tasks

For migrations or bulk changes:

Create a checklist.md with all TypeScript errors from the build output.
Then fix them one by one, checking off each in the checklist.

  • Custom slash commands

Create .claude/commands/ in your project:

# .claude/commands/fix-issue.md

Analyze and fix the GitHub issue: $ARGUMENTS.

Steps:

  1. Use `gh issue view` to get details
  2. Find relevant React components in codebase
  3. Implement fix with TypeScript
  4. Add tests with Vitest
  5. Create PR with `gh pr create`

Use:

/fix-issue 123

  • MCP integration

Claude Code can work with MCP servers. GitHub example:

claude mcp add github \
 -e GITHUB_TOKEN=your-token \
 -- npx @modelcontextprotocol/server-github

Now AI can read issues/PRs itself:

 Analyze issue #42, create a fix in the UserDashboard component, and submit a PR

Codex CLI: OpenAI in Terminal

Installation:

# npm

npm install -g @openai/codex

# brew 

brew install codex

# launch

codex

Operation modes:

  • --suggest — suggestions only
  • --auto-edit — automatically applies changes with confirmation
  • --full-auto — full autonomy (use with caution!)

Workflow example:

# Bug Analysis & Fixing

codex --suggest "fix the infinite re-render loop in UserProfile component"

# Code Refactoring

codex --auto-edit "refactor to use custom hook for data fetching"

# Test Generation

codex "generate unit tests for the shopping cart feature"

Wrapping Up

We've covered the foundation for effective AI collaboration:

  • Understanding context and managing it effectively
  • A toolkit of prompting techniques
  • Basic setup of Cursor, Claude Code, and Codex CLI

This is sufficient for most daily tasks. But there are ways to get even more value! In Part 2, we'll dive into advanced tools: configuring MCP to connect AI to external services, learning token economy, exploring security best practices, and clarifying when it's better not to use AI at all.