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

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

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

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

#!/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

#!/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.