Context: Working on UTA DevHub React Native application
Tech Stack: React Native, TypeScript, React Query, Zustand
Standards: Follow patterns in /docs/standards/
Architecture: Three-layer UI (foundation/patterns/business), Domain-driven design

Task: Implement [feature description]

Requirements:
- Must follow existing patterns in features/[similar-feature]
- Use established error handling from core/shared/errors
- Include tests matching team coverage standards (90%+)
- Documentation must include usage examples
- Follow our exact file placement rules (see decision tree)

Constraints:
- No new dependencies without ADR
- Must maintain backward compatibility
- Performance budget: [specific metrics]
- Use design tokens from core/shared/styles/

Example to follow:
[Reference similar implemented feature]

Generate a React Native component for UTA DevHub following these specifications:

Component: [ComponentName]
Purpose: [Brief description]
Type: [foundation | pattern | business | feature-specific]
Location: [exact folder path based on type]

Requirements:
1. Use TypeScript with strict mode
2. Include proper error boundaries
3. Follow our naming convention: PascalCase for components
4. Import design tokens from '@/core/shared/styles'
5. Use our standard loading/error states
6. Include comprehensive JSDoc documentation
7. Export through index.ts barrel file
8. Follow our exact component structure (see example)

Component Structure:
// 1. Imports (in our specific order)
// 2. Type definitions (interfaces, not types for objects)
// 3. Component function declaration (not arrow function)
// 4. Hooks in order: state, context, custom
// 5. Event handlers
// 6. Render
// 7. Styles using StyleSheet

Example Pattern:
[Include code snippet from similar component]

Generate a custom React hook for UTA DevHub:

Hook: use[HookName]
Purpose: [What it manages/provides]
Location: [domain hooks or shared hooks based on scope]

Requirements:
1. Follow our hook structure pattern
2. Use React Query for server state
3. Use Zustand for client state if needed
4. Include proper TypeScript types
5. Export consistent return object
6. Handle loading, error, and success states
7. Include JSDoc with usage examples

Return Object Pattern:
{
  // State
  data: T | undefined;
  // Status
  isLoading: boolean;
  error: Error | null;
  // Actions
  refetch: () => void;
  // Mutations if applicable
  create: (data: T) => Promise<void>;
}

Reference: See similar hooks in core/domains/*/hooks.ts

Generate comprehensive tests for [ComponentName] following UTA DevHub standards:

Test Requirements:
1. Use Jest and React Testing Library
2. File name: [ComponentName].test.tsx
3. Achieve 90%+ coverage minimum
4. Test happy path, error states, and edge cases
5. Mock API calls using our apiClient mock
6. Follow AAA pattern (Arrange, Act, Assert)
7. Include accessibility tests
8. Test user interactions thoroughly

Test Structure:
describe('[ComponentName]', () => {
  // Setup and mocks
  
  describe('Rendering', () => {
    // Initial render tests
  });
  
  describe('User Interactions', () => {
    // Click, type, etc.
  });
  
  describe('Error States', () => {
    // Error handling
  });
  
  describe('Edge Cases', () => {
    // Boundary conditions
  });
});

Reference: See [SimilarComponent].test.tsx for patterns

# UTA DevHub Coding Standards for GitHub Copilot
 
## CRITICAL: File Organization
- UI Components: ui/foundation/, ui/patterns/, ui/business/
- Features: features/[feature-name]/
- Business Logic: core/domains/[domain]/
- Shared Code: core/shared/
- ALWAYS follow our decision tree for file placement
 
## Naming Conventions (STRICTLY ENFORCED)
- Components: PascalCase (UserProfile.tsx)
- Hooks: camelCase starting with 'use' (useUserData.ts)
- Utilities: camelCase (formatDate.ts)
- Types: PascalCase interfaces, no 'I' prefix
- Files: Match component/function name exactly
 
## Required Patterns
- Function declarations for components (no arrow functions)
- Interfaces for objects, types for unions/primitives
- React Query for ALL server state
- Zustand for client state (no useState for shared state)
- Design tokens for ALL styling (no hardcoded values)
 
## Import Order (EXACT)
1. React/React Native
2. Third-party libraries
3. Absolute imports with @/
4. Relative imports (same folder only)
 
## Never Generate
- Any TypeScript 'any' types
- Direct API calls (use domain hooks)
- Inline styles or magic numbers
- Arrow function components
- Console.log statements

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.includePackageJsonAutoImports": "off",
  "ai-assistant.prompts": {
    "component": "Use UTA DevHub component template",
    "hook": "Use UTA DevHub hook template",
    "test": "Use UTA DevHub test template"
  }
}

Review this UTA DevHub code for compliance:

Code to review:
[paste code here]

Check for:
1. File placement - does it follow our decision tree?
2. Naming conventions - exact compliance required
3. Import order - must match our standard
4. TypeScript usage - no 'any', proper types
5. Pattern consistency - matches similar features?
6. Error handling - all paths covered?
7. Performance - unnecessary re-renders?
8. Tests - 90%+ coverage included?

Compare against:
- Feature Implementation Decision Tree
- TypeScript & React Patterns
- Common Pitfalls guide

Output format:
- ✅ Compliant areas
- ❌ Issues found (with fixes)
- 💡 Suggestions for improvement
- 📚 Documentation updates needed

// ❌ AI often generates
import Button from '@/ui/Button';
import { useState } from 'react';
 
// ✅ Fix to our standard
import React, { useState } from 'react';
import { Button } from '@/ui/foundation/Button';

// ❌ AI often generates
const MyComponent: React.FC<Props> = ({ prop1 }) => {
  // implementation
};
 
// ✅ Fix to our standard
export function MyComponent({ prop1 }: Props) {
  // implementation
}

// ❌ AI might suggest
const [users, setUsers] = useState([]);
useEffect(() => {
  fetch('/api/users').then(/*...*/);
}, []);
 
// ✅ Fix to use React Query
const { data: users = [] } = useUsers();

// ❌ AI might use 'any' or weak types
const handleData = (data: any) => {
  // process data
};
 
// ✅ Always use specific types
interface UserData {
  id: string;
  name: string;
  email: string;
}
 
const handleData = (data: UserData) => {
  // process data
};