@localtech/claude-code-toolkit 1.0.2 → 1.0.4

package/templates/.claude/skills/mobile-ui-ux-master/mobile-ux-checklist.md

@@ -0,0 +1,140 @@
+# MOBILE UI/UX QUALITY ASSURANCE CHECKLIST
+
+## 🎯 CRITICAL ISSUES (Your Main Pain Points)
+
+### ✅ Card Layout Consistency
+- [ ] **Equal Heights**: All cards in same row have identical heights
+- [ ] **No Expansion**: Cards never grow taller due to content overflow
+- [ ] **Grid Alignment**: Cards align perfectly in horizontal grids
+- [ ] **Responsive Scaling**: Cards maintain proportions across screen sizes
+
+### ✅ Text Management
+- [ ] **No Unwanted Breaks**: Text doesn't break into multiple lines unexpectedly
+- [ ] **Proper Truncation**: Long text uses ellipsis, never breaks layout
+- [ ] **Line Limits**: Titles max 2 lines, descriptions max 3 lines
+- [ ] **Readable Fonts**: Minimum 14px on mobile, proper line heights
+
+### ✅ Icon & Container Issues
+- [ ] **Fixed Containers**: Icon containers have consistent dimensions
+- [ ] **No Distortion**: Parent containers never distort from icon content
+- [ ] **Aspect Ratios**: Icons maintain proper proportions
+- [ ] **Proper Scaling**: Icons scale appropriately across devices
+
+### ✅ Spacing & Padding
+- [ ] **Consistent Padding**: 16px internal, 8px between elements
+- [ ] **Touch Targets**: Minimum 44px, optimal 48-56px
+- [ ] **Safe Areas**: Content avoids notches, navigation bars
+- [ ] **Proportional Scaling**: Spacing scales with screen size
+
+## 📱 MOBILE OPTIMIZATION CHECKLIST
+
+### Screen Size Coverage
+- [ ] **Minimum Support**: 320px width (iPhone SE)
+- [ ] **Content Scaling**: Works from 320px to 4K displays
+- [ ] **Orientation**: Works in both portrait and landscape
+- [ ] **Device Testing**: Tested on actual devices, not just emulators
+
+### Touch & Interaction
+- [ ] **Touch Targets**: All interactive elements ≥44px
+- [ ] **Thumb Zone**: Important actions in easy reach
+- [ ] **Gesture Support**: Swipe, pinch, long-press where appropriate
+- [ ] **Feedback**: Visual feedback for all interactions
+
+### Performance & Loading
+- [ ] **Fast Loading**: Images optimized, lazy loading implemented
+- [ ] **Smooth Scrolling**: No janky animations or transitions
+- [ ] **Memory Efficient**: No memory leaks, proper cleanup
+- [ ] **Offline Support**: Graceful degradation without network
+
+### Accessibility
+- [ ] **Screen Readers**: Proper ARIA labels and semantic HTML
+- [ ] **Keyboard Navigation**: Full keyboard accessibility
+- [ ] **Color Contrast**: WCAG AA compliance (4.5:1 ratio)
+- [ ] **Focus Indicators**: Clear focus states for all elements
+
+## 🛠️ DEVELOPMENT STANDARDS
+
+### Code Quality
+- [ ] **Mobile-First CSS**: Mobile styles first, then enhancements
+- [ ] **Flexbox/Grid**: Modern layout systems, no floats
+- [ ] **CSS Custom Properties**: Design tokens for consistency
+- [ ] **Component Libraries**: Reusable, tested components
+
+### Responsive Design
+- [ ] **Breakpoint Strategy**: Logical breakpoints, not device-specific
+- [ ] **Content Priority**: Most important content visible first
+- [ ] **Progressive Enhancement**: Works without JavaScript
+- [ ] **Cross-Browser**: Consistent across WebKit, Gecko, etc.
+
+### Quality Assurance
+- [ ] **Cross-Device Testing**: iOS Safari, Chrome Mobile, Samsung Internet
+- [ ] **Real Device Testing**: Not just browser dev tools
+- [ ] **Performance Monitoring**: Core Web Vitals tracking
+- [ ] **User Testing**: Real user feedback incorporated
+
+## 🚫 COMMON MISTAKES TO AVOID
+
+### Layout Issues
+- ❌ Cards with different heights in same row
+- ❌ Text overflow breaking card layouts
+- ❌ Fixed pixel values instead of relative units
+- ❌ Not accounting for different screen densities
+
+### Mobile-Specific Problems
+- ❌ Touch targets smaller than 44px
+- ❌ Horizontal scrolling on mobile
+- ❌ Content hidden behind navigation bars
+- ❌ Forms not optimized for mobile keyboards
+
+### Performance Issues
+- ❌ Large images without optimization
+- ❌ Heavy JavaScript blocking rendering
+- ❌ No loading states for slow connections
+- ❌ Memory leaks in single-page applications
+
+### Accessibility Failures
+- ❌ Missing alt text on images
+- ❌ Poor color contrast ratios
+- ❌ No keyboard navigation support
+- ❌ Missing focus indicators
+
+## 📊 MEASUREMENT METRICS
+
+### Performance Metrics
+- **First Contentful Paint**: < 1.5 seconds
+- **Largest Contentful Paint**: < 2.5 seconds
+- **Cumulative Layout Shift**: < 0.1
+- **First Input Delay**: < 100ms
+
+### Quality Metrics
+- **Accessibility Score**: > 90 (Lighthouse)
+- **Performance Score**: > 90 (Lighthouse)
+- **Best Practices Score**: > 90 (Lighthouse)
+- **SEO Score**: > 90 (Lighthouse)
+
+### User Experience Metrics
+- **Task Completion Rate**: > 95%
+- **Error Rate**: < 5%
+- **Time to Complete Tasks**: Within acceptable ranges
+- **User Satisfaction Score**: > 4/5
+
+## 🧪 TESTING PROTOCOL
+
+### Automated Testing
+1. **Visual Regression**: Screenshot comparison across devices
+2. **Accessibility Audit**: Automated WCAG compliance checking
+3. **Performance Testing**: Core Web Vitals monitoring
+4. **Cross-Browser Testing**: Automated browser compatibility
+
+### Manual Testing
+1. **Device Testing**: Physical devices of various sizes
+2. **User Flow Testing**: Complete user journeys
+3. **Edge Case Testing**: Error states, slow connections
+4. **Accessibility Testing**: Screen readers, keyboard navigation
+
+### Quality Gates
+- [ ] All automated tests passing
+- [ ] Manual testing checklist complete
+- [ ] Performance metrics within acceptable ranges
+- [ ] Accessibility audit passing
+- [ ] Cross-browser compatibility verified

package/templates/.claude/skills/professional-documentation-writer/SKILL.md

@@ -0,0 +1,42 @@
+# Claude Code Skill: Professional Documentation Writer
+
+## Metadata
+name: professional-documentation-writer
+description: Creates comprehensive, well-structured documentation for codebases, APIs, and projects with consistent formatting and professional tone
+author: Your Name
+version: 1.0.0
+tags: documentation, writing, markdown, professional
+
+## When to Use This Skill
+Use this skill when you need to:
+- Generate README files for new projects
+- Create API documentation
+- Write user guides and tutorials
+- Document code functions and classes
+- Create project documentation
+
+## Instructions for Claude
+When using this skill, follow these guidelines:
+
+1. **Structure**: Always use clear headings, subheadings, and proper markdown formatting
+2. **Tone**: Professional yet approachable - avoid overly technical jargon unless explaining technical concepts
+3. **Completeness**: Include all necessary sections (installation, usage, examples, API reference, etc.)
+4. **Consistency**: Use consistent formatting throughout the document
+5. **Examples**: Provide practical code examples where relevant
+6. **Navigation**: Include a table of contents for longer documents
+
+## Input Requirements
+- Project type (library, API, web app, CLI tool, etc.)
+- Key features/functionality to document
+- Target audience (developers, end users, administrators)
+- Any specific sections to include or exclude
+
+## Output Format
+Return the documentation in clean markdown format with:
+- Header with title and description
+- Table of contents (for documents > 500 words)
+- Installation/Setup section
+- Usage examples
+- API reference (if applicable)
+- Contributing guidelines
+- License information

package/templates/AGENTS.md

@@ -0,0 +1,127 @@
+# Project Agents Configuration
+
+This file defines the autonomous agents available in this project workspace.
+
+## Code Review Agent
+
+**Name**: code-reviewer
+**Description**: Specialized agent for conducting thorough code reviews, identifying bugs, security issues, and suggesting improvements
+**Tools**:
+- file-read
+- grep-search
+- run-terminal (for linting/checking)
+- git-commands
+
+**Permissions**: read-only
+**Triggers**: When user asks for code review or mentions "review this code"
+
+**Instructions**:
+- Focus on code quality, security, and best practices
+- Provide specific, actionable feedback
+- Suggest concrete improvements with code examples
+- Check for common vulnerabilities and anti-patterns
+- Consider performance implications
+
+## Documentation Agent
+
+**Name**: doc-writer
+**Description**: Creates comprehensive documentation including READMEs, API docs, and user guides
+**Tools**:
+- file-read
+- file-write
+- run-terminal (for generating docs)
+- web-search (for research)
+
+**Permissions**: write
+**Triggers**: When user asks to create or update documentation
+
+**Instructions**:
+- Use the professional-documentation-writer skill
+- Create clear, comprehensive documentation
+- Include practical examples and code snippets
+- Follow project documentation standards
+- Update table of contents automatically
+
+## Testing Agent
+
+**Name**: test-generator
+**Description**: Generates comprehensive test suites and ensures code coverage
+**Tools**:
+- file-read
+- file-write
+- run-terminal (for running tests)
+- grep-search
+
+**Permissions**: write
+**Triggers**: When user asks to add tests or mentions testing
+
+**Instructions**:
+- Generate unit tests for new functions
+- Create integration tests for APIs
+- Ensure adequate code coverage (>80%)
+- Follow project's testing framework and conventions
+- Add edge cases and error handling tests
+
+## Debugging Agent
+
+**Name**: debugger
+**Description**: Helps identify and fix bugs through systematic debugging approaches
+**Tools**:
+- file-read
+- run-terminal (for debugging commands)
+- grep-search
+- git-commands (for checking history)
+
+**Permissions**: read-only
+**Triggers**: When user reports bugs or asks for debugging help
+
+**Instructions**:
+- Use systematic debugging approaches
+- Check logs and error messages
+- Reproduce issues step by step
+- Suggest fixes with explanations
+- Help implement fixes when approved
+
+## Research Agent
+
+**Name**: researcher
+**Description**: Conducts technical research and provides insights on technologies and best practices
+**Tools**:
+- web-search
+- file-read
+- run-terminal (for research tools)
+
+**Permissions**: read-only
+**Triggers**: When user asks for research or technical information
+
+**Instructions**:
+- Provide accurate, up-to-date information
+- Cite sources and provide links
+- Compare different approaches/options
+- Consider project context and constraints
+- Suggest practical implementations
+
+## Mobile UI/UX Agent
+
+**Name**: mobile-ui-specialist
+**Description**: Specialized agent for creating professional, mobile-optimized UI/UX that eliminates layout inconsistencies, card height issues, text overflow problems, and responsive design flaws
+**Tools**:
+- file-read
+- file-write
+- run-terminal (for design tools)
+- web-search (for design research)
+
+**Permissions**: write
+**Triggers**: When user asks for mobile UI, responsive design, card layouts, or mentions UI/UX issues
+
+**Instructions**:
+- Use the mobile-ui-ux-master skill for all mobile UI work
+- Enforce equal card heights in horizontal grids
+- Prevent text overflow from breaking layouts
+- Ensure touch targets meet minimum 44px requirements
+- Implement mobile-first responsive design
+- Use CSS Grid/Flexbox for consistent layouts
+- Apply proper text containment (line-clamp, ellipsis)
+- Test designs across multiple screen sizes
+- Follow the mobile UX checklist for quality assurance
+- Never create amateur-looking mobile interfaces

package/templates/CLAUDE.md

@@ -0,0 +1,101 @@
+# Claude Code Global Configuration
+
+This file contains global settings, prompts, and preferences for Claude Code in this workspace.
+
+## Model Configuration
+
+**Default Model**: sonnet
+**Fallback Model**: opus (for complex reasoning tasks)
+**Auto-switch to Opus for**:
+- Complex architectural decisions
+- Multi-file refactoring
+- Performance-critical code
+- Security-sensitive changes
+
+## Global Prompts
+
+### Code Style Guidelines
+```
+- Use TypeScript for new projects unless JavaScript is specifically required
+- Follow functional programming principles where appropriate
+- Write self-documenting code with clear variable names
+- Add JSDoc/TSDoc comments for public APIs
+- Use async/await over Promises for better readability
+- Implement proper error handling with try/catch blocks
+- Follow consistent naming conventions (camelCase for variables/functions, PascalCase for classes/types)
+```
+
+### Project Structure
+```
+- Keep components small and focused (single responsibility)
+- Use barrel exports (index.ts) for clean imports
+- Separate business logic from UI components
+- Implement proper separation of concerns
+- Use environment variables for configuration
+- Follow 12-factor app principles
+```
+
+### Testing Standards
+```
+- Write tests for all public functions and components
+- Aim for >80% code coverage
+- Use descriptive test names that explain the behavior
+- Test both happy path and error scenarios
+- Mock external dependencies appropriately
+- Include integration tests for critical paths
+```
+
+## Tool Allowlist
+
+### Always Allowed
+- file-read
+- file-write
+- grep-search
+- run-terminal (basic commands)
+- git-commands
+
+### Require Approval
+- run-terminal (network commands, installations)
+- web-search (for research tasks)
+- shell-execution (for complex scripts)
+
+### Never Allowed
+- rm/delete commands without confirmation
+- Production database modifications
+- Network requests to external APIs without review
+
+## Context Management
+
+### File References
+Use `@filename` syntax to include relevant files in context:
+- `@src/components/` - Include component directory
+- `@package.json` - Include project dependencies
+- `@README.md` - Include project documentation
+- `@.claude/` - Include Claude-specific configuration
+
+### Memory Integration
+- Always check existing memory files before making decisions
+- Update memory files when learning new patterns or making important decisions
+- Use `/memory` commands to track project evolution
+
+## Best Practices
+
+### Development Workflow
+1. Always run tests before committing
+2. Use descriptive commit messages
+3. Keep pull requests focused and reviewable
+4. Document breaking changes
+5. Update documentation when changing APIs
+
+### Code Quality
+- Run linters before committing
+- Address all warnings and errors
+- Review code for security vulnerabilities
+- Consider performance implications
+- Ensure accessibility compliance
+
+### Communication
+- Explain complex decisions clearly
+- Provide context for changes
+- Ask clarifying questions when uncertain
+- Document assumptions and constraints