Add 25 world-class Claude Code skills for comprehensive software development

Created comprehensive skill collection covering all aspects of modern software
development with production-ready patterns, best practices, and detailed documentation.

## Skills Organized by Domain

### Code Quality & Architecture (2 skills)
- advanced-code-refactoring: SOLID principles, design patterns, refactoring patterns
- code-review: Automated/manual review, security, performance, maintainability

### API & Integration (2 skills)
- api-integration-expert: REST/GraphQL/WebSocket with auth, retry, caching
- graphql-schema-design: Schema design, resolvers, optimization, subscriptions

### Database & Data (3 skills)
- database-optimization: SQL/NoSQL tuning, indexing, query optimization
- data-pipeline: ETL/ELT with Airflow, Spark, dbt
- caching-strategies: Redis, Memcached, CDN, invalidation patterns

### Security & Authentication (2 skills)
- security-audit: OWASP Top 10, vulnerability scanning, security hardening
- auth-implementation: OAuth2, JWT, session management, SSO

### Testing & Quality (2 skills)
- test-automation: Unit/integration/E2E tests, TDD/BDD, coverage
- performance-profiling: CPU/memory profiling, Core Web Vitals optimization

### DevOps & Infrastructure (3 skills)
- docker-kubernetes: Containerization, orchestration, production deployments
- ci-cd-pipeline: GitHub Actions, automated testing, deployment strategies
- logging-monitoring: Observability with Datadog, Prometheus, Grafana, ELK

### Frontend Development (3 skills)
- frontend-accessibility: WCAG 2.1 compliance, ARIA, keyboard navigation
- ui-component-library: Design systems with React/Vue, Storybook
- mobile-responsive: Responsive design, mobile-first, PWAs

### Backend & Scaling (2 skills)
- backend-scaling: Load balancing, sharding, microservices, horizontal scaling
- real-time-systems: WebSockets, SSE, WebRTC for real-time features

### ML & AI (1 skill)
- ml-model-integration: Model serving, inference optimization, monitoring

### Development Tools (2 skills)
- git-workflow-optimizer: Git workflows, branching strategies, conflict resolution
- dependency-management: Package updates, security patches, version conflicts

### Code Maintenance (3 skills)
- error-handling: Robust error patterns, logging, graceful degradation
- documentation-generator: API docs, README, technical specifications
- migration-tools: Database/framework migrations with zero downtime

## Key Features

Each skill includes:
- YAML frontmatter with name, description, allowed tools
- Clear purpose and when to use
- Comprehensive capabilities overview
- Production-ready code examples
- Best practices and patterns
- Success criteria
- Tool-specific configurations

## Highlights

- 25 comprehensive skills covering full development lifecycle
- Production-ready patterns and examples
- Security-first approach throughout
- Performance optimization built-in
- Comprehensive testing strategies
- DevOps automation and infrastructure as code
- Modern frontend with accessibility focus
- Scalable backend architectures
- Data engineering and ML integration
- Advanced Git workflows

## File Structure

claude_skills/
├── README.md (comprehensive documentation)
├── advanced-code-refactoring/
│   ├── SKILL.md (main skill definition)
│   ├── reference.md (design patterns, SOLID principles)
│   └── examples.md (refactoring examples)
├── api-integration-expert/
│   └── SKILL.md (REST/GraphQL/WebSocket integration)
├── [23 more skills...]

Total: 25 skills + comprehensive README + supporting documentation

## Usage

Personal skills: cp -r claude_skills/* ~/.claude/skills/
Project skills: cp -r claude_skills/* .claude/skills/

Skills automatically activate based on context and description triggers.

claude_skills/frontend-accessibility/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: frontend-accessibility
+description: Expert in web accessibility (WCAG 2.1 AAA) including ARIA, keyboard navigation, screen reader support, and inclusive design. Use for accessibility audits, implementing a11y features, or ensuring compliance with accessibility standards.
+allowed-tools: Read, Write, Edit, Grep, Glob, Bash
+---
+
+# Frontend Accessibility Expert
+
+## Purpose
+Ensure web applications are accessible to all users including those with disabilities, following WCAG 2.1 guidelines.
+
+## WCAG 2.1 Principles (POUR)
+1. **Perceivable**: Content must be presentable to users
+2. **Operable**: UI components must be operable
+3. **Understandable**: Information must be understandable
+4. **Robust**: Content must be robust enough for assistive technologies
+
+## Key Areas
+- Semantic HTML
+- ARIA attributes and roles
+- Keyboard navigation
+- Screen reader compatibility
+- Color contrast (WCAG AA: 4.5:1, AAA: 7:1)
+- Focus management
+- Alternative text for images
+- Form accessibility
+- Skip links
+
+## Accessible Component Examples
+
+```tsx
+// Accessible button
+<button
+  type="button"
+  aria-label="Close dialog"
+  onClick={handleClose}
+  className="focus:outline-none focus:ring-2 focus:ring-blue-500"
+>
+  <XIcon aria-hidden="true" />
+</button>
+
+// Accessible form
+<form onSubmit={handleSubmit}>
+  <label htmlFor="email" className="block text-sm font-medium">
+    Email address
+    <span className="text-red-500" aria-label="required">*</span>
+  </label>
+  <input
+    id="email"
+    type="email"
+    required
+    aria-required="true"
+    aria-describedby="email-error"
+    aria-invalid={hasError}
+    className="mt-1 block w-full"
+  />
+  {hasError && (
+    <p id="email-error" role="alert" className="text-red-600 text-sm">
+      Please enter a valid email address
+    </p>
+  )}
+</form>
+
+// Accessible modal
+function Modal({ isOpen, onClose, title, children }: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Focus trap
+      const focusableElements = modalRef.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements?.[0] as HTMLElement;
+      firstElement?.focus();
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+      className="fixed inset-0 z-50"
+      ref={modalRef}
+    >
+      <div className="fixed inset-0 bg-black opacity-50" onClick={onClose} />
+      <div className="relative bg-white p-6 rounded-lg">
+        <h2 id="modal-title" className="text-xl font-bold">
+          {title}
+        </h2>
+        <button
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute top-4 right-4"
+        >
+          ×
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Accessible navigation
+<nav aria-label="Main navigation">
+  <ul role="list">
+    <li><a href="/" aria-current={isHome ? "page" : undefined}>Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/contact">Contact</a></li>
+  </ul>
+</nav>
+
+// Skip link
+<a
+  href="#main-content"
+  className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0"
+>
+  Skip to main content
+</a>
+<main id="main-content">...</main>
+```
+
+## Testing Tools
+- axe DevTools
+- WAVE browser extension
+- Lighthouse accessibility audit
+- Screen readers (NVDA, JAWS, VoiceOver)
+- Keyboard-only navigation testing
+
+## Accessibility Checklist
+- [ ] All images have alt text
+- [ ] Color contrast meets WCAG AA (4.5:1)
+- [ ] Keyboard navigation works
+- [ ] Focus indicators visible
+- [ ] Forms have labels
+- [ ] ARIA attributes used correctly
+- [ ] Headings in logical order (h1 → h2 → h3)
+- [ ] No flashing content (seizure risk)
+- [ ] Video/audio has captions
+- [ ] Screen reader tested
+
+## Success Criteria
+- ✓ WCAG 2.1 AA compliance (AAA preferred)
+- ✓ axe DevTools: 0 violations
+- ✓ Lighthouse accessibility: 100/100
+- ✓ Keyboard accessible
+- ✓ Screen reader compatible
+