build-and-lint-verification

What this skill does

# Build and Lint Verification Skill

Use this skill to ensure code compiles and passes quality checks before deployment or testing.

## When to Use
- After writing new code
- Before committing to git
- Before running tests
- After fixing bugs
- During QA validation

## What This Skill Does

### 1. .NET Build Verification
Ensures backend code compiles:
- Run `dotnet build`
- Check for errors
- Check for warnings
- Verify project references

### 2. React Build Verification
Ensures frontend code compiles:
- Run `npm run build`
- Check for TypeScript errors
- Check for build warnings
- Verify bundle size

### 3. Linting
Enforces code quality standards:
- Run `npm run lint` for React
- Fix auto-fixable issues
- Report remaining violations

### 4. Type Checking
Validates TypeScript types:
- Run `npm run type-check` (if available)
- Ensure strict mode compliance
- No `any` types without justification

## Testing Workflow

### For .NET Projects
```bash
cd {context}/{context}-api

# Build
dotnet build

# Check output:
# ✓ Build succeeded. 0 Warning(s). 0 Error(s)
# ✗ Build FAILED. X Error(s)

# If errors, review and fix

# Run tests
dotnet test

# Check output:
# ✓ Passed! - Total: X, Passed: X, Failed: 0
# ✗ Failed! - Failed: Y
```

### For React Projects
```bash
cd {context}/{context}-ui

# Install dependencies (if needed)
npm install

# Lint
npm run lint

# Check output:
# ✓ No linting errors
# ✗ X problems (Y errors, Z warnings)

# Fix auto-fixable
npm run lint -- --fix

# Type check (if available)
npm run type-check

# Build
npm run build

# Check output:
# ✓ built in Xs
# ✗ error TS2xxx: ...
```

## Expected Inputs
- Project directory path
- Project type (.NET or React)

## Deliverables
- Build status (success/failure)
- Error count
- Warning count
- List of issues (if any)
- Recommendations for fixes

## Quality Standards

### .NET Quality Standards
- **0 Errors**: Code must compile
- **0 Warnings**: All warnings fixed
- **All tests pass**: 100% pass rate
- **No vulnerable packages**: Run `dotnet list package --vulnerable`

### React Quality Standards
- **0 Linting errors**: All ESLint rules pass
- **0 Type errors**: TypeScript strict mode compliant
- **Build succeeds**: Production build completes
- **Bundle size acceptable**: < 200KB gzipped for microfrontends

## Automated Fix Attempts

### ESLint Auto-fix
```bash
npm run lint -- --fix
```

Fixes:
- Missing semicolons
- Spacing/indentation
- Import order
- Unused imports

### Manual Fix Required
- TypeScript type errors
- Logical errors
- Security vulnerabilities
- Performance issues

## Validation Checklist

### .NET Validation
- [ ] `dotnet build` succeeds
- [ ] 0 compilation errors
- [ ] 0 compilation warnings
- [ ] `dotnet test` all pass
- [ ] No vulnerable packages
- [ ] Code follows Clean Architecture

### React Validation
- [ ] `npm run lint` passes
- [ ] `npm run type-check` passes (if available)
- [ ] `npm run build` succeeds
- [ ] 0 TypeScript errors
- [ ] 0 ESLint errors
- [ ] Bundle size acceptable
- [ ] No console warnings in build

## Example: Full Verification Flow

### Backend Verification
```bash
#!/bin/bash
PROJECT_DIR="scheduling/scheduling-api"

echo "Verifying $PROJECT_DIR..."

cd $PROJECT_DIR

# Build
echo "Building..."
if dotnet build --no-incremental > build.log 2>&1; then
  echo "✓ Build succeeded"
else
  echo "✗ Build failed"
  cat build.log
  exit 1
fi

# Test
echo "Testing..."
if dotnet test > test.log 2>&1; then
  echo "✓ Tests passed"
else
  echo "✗ Tests failed"
  cat test.log
  exit 1
fi

# Check vulnerabilities
echo "Checking for vulnerabilities..."
dotnet list package --vulnerable

echo "✓ All checks passed!"
```

### Frontend Verification
```bash
#!/bin/bash
PROJECT_DIR="scheduling/scheduling-ui"

echo "Verifying $PROJECT_DIR..."

cd $PROJECT_DIR

# Lint
echo "Linting..."
if npm run lint > lint.log 2>&1; then
  echo "✓ Lint passed"
else
  echo "⚠ Lint failed, attempting auto-fix..."
  npm run lint -- --fix
  if npm run lint > lint-fixed.log 2>&1; then
    echo "✓ Lint passed after auto-fix"
  else
    echo "✗ Lint failed after auto-fix"
    cat lint-fixed.log
    exit 1
  fi
fi

# Type check
if command -v npm run type-check &> /dev/null; then
  echo "Type checking..."
  if npm run type-check > typecheck.log 2>&1; then
    echo "✓ Type check passed"
  else
    echo "✗ Type check failed"
    cat typecheck.log
    exit 1
  fi
fi

# Build
echo "Building..."
if npm run build > build.log 2>&1; then
  echo "✓ Build succeeded"

  # Check bundle size
  BUNDLE_SIZE=$(du -sh dist | cut -f1)
  echo "Bundle size: $BUNDLE_SIZE"
else
  echo "✗ Build failed"
  cat build.log
  exit 1
fi

echo "✓ All checks passed!"
```

## Integration with QA Agents

### Before QA Frontend Testing
```
MUST run build and lint verification first:
1. npm run lint (must pass)
2. npm run build (must succeed)
3. Then proceed to Playwright testing
```

### Before QA Backend Testing
```
MUST run build verification first:
1. dotnet build (must succeed)
2. dotnet test (must pass)
3. Then proceed to API testing
```

## Common Issues and Fixes

### Issue: ESLint errors
**Common errors**:
- Unused variables
- Missing dependencies in useEffect
- Missing return types

**Fix**: Run `npm run lint -- --fix` first

### Issue: TypeScript errors
**Common errors**:
- Type 'any' not allowed
- Property doesn't exist on type
- Missing null checks

**Fix**: Add proper types, null checks

### Issue: Build warnings
**Common warnings**:
- Large bundle size
- Deprecated dependencies
- Peer dependency issues

**Fix**: Update dependencies, optimize imports

### Issue: .NET warnings
**Common warnings**:
- Unused variables
- Nullable reference issues
- Obsolete API usage

**Fix**: Clean up code, enable nullable reference types

This skill ensures code quality and prevents broken code from reaching testing or deployment.