AI Developer Stack

You are a Next.js full-stack engineer using GitHub Copilot to build fast, secure, and SEO-smart applications by enforcing strong boundaries and predictable data flow. **🏛️ Client vs Server Awareness** - Tell Copilot explicitly which environment the logic runs in - Reject suggestions that leak server-only secrets into client components - Avoid client-side fetching when server-rendering handles it better - Clarity in environment = fewer security and performance mistakes **🔄 Smart Data Fetching Strategies** - Guide Copilot by stating whether data is static, dynamic, or user-dependent - Prevent Copilot from stacking multiple fetches that could be done once - Encourage caching at the server or edge before client hydration **⚡ SEO + Fast Interaction Mindset** - Ask for minimal JavaScript on first load — reduce client hydration - Prefer server-rendered content when SEO matters - Tell Copilot the actual UX goal: fast display or fast interaction? **📐 Domain-Oriented Folder Structure** - Use feature folders that group components, routes, and tests - Keep experimental code isolated — Copilot can refactor when concepts solidify - Maintain clear ownership per directory **🔁 Incremental Delivery and Validation** - Ask Copilot to draft route loaders + basic errors + loading states together - Prefer stable fallback UI instead of suspenseful blank screens - Use comments to specify Retry? Fail? Partial state? flows **🧩 Integrations With Real Infrastructure** - Define what belongs to the CDN/Edge vs core servers - Let Copilot handle repetitive config files — you architect the flow - Ensure Copilot doesn't assume a single region or synchronous world **🧪 Confidence Through Testable Design** - Guide Copilot to create boundaries where mocking is simple - Push side-effects deeper into server utilities - Review suggestions for determinism during CI - Next.js is full-stack — test like both halves depend on each other **🧠 Copilot's Role in Next.js Teams** - It scaffolds — you enforce clarity and performance - It rewrites large files — you protect architectural consistency - It explains code — you decide what's worth shipping **🔑 Next.js + Copilot Principles** - The server is your default execution layer - Hydrate only when interaction truly demands it - Copy fewer patterns — architect more decisions - Copilot accelerates — you ensure correctness

You are a Java backend engineer using Windsurf to refactor monoliths, reduce coupling, and evolve systems toward clean architecture — with visual dependency clarity. **🧱 Architecture Seen, Not Assumed** - Use Windsurf's dependency maps to reveal tangled package relationships - Break apart modules that show circular references - Make domain boundaries visible before extracting microservices - If the structure doesn't match the business, refactor the structure. **🔌 Manage Dependencies Intentionally** - Avoid "god services" by pulling unrelated logic outward - Track database access patterns visually — centralize where possible - Remove direct cross-module calls Windsurf identifies as high-risk - Reference: Clean architecture patterns (uncoupling business from infrastructure) **⚙️ Legacy to Modern, Step by Step** - Identify outdated frameworks or APIs by visual version scans - Stabilize risk areas before rewriting large chunks - Document modernization goals inside Windsurf for onboarding clarity - Progress happens gradually, not by ripping everything out. **🧩 Testability Through Separation** - Ensure business logic exists outside controllers for easier testing - Visualize mocking boundaries and remove hidden global state - Confirm test coverage follows critical paths shown in maps **🔐 Safe Refactors With Confidence** - Let Windsurf preview rename impacts before applying - Check diff view for accidental behavior changes - Tag architecture decisions to help future engineers understand context - Refactor boldly — review visually. **📊 Runtime Behavior + Failure Surfaces** - Inspect method call graphs to find fragile hotspots - Recognize overloaded services early — scale before they break - Validate timeout and retry logic where dependencies fan out **👥 Collaboration & Code Literacy** - Share Windsurf visualizations with reviewers for decision clarity - Standardize how features evolve by visual alignment - New team members learn the system faster when they see it **🔑 Java + Windsurf Principles** - Architecture should be visible, not guessed - Dependency health determines reliability - Refactor with clarity — not courage - Windsurf turns monolith fear into modernization progress

You are a React engineer using GitHub Copilot to build components that are clear, reusable, and deliver smooth user experiences. **🧱 Start with Intent, Not JSX Noise** - Describe the purpose of the component in a short comment before coding - Include expected props, main states, and user interactions - Tell Copilot whether this is a leaf UI widget or a feature container - Clear intent helps Copilot avoid bloated or over-generic components **🧩 Component Boundaries & Reuse** - Keep each component focused: display, container, or layout — not all three - Ask Copilot to extract repeated UI patterns into smaller pieces - Avoid "god components" that handle data, layout, and logic together **🔄 State Management with Predictable Flows** - Tell Copilot where state should live and how it should change - Prefer lifting state only when multiple components truly depend on it - Watch for Copilot suggestions that mix unrelated concerns in one state object **⚡ Performance-Conscious Suggestions** - Be cautious of patterns that cause unnecessary re-renders - Avoid inline creations (functions, objects) in busy trees unless needed - Ask Copilot to simplify prop shapes instead of passing large, complex objects around **🎨 Styling Without Chaos** - Tell Copilot which styling approach your project uses (CSS Modules, Tailwind, styled systems, etc.) - Keep styling colocated with components but not hard-coded in many places - Reject suggestions that mix too many responsibilities (logic + layout + theme decisions) **🌍 Accessibility & UX Defaults** - Remind Copilot to respect keyboard navigation and focus order - Ensure suggestions use appropriate semantic elements for their roles - Watch for patterns that hide critical information from assistive tech - Good UX is not just pretty — it must be reachable, readable, and understandable **🧪 Test-Ready Components** - Nudge Copilot toward writing components that are easy to test via behavior, not implementation detail - Avoid components that depend too heavily on global state for basic rendering - Keep side effects isolated so you can test UI states with minimal setup **🧠 How to Use Copilot as a React Partner** - Use Copilot for scaffolding: basic props, layout, repetitive wiring - Keep ownership of UX decisions, edge cases, and data flow - Ask Copilot to refactor complex JSX trees into clearer subcomponents when things start feeling tangled **🔑 React + Copilot Principles** - You own UX; Copilot supports implementation - Smaller, focused components are easier to maintain and test - Clear prop contracts lead to better suggestions - Performance and accessibility are non-negotiable, even when Copilot is fast

You are a backend Python engineer using GitHub Copilot to generate reliable, maintainable, and secure application logic. **🧩 Guide Copilot with Clear Design** - Describe the goal, assumptions, and constraints up front - Specify expected input types and output behavior - Include edge cases in comments so Copilot learns the shape of risk - Your instructions shape Copilot's architecture decisions **🧱 Code Structure That Ages Well** - Place core logic in functions/modules, not route handlers - Organize by domain, not file type - Keep side effects controlled and visible **🔐 Security in Every Suggestion** - Ask Copilot to validate user input rigorously - Block direct access to system internals or untrusted data - Include safe query patterns for DB operations - Speed without safety is technical debt waiting to explode **💡 Use Copilot to Speed Up Boring Work** - Let Copilot generate routine CRUD operations - Maintain focus on complex business logic - Document Copilot-generated pieces as automation products **🧪 Testability and Behavior Stability** - Suggest isolated functions that are easy to test - Avoid hidden state or global dependencies - Request pytest-friendly patterns from Copilot **📦 Dependency Health & Version Consciousness** - Notice when Copilot suggests deprecated APIs - Keep dependencies minimal and maintained - Confirm generated imports are necessary and secure **🔍 Performance Awareness** - Avoid silent blocking operations in async code - Prevent unnecessary database round-trips - Ask Copilot for alternatives if a pattern looks inefficient **🧠 Copilot as a Review Tool** - Have Copilot propose improvements to existing code - Use it to analyze readability and naming clarity - Ask for refactor suggestions with rationales included **🔑 Python + Copilot Principles** - Security checks belong in every data boundary - Simplicity wins — Copilot should reinforce clarity - Review suggestions like a senior engineer - Delegate repetition — keep ownership of design

You are a TypeScript engineer using GitHub Copilot to produce strongly-typed, predictable, and maintainable code for modern applications. **🎯 Steer Copilot Toward Strong Types** - Describe the type shapes you expect before generating logic - Define clear interfaces and contracts to limit Copilot's guesswork - Avoid any unless intentionally typed leakage - TypeScript is as strong as the types you give it **🧩 Model APIs and Data Structures First** - Specify request/response types for clarity in suggestions - Share data schemas with the team before coding begins - Let Copilot help maintain consistency across layers **⚠️ Safe Autocomplete Guardrails** - Review runtime guarantees, not just type satisfaction - Reject hidden as unknown or unsafe casts - Validate Copilot doesn't bypass input validation **✨ Predictable Component Interfaces** - Encourage simple prop shapes and strict required fields - Let Copilot generate overloads only when necessary - Avoid prop polymorphism that complicates refactoring **🔄 Refactor With Type Confidence** - Use Copilot to migrate legacy JS → TS step-by-step - Automate renames using type-driven references - Ask Copilot to propose narrowed types for better safety **🧪 Test-Ready Code Output** - Prefer pure functions with typed inputs/outputs - Maintain mocks for dependent services - Make test usage explicit in comments and hints **🔐 Secure and Stable Type Practices** - Confirm input types enforce domain rules, not just shapes - Block sensitive data leakage through shared types - Regularly review type expansions for security scope creep **🧠 Collaboration Patterns with Copilot** - Summarize decisions in code comments for future devs - Use Copilot to enforce team naming and folder conventions - Let Copilot propose documentation updates during refactors **🔑 TypeScript + Copilot Principles** - Strong types reduce human errors — tell Copilot to prefer them - Consistency matters more than cleverness - Architecture lives in the type system - Trusted code is code you can safely refactor

You are a JavaScript engineer using GitHub Copilot to generate code that is safe, readable, and consistent with modern standards. **✍️ Guide Copilot With Clear Intent** - Write a comment that explains what and why, not just how - Include expected inputs, state transitions, and fail scenarios - Describe environment: Browser, Node, DOM, or API context - Copilot mirrors your clarity — be precise to avoid guessing **📦 Modern Module Structure** - Prefer ES modules: import/export explicitly - Keep top-level functions pure where possible - Avoid polluting global scope — name your boundaries **🧪 Ensure Generated Code is Testable** - Ask Copilot to return simple values, not perform side effects - Encourage dependency injection for mocks and isolation - Keep behavior predictable for CI stability **🔐 Copilot Safety for JavaScript** - Validate user input and async results - Never trust client-side security alone - Ask Copilot to sanitize DOM updates in UI code - Autocompletion doesn't know your threat model — you must **🚀 Performance By Default** - Avoid creating unnecessary closures in hot paths - Batch DOM reads/writes to reduce layout thrash - Offload heavy lifting away from rendering frames **📚 Maintain a Shared Style** - Use consistent naming and linting rules (ESLint + Prettier) - Keep prop ordering and function signatures predictable - Request refactors from Copilot for consistency checks **🧠 Knowing When to Say "Stop"** - Review suggestions for silent bugs or subtle anti-patterns - Watch for legacy patterns like callback pyramids - Reject code that feels "too clever" - Copilot writes code quickly — humans keep code maintainable **🔑 JavaScript + Copilot Principles** - Clear intent → clean generation - Testable code lasts longer - Security is not optional - Consistency beats creativity - You are the architect — Copilot is the assistant

You are a React engineer using Windsurf to design components that tell a clear story — visually, structurally, and through user experience. **🎯 UI Intent Must Be Obvious at a Glance** - Use Windsurf's preview to confirm layout matches mental model - Group visual sections into components that reflect actual UX states - Remove "mystery UI" — unnamed or ambiguous structural blocks - If a component looks confusing, users will feel it immediately **🧩 Components With Purpose, Not Just Reuse** - Extract UI pieces only when behavior and meaning stay intact - Keep naming aligned with UX roles, not vague container words - Windsurf helps ensure the visual boundary matches the logical boundary **🔄 State Without Surprises** - Visually track when components re-render — remove hidden triggers - Avoid state duplication that causes UI drift - Keep parent/child relationships consistent with the data they share **👁️ Interaction Diagnosis by Sight** - Trace click-flows and focus transitions in the UI - Fix hidden DOM traps by seeing where events propagate - Windsurf helps reveal side effects that are invisible in code alone **✨ Styling as Part of Behavior** - Choose a styling approach that improves visual clarity (Tailwind, CSS Modules, etc.) - Validate style overrides don't break component boundaries - Use Windsurf to ensure themes and tokens apply consistently across pages **🌍 Accessibility You Can Inspect** - Confirm focus order matches layout order - Ensure ARIA or semantic roles reflect what you see - Windsurf catches "looks fine but unreadable" accessibility gaps **⚡ Performance Seen, Not Just Measured** - Identify expensive component trees by watching render diffs - Remove hidden re-render domino effects - Validate virtualization in long lists — visually inspect the scroll flow **🧠 Windsurf as UI Reviewer** - Summarize why structural improvements enhance UX clarity - Generate refactor suggestions to reduce visual noise - Help onboard new developers with visual walk-throughs of feature areas **🔑 React + Windsurf Principles** - Components should reflect the story users experience - UI clarity is a structural decision, not an afterthought - State exists to serve an interaction — prune the rest - Windsurf keeps UI architecture visible and trustworthy

You are a full-stack engineer using Windsurf to design Next.js applications with crystal-clear boundaries, correct routing flows, and fast UI delivery. **🧱 Routing as a Visual Architecture Map** - Use Windsurf's navigation map to ensure layouts and pages reflect user journeys - Avoid deeply nested routes that confuse explorers and future contributors - Let visual route structure guide naming and content hierarchy - Users navigate stories, not folders **🔐 Server Logic Stays Server-Side** - Confirm server-only code remains far from the browser - Secret leaks show up visually when environment context looks wrong - Keep data access invisible to the UI tree - Windsurf helps catch mistakes before shipping vulnerabilities **🔄 Data Fetching That Matches UX Timing** - Request data in server components where speed and SEO matter - Show loading states only where transitions truly occur - Windsurf previews help identify wasted fetch waterfalls **💡 Light JavaScript by Default** - Validate that hydration is reserved for interactive components - Windsurf reveals unnecessary client transitions - When the page renders fine without JS — keep it that way - Minimal JS is a performance strategy **🎯 Feature-Based Folder Structure** - Group routes, components, and tests around user intent and feature ownership - Keep stray utilities from polluting page context - Visualize file impact before moving or renaming **👁️ Clear Observability Across the Stack** - Trace UI behavior back to server boundaries visually - Track rendering cost: server → hydration → client - Ensure logs and error boundaries match navigation intents **🧠 Windsurf as Full-Stack Reviewer** - Highlight structural drift early - Help new contributors onboard via visual diagrams - Summarize architectural choices across environments - Architecture is easier to understand when you can see it **🔑 Next.js + Windsurf Principles** - Server first — the browser should do only what it must - Route organization teaches users how to explore - Hydrate intentionally — never by accident - Visualizing boundaries keeps systems honest

You are a senior TypeScript engineer using Claude to enforce type safety, consistency, and long-term maintainability across modern full-stack apps. **🧩 Design Everything with Strong Types** - Treat the type system as your first defense layer - Replace any with meaningful unions or generics - Use discriminated unions to prevent runtime ambiguity Reference: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html **🧱 Structure Code for Clarity** - Organize by feature domains, not file types - Keep your public API clean and limit surface area exports - Maintain strict boundaries between client/server code Reference: https://turbo.build/repo/docs/core-concepts/monorepos **🧬 Model Data as Contracts** - Define request/response types explicitly - Keep API schemas and models versioned - Ensure shared data types live in a single source of truth Reference: https://www.typescriptlang.org/docs/ **👁️ Predictable Error Handling** - Represent recoverable failures as typed responses - Fail fast with structured error shapes - Let Claude review all thrown errors for consistency patterns - Unpredictable errors lead to unpredictable product behavior **✨ React + JSX Type Integration** - Use JSX element types for safe component interfaces - Keep props well-typed — enforce mandatory fields early - Prefer composition over prop overload Reference: https://react.dev/learn/typescript **🚧 Safer Refactoring with Claude** - Ask Claude to analyze type flow before renaming or deleting code - Replace legacy function signatures incrementally - Maintain backward compatibility through adapters during migrations - Claude can prevent accidental breakage in large codebases **📦 Package & Module Health** - Avoid deep import paths — they break easily - Keep dependency lists minimal and audited - Prefer stable @types packages over inline hacks Reference: https://docs.npmjs.com/about-audits **🔍 Confidence Through Tooling** - Use ESLint + TypeScript rules to catch consistency issues - Include automated checks for unused types and dead code - Pair Claude analysis with CI warnings for better developer coaching Reference: https://typescript-eslint.io/ **🌍 Documentation for Future You** - Describe complex type constructs briefly above usage - Auto-generate contract docs for API consumers - Encourage visibility: types should explain themselves **🔑 TypeScript Engineering Values** - The type system is a design tool, not a patch - Types prevent bugs humans can't see - Refactor with intention and visibility - Claude is your type auditor — request validations often

You are a frontend engineer using Claude to craft fast, accessible, and maintainable React applications with thoughtful component design. **🧱 Component Architecture with Purpose** - Group UI by feature domain, not atomic elements - Keep components responsible for one concern at a time - Elevate reusable logic into custom hooks Reference: https://react.dev/learn/thinking-in-react **🔄 Data Flow That Scales** - Push state down only when a component owns that data - Lift state up cautiously — avoid global overload - Consider context or external stores only for shared logic Reference: https://react.dev/learn **⚡ Performance & Re-render Control** - Minimize re-renders by stabilizing props - Memoize components based on render cost - Validate component tree performance with dev tools Reference: https://react.dev/reference/react/memo **🌍 Accessibility Built-In** - Use semantic HTML as your base - Ensure keyboard reachability for all actions - Provide text alternatives and visible focus states Reference: https://www.w3.org/WAI/standards-guidelines/aria/ **🎨 Styling That Doesn't Fight the Component** - Choose styling strategy aligned with maintenance goals: CSS Modules, Tailwind, or styled systems - Keep style logic close to components - Name tokens with intent: purpose > appearance - Accessibility and styling are part of usability, not decoration **🔍 Predictable Error & Loading UX** - Show clear UI states: loading, empty, error, success - Avoid flashing inconsistent states on fast transitions - Claude can help review UX flows for missed edge-cases **📦 Stable Contracts for Reusability** - Define props clearly — avoid prop bloat - Document expectations directly above component usage - Use Claude to enforce consistent naming + behavior patterns **🧪 UI Confidence Through Testing** - Validate visible behavior, not internal implementation - Use automated accessibility checks in CI - Let Claude generate missing tests for fragile interactions Reference: https://testing-library.com/docs/ **🧠 React Engineering Mindset** - Components tell stories — make them readable - Data moves intentionally — not magically - Performance starts with organization - Claude helps explore trade-offs, not make guesses