claude-code-toolkit 1.0.7

package/templates/.claude/skills/claude-code-hooks-master/SKILL.md

@@ -0,0 +1,358 @@
+# Claude Code Skill: Claude Code Hooks Master
+
+## Metadata
+name: claude-code-hooks-master
+description: Master the power of Claude Code hooks for automated development workflows, continuous integration, and seamless productivity enhancement
+author: Carlos Fadhel
+version: 1.0.0
+tags: automation, hooks, workflow, efficiency, ci, productivity, integration
+
+## When to Use This Skill
+Use this skill when you need to:
+- Automate repetitive development tasks
+- Implement continuous integration workflows
+- Enhance development efficiency with smart automation
+- Integrate Claude Code with external tools and services
+- Create custom development workflows
+- Ensure code quality through automated checks
+
+## Core Concepts: Hooks Architecture
+
+### What Are Claude Code Hooks?
+Hooks are automated scripts that trigger at specific points in your development workflow:
+- **Pre-commit**: Run before code is committed (linting, testing, formatting)
+- **Post-commit**: Run after commits (documentation, notifications, deployment prep)
+- **Pre-push**: Run before pushing to remote (integration tests, security checks)
+- **Post-merge**: Run after merging branches (cleanup, notifications, deployments)
+- **File-change**: Trigger on specific file modifications
+- **Custom events**: User-defined triggers for specific workflows
+
+### Hook Directory Structure
+```
+.claude/hooks/
+├── pre-commit/
+│   ├── lint-and-format.sh
+│   ├── run-tests.sh
+│   └── security-check.py
+├── post-commit/
+│   ├── update-docs.sh
+│   ├── notify-team.py
+│   └── backup-code.sh
+├── pre-push/
+│   ├── integration-tests.sh
+│   ├── performance-check.py
+│   └── deployment-prep.sh
+└── custom/
+    ├── on-api-change/
+    │   └── regenerate-clients.sh
+    ├── on-db-migration/
+    │   └── run-migrations.sh
+    └── on-release/
+        └── publish-package.sh
+```
+
+## Hook Implementation Best Practices
+
+### 1. Hook Script Standards
+```bash
+#!/bin/bash
+# HOOK: pre-commit-lint-format
+# DESCRIPTION: Lint and format code before commits
+# AUTHOR: Claude Code Hooks Master
+# VERSION: 1.0.0
+
+set -e  # Exit on any error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+log_info() {
+    echo -e "${GREEN}[INFO]${NC} $1"
+}
+
+log_warn() {
+    echo -e "${YELLOW}[WARN]${NC} $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# Main execution
+main() {
+    log_info "Running pre-commit lint and format checks..."
+
+    # Your automation logic here
+    if ! run_linter; then
+        log_error "Linting failed. Please fix issues before committing."
+        exit 1
+    fi
+
+    if ! run_formatter; then
+        log_error "Formatting failed."
+        exit 1
+    fi
+
+    log_info "All pre-commit checks passed!"
+}
+
+# Helper functions
+run_linter() {
+    # Implement your linting logic
+    echo "Running linter..."
+    # Return 0 for success, 1 for failure
+}
+
+run_formatter() {
+    # Implement your formatting logic
+    echo "Running formatter..."
+    # Return 0 for success, 1 for failure
+}
+
+# Run main function
+main "$@"
+```
+
+### 2. Error Handling & Logging
+- Always use `set -e` to fail fast on errors
+- Provide clear, actionable error messages
+- Log both successes and failures
+- Use exit codes appropriately (0 = success, 1 = failure)
+
+### 3. Performance Considerations
+- Keep hooks fast (< 30 seconds for pre-commit)
+- Cache results when possible
+- Run expensive operations in background for post-commit hooks
+- Use parallel execution for independent checks
+
+### 4. Integration with Claude Code Skills
+Hooks can trigger Claude Code skills automatically:
+```bash
+# In a post-commit hook
+claude_code_run_skill "professional-documentation-writer" "update-api-docs"
+claude_code_run_skill "test-generator" "run-regression-tests"
+```
+
+## Essential Hook Categories
+
+### 🔍 **Quality Assurance Hooks**
+- **Pre-commit**: Linting, formatting, type checking
+- **Pre-push**: Full test suite, integration tests
+- **Post-merge**: Cross-browser testing, accessibility audits
+
+### 🚀 **Deployment Hooks**
+- **Pre-push**: Build verification, environment checks
+- **Post-commit**: Automatic staging deployments
+- **Post-merge**: Production deployments (with approval gates)
+
+### 📚 **Documentation Hooks**
+- **Post-commit**: Auto-generate API docs, update README
+- **On-api-change**: Regenerate client SDKs
+- **Pre-release**: Generate changelog, update version numbers
+
+### 🔒 **Security Hooks**
+- **Pre-commit**: Secret scanning, dependency vulnerability checks
+- **Pre-push**: Security testing, penetration testing triggers
+- **Post-merge**: Security audit notifications
+
+### 🤝 **Collaboration Hooks**
+- **Post-commit**: Team notifications, Slack updates
+- **Post-merge**: Code review assignments, QA notifications
+- **On-conflict**: Conflict resolution guides, merge conflict notifications
+
+## Advanced Automation Examples
+
+### 1. Smart Commit Messages
+```bash
+# pre-commit-smart-commit.sh
+# Analyzes changes and suggests commit message format
+
+CHANGED_FILES=$(git diff --cached --name-only)
+if echo "$CHANGED_FILES" | grep -q "test"; then
+    SUGGEST_TYPE="test"
+elif echo "$CHANGED_FILES" | grep -q "docs"; then
+    SUGGEST_TYPE="docs"
+elif echo "$CHANGED_FILES" | grep -q "\.md$"; then
+    SUGGEST_TYPE="docs"
+else
+    SUGGEST_TYPE="feat"
+fi
+
+echo "Suggested commit type: $SUGGEST_TYPE"
+echo "Example: $SUGGEST_TYPE: add user authentication"
+```
+
+### 2. Intelligent Testing
+```bash
+# pre-push-smart-testing.sh
+# Runs only relevant tests based on changed files
+
+CHANGED_FILES=$(git diff --name-only HEAD~1)
+TEST_COMMAND="npm test"
+
+# Run full suite for core changes
+if echo "$CHANGED_FILES" | grep -E "(core|config|package\.json)"; then
+    echo "Core changes detected - running full test suite"
+    TEST_COMMAND="$TEST_COMMAND -- --coverage"
+# Run specific tests for feature changes
+elif echo "$CHANGED_FILES" | grep -E "src/components"; then
+    echo "Component changes detected - running component tests"
+    TEST_COMMAND="$TEST_COMMAND -- --testPathPattern=components"
+fi
+
+eval $TEST_COMMAND
+```
+
+### 3. Automated Documentation
+```bash
+# post-commit-docs-update.sh
+# Auto-updates documentation based on code changes
+
+if git diff --name-only HEAD~1 | grep -E "\.(js|ts|py)$"; then
+    echo "Code changes detected - updating documentation"
+
+    # Use Claude Code skills for documentation
+    claude_code_run_skill "professional-documentation-writer" "update-api-docs"
+
+    # Update README if necessary
+    if git diff --name-only HEAD~1 | grep -E "(README|readme)"; then
+        claude_code_run_skill "professional-documentation-writer" "update-readme"
+    fi
+fi
+```
+
+### 4. Deployment Automation
+```bash
+# post-merge-deployment.sh
+# Automates deployment after successful merges
+
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+if [ "$BRANCH" = "main" ] || [ "$BRANCH" = "master" ]; then
+    echo "Merge to main branch detected - starting deployment"
+
+    # Run final checks
+    npm run test:ci
+    npm run build
+
+    # Deploy to staging
+    deploy_to_staging
+
+    # Notify team
+    notify_deployment "staging"
+
+    # Optional: auto-deploy to production after manual approval
+    if [ "$AUTO_DEPLOY_PROD" = "true" ]; then
+        deploy_to_production
+        notify_deployment "production"
+    fi
+fi
+```
+
+## Integration with Claude Code Agents
+
+### Memory System Integration
+```bash
+# post-commit-memory-update.sh
+# Updates the persistent memory system with project changes
+
+COMMIT_MSG=$(git log -1 --pretty=%B)
+CHANGED_FILES=$(git diff --name-only HEAD~1)
+
+# Add to decisions memory
+if echo "$COMMIT_MSG" | grep -i "decision\|choice\|architect"; then
+    echo "## $(date) - Architecture Decision" >> .claude/memory/decisions.md
+    echo "**Decision**: $COMMIT_MSG" >> .claude/memory/decisions.md
+fi
+
+# Add to learnings memory
+if echo "$COMMIT_MSG" | grep -i "learn\|discover\|find"; then
+    echo "## $(date) - Development Learning" >> .claude/memory/learnings.md
+    echo "**Insight**: $COMMIT_MSG" >> .claude/memory/learnings.md
+fi
+```
+
+### Agent Triggering
+```bash
+# on-file-change-trigger-agents.sh
+# Triggers specific agents based on file changes
+
+CHANGED_FILES=$(git diff --name-only)
+
+# Trigger mobile UI specialist for UI changes
+if echo "$CHANGED_FILES" | grep -E "mobile|ui|component"; then
+    claude_code_run_agent "mobile-ui-specialist" "review-ui-changes"
+fi
+
+# Trigger code reviewer for critical files
+if echo "$CHANGED_FILES" | grep -E "(security|auth|payment)"; then
+    claude_code_run_agent "code-reviewer" "security-review"
+fi
+```
+
+## Performance & Reliability
+
+### Hook Performance Guidelines
+- **Pre-commit**: < 10 seconds (blocking operations)
+- **Pre-push**: < 30 seconds (can be interrupted)
+- **Post-commit**: < 60 seconds (background operations)
+- **Post-merge**: < 5 minutes (deployment operations)
+
+### Reliability Features
+- **Timeout handling**: Prevent hanging hooks
+- **Retry logic**: For network-dependent operations
+- **Fallback behavior**: Graceful degradation on failures
+- **Logging**: Comprehensive logging for debugging
+
+### Monitoring & Maintenance
+```bash
+# hook-monitor.sh
+# Monitors hook performance and health
+
+HOOK_LOGS_DIR=".claude/hooks/logs"
+mkdir -p "$HOOK_LOGS_DIR"
+
+# Log hook execution time
+start_time=$(date +%s)
+# ... hook logic ...
+end_time=$(date +%s)
+duration=$((end_time - start_time))
+
+echo "$(date): $HOOK_NAME took ${duration}s" >> "$HOOK_LOGS_DIR/performance.log"
+
+# Alert on slow hooks
+if [ $duration -gt 30 ]; then
+    notify_team "Slow hook detected: $HOOK_NAME (${duration}s)"
+fi
+```
+
+## Security Considerations
+
+### Safe Hook Practices
+- **Validate inputs**: Never trust user-provided data
+- **Limit permissions**: Run hooks with minimal required permissions
+- **Audit logging**: Log all hook executions for security review
+- **Secret management**: Use secure credential storage (not plain text)
+
+### Network Security
+- **HTTPS only**: All external API calls must use HTTPS
+- **Certificate validation**: Verify SSL certificates
+- **API authentication**: Use proper authentication tokens
+- **Rate limiting**: Respect API rate limits to avoid blocks
+
+## Input Requirements
+- Project type (web app, mobile app, API, library)
+- Development workflow preferences (Git flow, trunk-based, etc.)
+- External integrations needed (CI/CD, monitoring, notifications)
+- Performance requirements and constraints
+
+## Output Format
+Return production-ready hook implementations with:
+- Proper error handling and logging
+- Performance optimizations
+- Security best practices
+- Integration with existing Claude Code skills
+- Documentation and maintenance guides
+- Monitoring and alerting capabilities

package/templates/.claude/skills/mobile-ui-ux-master/MobileCardGrid.tsx

@@ -0,0 +1,270 @@
+// MOBILE-OPTIMIZED CARD GRID COMPONENT
+// Solves all your UI/UX pain points: consistent heights, text containment, responsive design
+
+import React from 'react';
+import styled from 'styled-components';
+
+// Define theme interface for styled-components
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors: {
+      surface: string;
+      surfaceSecondary: string;
+      textPrimary: string;
+      textSecondary: string;
+      primary: string;
+      primaryHover: string;
+      primaryActive: string;
+      icon: string;
+      focus: string;
+      disabled: string;
+    };
+  }
+}
+
+// Default theme with professional colors
+export const defaultTheme = {
+  colors: {
+    surface: '#ffffff',
+    surfaceSecondary: '#f3f4f6',
+    textPrimary: '#111827',
+    textSecondary: '#6b7280',
+    primary: '#3b82f6',
+    primaryHover: '#2563eb',
+    primaryActive: '#1d4ed8',
+    icon: '#6b7280',
+    focus: '#3b82f6',
+    disabled: '#9ca3af'
+  }
+};
+
+interface CardData {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+interface MobileCardGridProps {
+  cards: CardData[];
+  columns?: {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+  };
+}
+
+const MobileCardGrid: React.FC<MobileCardGridProps> = ({
+  cards,
+  columns = { mobile: 1, tablet: 2, desktop: 3 }
+}) => {
+  return (
+    <GridContainer columns={columns}>
+      {cards.map((card) => (
+        <Card key={card.id}>
+          <CardHeader>
+            <IconContainer>
+              {card.icon}
+            </IconContainer>
+          </CardHeader>
+
+          <CardContent>
+            <CardTitle>{card.title}</CardTitle>
+            <CardDescription>{card.description}</CardDescription>
+          </CardContent>
+
+          {card.actionLabel && (
+            <CardFooter>
+              <ActionButton onClick={card.onAction}>
+                {card.actionLabel}
+              </ActionButton>
+            </CardFooter>
+          )}
+        </Card>
+      ))}
+    </GridContainer>
+  );
+};
+
+// STYLED COMPONENTS WITH MOBILE-FIRST DESIGN
+const GridContainer = styled.div<{ columns: { mobile: number; tablet: number; desktop: number } }>`
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+
+  /* MOBILE FIRST: Single column by default */
+  grid-template-columns: 1fr;
+
+  /* TABLET: 2 columns minimum */
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(${props => props.columns.tablet}, 1fr);
+  }
+
+  /* DESKTOP: 3 columns */
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(${props => props.columns.desktop}, 1fr);
+  }
+
+  /* CRITICAL: EQUAL HEIGHTS FOR ALL CARDS */
+  grid-auto-rows: 1fr;
+`;
+
+const Card = styled.div`
+  height: 100%; /* FILL GRID ROW HEIGHT */
+  background: ${props => props.theme.colors.surface || '#ffffff'};
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  /* HOVER EFFECTS - SAFE FOR TOUCH DEVICES */
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+  }
+`;
+
+const CardHeader = styled.div`
+  padding: 16px 16px 0 16px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const IconContainer = styled.div`
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  background: ${props => props.theme.colors.surfaceSecondary || '#f3f4f6'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0; /* PREVENT ICON DISTORTION */
+
+  /* ICON STYLING */
+  svg {
+    width: 24px;
+    height: 24px;
+    color: ${props => props.theme.colors.icon || '#6b7280'};
+  }
+`;
+
+const CardContent = styled.div`
+  flex: 1; /* TAKE REMAINING SPACE */
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: ${props => props.theme.colors.textPrimary || '#111827'};
+  margin: 0;
+
+  /* TEXT CONTAINMENT - PREVENTS LAYOUT BREAKAGE */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+  hyphens: auto;
+`;
+
+const CardDescription = styled.p`
+  flex: 1; /* FILL AVAILABLE SPACE TO MAINTAIN HEIGHT */
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${props => props.theme.colors.textSecondary || '#6b7280'};
+  margin: 0;
+
+  /* TEXT CONTAINMENT */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
+const CardFooter = styled.div`
+  padding: 0 16px 16px 16px;
+  margin-top: auto; /* PUSH TO BOTTOM */
+`;
+
+const ActionButton = styled.button`
+  width: 100%;
+  padding: 12px 16px;
+  background: ${props => props.theme.colors.primary || '#3b82f6'};
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  min-height: 44px; /* TOUCH TARGET MINIMUM */
+
+  /* HOVER EFFECTS - SAFE FOR TOUCH */
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background: ${props => props.theme.colors.primaryHover || '#2563eb'};
+    }
+  }
+
+  &:active {
+    background: ${props => props.theme.colors.primaryActive || '#1d4ed8'};
+  }
+
+  /* FOCUS ACCESSIBILITY */
+  &:focus {
+    outline: 2px solid ${props => props.theme.colors.focus || '#3b82f6'};
+    outline-offset: 2px;
+  }
+
+  /* DISABLED STATE */
+  &:disabled {
+    background: ${props => props.theme.colors.disabled || '#9ca3af'};
+    cursor: not-allowed;
+  }
+`;
+
+export default MobileCardGrid;
+
+// USAGE EXAMPLE:
+/*
+import MobileCardGrid, { defaultTheme } from './MobileCardGrid';
+import { ThemeProvider } from 'styled-components';
+
+const cards = [
+  {
+    id: '1',
+    title: 'Professional Card Title',
+    description: 'This description will never break the layout or cause height inconsistencies.',
+    icon: <SomeIcon />,
+    actionLabel: 'Learn More',
+    onAction: () => console.log('Action clicked')
+  }
+  // ... more cards
+];
+
+// Optional: Wrap with ThemeProvider for custom theming
+<ThemeProvider theme={defaultTheme}>
+  <MobileCardGrid
+    cards={cards}
+    columns={{ mobile: 1, tablet: 2, desktop: 3 }}
+  />
+</ThemeProvider>
+
+// Or use with default theme (built-in fallbacks)
+<MobileCardGrid
+  cards={cards}
+  columns={{ mobile: 1, tablet: 2, desktop: 3 }}
+/>
+*/