codewarden

CodeWarden

Enforce code quality and modern development practices

Created by Tyler Gibbs

Overview

CodeWarden is a Claude Code plugin for enforcing modern development practices, code quality standards, and security best practices in TypeScript/React/Next.js applications. The plugin ensures your code meets strict standards for quality, accessibility, and security.

Demo

Installation

Option 1: Install from GitHub (Recommended)

# In Claude Code
/plugin marketplace add https://github.com/tylerbryy/codewarden

# Install the plugin
/plugin install codewarden

Option 2: Install from Local Marketplace

# Clone the repository
git clone https://github.com/tylerbryy/codewarden.git
cd codewarden

# Add local marketplace
/plugin marketplace add ./

# Install the plugin
/plugin install codewarden

Option 3: Team Installation (Repository Level)

Add to your project's .claude/settings.json:

{
  "pluginMarketplaces": [
    "https://github.com/tylerbryy/codewarden"
  ],
  "plugins": {
    "codewarden": {
      "enabled": true
    }
  }
}

When team members trust the repository, the plugin installs automatically.

Quick Start

1. Install the plugin (see Installation above)

2. Run a code review:

   /code-review
   

3. Perform a security audit:

   /security-audit
   

4. Fix common anti-patterns:

   /fix-patterns
   

5. Deploy to Vercel:

   "Deploy my app to Vercel"
   

6. The skills activate automatically when you:

   • Write TypeScript/React code
   • Review pull requests
   • Implement forms or mutations
   • Work with Server Components/Actions
   • Ask about performance optimization
   • Request UI/design reviews
   • Deploy applications

Features

Agent Skills

Ultracite - Code Quality Enforcer

Strict enforcement of type safety, accessibility standards, and code quality rules based on Biome's linter.

• Type Safety: No any, proper TypeScript patterns, enum to const objects
• Accessibility: WCAG compliance, proper ARIA attributes, semantic HTML
• Modern JavaScript: Arrow functions, template literals, optional chaining
• React Best Practices: Proper keys, hook dependencies, component patterns
• Next.js Optimization: Image optimization, proper imports, App Router patterns

React Next Modern - Architectural Patterns

Enforce React 19 and Next.js App Router best practices with server-first architecture.

• Server Components: Async-native data fetching, request memoization
• Server Actions: Secure mutations with validation and auth
• Form Hooks: useActionState, useFormStatus, useOptimistic
• Performance: Eliminate waterfalls, optimize bundles
• Security: Input validation, authentication, rate limiting

UI/UX Guidelines - Accessibility & Design

Comprehensive UI/UX best practices for accessible, performant, and delightful interfaces.

• Keyboard Navigation: Full WCAG compliance, focus management
• Touch Targets: Mobile-friendly hit areas (≥44px)
• Accessibility: ARIA labels, semantic HTML, screen reader support
• Animations: prefers-reduced-motion support, compositor-friendly properties
• Forms: Proper validation, error handling, password manager support
• Performance: Image optimization, virtualized lists, minimal re-renders, Web Workers
• Internationalization: Locale-aware formatting, non-breaking spaces
• Copywriting: Clear, actionable messaging (includes Vercel style guide)
• Browser Quirks: SVG transforms, Windows select backgrounds, cross-browser compatibility

React Best Practices - Performance Optimization

React and Next.js performance optimization guidelines from Vercel Engineering, ordered by impact.

• Critical - Eliminate Waterfalls: Promise.all() for parallel async, start promises early, Suspense boundaries
• Critical - Bundle Size: Avoid barrel imports, use next/dynamic, defer third-party libraries, preload on intent
• High - Server Performance: React.cache() for deduplication, LRU cache for cross-request, minimize RSC serialization
• Medium - Client Data Fetching: SWR for automatic deduplication, defer state reads, derived state subscriptions
• Medium - Re-render Optimization: useMemo/useCallback strategically, startTransition for non-urgent updates
• Includes 39 individual rule files organized by category (async, bundle, server, client, rerender, rendering, js, advanced)

Vercel Deploy - Instant Deployment

Deploy any project to Vercel instantly without authentication.