@qazuor/claude-code-config 0.1.0

package/templates/skills/brand-guidelines.md

@@ -0,0 +1,240 @@
+---
+name: brand-guidelines
+category: design
+description: Apply brand guidelines consistently across UI components
+usage: When creating or reviewing UI components for brand consistency
+input: Component or page to validate
+output: Brand-compliant implementation or validation report
+config_required:
+  - brand_name: "Your brand/product name"
+  - primary_color: "Primary brand color (hex)"
+  - secondary_color: "Secondary brand color (hex)"
+  - font_family: "Primary font family"
+  - tone_of_voice: "Brand tone (formal, friendly, professional)"
+---
+
+# Brand Guidelines Skill
+
+## ⚙️ Configuration Required
+
+Before using this skill, configure your brand in the project:
+
+| Setting | Description | Example |
+|---------|-------------|---------|
+| `brand_name` | Your product/brand name | "MyApp" |
+| `primary_color` | Main brand color | `#3b82f6` (blue) |
+| `secondary_color` | Accent color | `#f97316` (orange) |
+| `font_family` | Primary font | "Inter", "Roboto" |
+| `tone_of_voice` | Communication style | "friendly", "professional" |
+
+**Configuration location:** Create `.claude/config/brand.json` or add to project's design system.
+
+---
+
+## Purpose
+
+Apply brand guidelines consistently across all UI components, ensuring visual coherence in colors, typography, tone of voice, and design system elements.
+
+---
+
+## Capabilities
+
+- Apply color palette consistently
+- Enforce typography standards
+- Maintain tone of voice in copy
+- Validate brand compliance
+- Create brand-compliant components
+- Ensure responsive design standards
+
+---
+
+## Brand Identity Template
+
+### Brand Essence
+```markdown
+**{{BRAND_NAME}}** is a {{PRODUCT_TYPE}} for {{TARGET_AUDIENCE}}.
+
+**Brand Personality:**
+- {{TRAIT_1}}: Description
+- {{TRAIT_2}}: Description
+- {{TRAIT_3}}: Description
+
+**Brand Promise:**
+"{{BRAND_PROMISE}}"
+```
+
+---
+
+## Color System
+
+### Palette Structure
+```css
+/* Primary - Main brand color */
+--primary-50:  /* Lightest */
+--primary-500: /* Main */
+--primary-900: /* Darkest */
+
+/* Secondary - Accent color */
+--secondary-50:
+--secondary-500:
+--secondary-900:
+
+/* Neutral - Text and backgrounds */
+--gray-50 to --gray-900
+
+/* Semantic - Feedback colors */
+--success-500: /* Green - confirmations */
+--warning-500: /* Yellow - alerts */
+--error-500:   /* Red - errors */
+--info-500:    /* Blue - information */
+```
+
+### Color Usage
+| Element | Color | Example Class |
+|---------|-------|---------------|
+| Primary CTA | Primary-500 | `bg-primary-500 text-white` |
+| Secondary CTA | Secondary-500 | `bg-secondary-500 text-white` |
+| Headings | Gray-900 | `text-gray-900` |
+| Body text | Gray-600 | `text-gray-600` |
+| Borders | Gray-200 | `border-gray-200` |
+| Light backgrounds | Gray-50 | `bg-gray-50` |
+
+---
+
+## Typography
+
+### Type Scale
+| Element | Size | Weight | Class |
+|---------|------|--------|-------|
+| Display | 4xl-6xl | Bold | `text-4xl md:text-6xl font-bold` |
+| H1 | 3xl-4xl | Bold | `text-3xl md:text-4xl font-bold` |
+| H2 | 2xl-3xl | Semibold | `text-2xl md:text-3xl font-semibold` |
+| H3 | xl-2xl | Semibold | `text-xl md:text-2xl font-semibold` |
+| Body | base | Normal | `text-base` |
+| Small | sm | Normal | `text-sm` |
+| Caption | xs | Normal | `text-xs text-gray-500` |
+
+### Font Weights
+- `font-normal` (400): Body text
+- `font-medium` (500): Emphasis, labels
+- `font-semibold` (600): Subheadings
+- `font-bold` (700): Headings, CTAs
+
+---
+
+## Spacing System
+
+### Base Unit: 4px (Tailwind)
+| Token | Size | Usage |
+|-------|------|-------|
+| `p-1` | 4px | Tight spacing |
+| `p-2` | 8px | Small elements |
+| `p-4` | 16px | Button padding |
+| `p-6` | 24px | Card padding |
+| `p-8` | 32px | Section padding |
+| `p-12` | 48px | Large sections |
+
+### Component Standards
+- **Card padding**: `p-6`
+- **Button padding**: `px-4 py-2`
+- **Section spacing**: `py-12 md:py-16`
+- **Element gaps**: `space-y-4` or `gap-4`
+- **Container**: `container mx-auto px-4 md:px-6`
+
+---
+
+## Tone of Voice
+
+### Guidelines
+- **{{TONE_STYLE}}**: Adapt to configured tone
+- **Clear and concise**: Avoid jargon
+- **Helpful**: Guide users, don't lecture
+- **Authentic**: Be genuine, not salesy
+
+### Copy Patterns
+```markdown
+**Headers:**
+✓ Action-oriented, benefit-focused
+✗ Technical or feature-focused
+
+**CTAs:**
+✓ Clear, specific action ("Save changes", "Create account")
+✗ Vague ("Submit", "Click here")
+
+**Errors:**
+✓ Helpful, solution-oriented ("Email not found. Try another or create account")
+✗ Technical ("Error 404: Resource not found")
+
+**Confirmations:**
+✓ Positive, reassuring ("Changes saved!")
+✗ Cold ("Operation completed")
+```
+
+---
+
+## Responsive Breakpoints
+
+| Breakpoint | Size | Usage |
+|------------|------|-------|
+| `sm` | 640px | Landscape phones |
+| `md` | 768px | Tablets |
+| `lg` | 1024px | Desktop |
+| `xl` | 1280px | Large desktop |
+| `2xl` | 1536px | Extra large |
+
+**Approach**: Mobile-first (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)
+
+---
+
+## Accessibility Requirements
+
+### Color Contrast (WCAG AA)
+- Normal text: 4.5:1 minimum
+- Large text (≥18px): 3:1 minimum
+
+### Touch Targets
+- Minimum size: 44x44px
+- `min-h-[44px] min-w-[44px]`
+
+### Focus States
+- Always visible: `focus:ring-2 focus:ring-primary-500 focus:ring-offset-2`
+
+---
+
+## Brand Checklist
+
+When creating UI components, verify:
+
+### Visual
+- [ ] Colors from approved palette
+- [ ] Typography follows scale
+- [ ] Spacing uses standard increments
+- [ ] Responsive on all breakpoints
+
+### Interactive
+- [ ] Hover states defined
+- [ ] Focus states visible
+- [ ] Touch targets ≥44px
+- [ ] Loading states implemented
+
+### Content
+- [ ] Tone matches brand voice
+- [ ] Copy is clear and helpful
+- [ ] Error messages are friendly
+- [ ] CTAs are action-oriented
+
+### Accessibility
+- [ ] Color contrast meets WCAG AA
+- [ ] Images have alt text
+- [ ] Keyboard navigable
+- [ ] Screen reader compatible
+
+---
+
+## Deliverables
+
+When applying this skill, produce:
+
+1. **Brand-compliant components** using correct colors, typography, spacing
+2. **Validation report** if reviewing existing components
+3. **Recommendations** for brand inconsistencies found

package/templates/skills/documentation/markdown-formatter.md

@@ -0,0 +1,302 @@
+---
+name: markdown-formatter
+category: documentation
+description: Automatically format and lint markdown files to ensure consistent documentation standards
+usage: When formatting documentation, fixing markdown violations, or maintaining doc quality
+input: Markdown files, formatting rules, quality criteria
+output: Formatted markdown files, lint reports, quality metrics
+config_required:
+  - rules_enabled: "List of markdown rules to enforce"
+  - indentation_spaces: "List indentation size"
+  - max_blank_lines: "Maximum consecutive blank lines"
+  - code_language_default: "Default language for code blocks"
+  - line_length: "Maximum line length"
+---
+
+# Markdown Formatter
+
+## ⚙️ Configuration
+
+| Setting | Description | Example |
+|---------|-------------|---------|
+| `rules_enabled` | Active lint rules | `['MD007', 'MD040', 'MD022']` |
+| `indentation_spaces` | List indent | `2` |
+| `max_blank_lines` | Max consecutive blanks | `1` |
+| `code_language_default` | Default code language | `text` |
+| `line_length` | Max line length | `100` |
+| `heading_style` | Heading format | `atx` (#) or `setext` (===) |
+
+## Purpose
+
+Comprehensive markdown formatting and linting to ensure consistent, clean, and standards-compliant documentation.
+
+## Capabilities
+
+- Fix list indentation (MD007)
+- Remove excessive blank lines (MD012)
+- Add heading blank lines (MD022)
+- Resolve duplicate headings (MD024)
+- Remove heading punctuation (MD026)
+- Fix ordered list numbering (MD029)
+- Add code block blank lines (MD031)
+- Add list blank lines (MD032)
+- Convert emphasis to headings (MD036)
+- Add code block languages (MD040)
+- Validate link fragments (MD051)
+- Add table blank lines (MD058)
+
+## Key Rules
+
+### MD007 - List Indentation
+
+Ensures consistent indentation for nested lists.
+
+**Before:**
+```markdown
+- Item 1
+    - Nested (4 spaces)
+      - Deep nested (6 spaces)
+```
+
+**After:**
+```markdown
+- Item 1
+  - Nested (2 spaces)
+    - Deep nested (4 spaces)
+```
+
+### MD040 - Code Block Language
+
+Adds language specification to code blocks.
+
+**Before:**
+````markdown
+```
+function hello() {
+  console.log('hello');
+}
+```
+````
+
+**After:**
+````markdown
+```typescript
+function hello() {
+  console.log('hello');
+}
+```
+````
+
+### MD022 - Heading Blank Lines
+
+Adds blank lines around headings.
+
+**Before:**
+```markdown
+Some text
+## Heading
+More text
+```
+
+**After:**
+```markdown
+Some text
+
+## Heading
+
+More text
+```
+
+### MD012 - Multiple Blank Lines
+
+Removes excessive blank lines.
+
+**Before:**
+```markdown
+Text
+
+
+Too many blanks
+```
+
+**After:**
+```markdown
+Text
+
+One blank line
+```
+
+## Usage
+
+### Format Single File
+
+```bash
+# Format file
+pnpm format:md path/to/file.md
+
+# Validate only
+pnpm lint:md path/to/file.md
+```
+
+### Format Directory
+
+```bash
+# Format all markdown
+pnpm format:md "**/*.md"
+
+# Exclude patterns
+pnpm format:md "**/*.md" --ignore "node_modules/**"
+```
+
+### Integration
+
+#### Pre-commit Hook
+
+```yaml
+# .husky/pre-commit
+#!/bin/sh
+pnpm lint:md --staged
+```
+
+#### CI/CD
+
+```yaml
+# .github/workflows/docs.yml
+- name: Lint Markdown
+  run: pnpm lint:md "**/*.md"
+```
+
+## Configuration File
+
+```yaml
+# .markdownlint.json
+{
+  "MD007": { "indent": 2 },
+  "MD012": { "maximum": 1 },
+  "MD013": false,
+  "MD024": { "siblings_only": true },
+  "MD040": { "allowed_languages": ["typescript", "bash", "json"] },
+  "MD041": false
+}
+```
+
+## Common Patterns
+
+### Documentation Structure
+
+```markdown
+# Title
+
+Brief introduction.
+
+## Section 1
+
+Content with proper spacing.
+
+### Subsection
+
+- List item 1
+  - Nested item
+  - Another nested
+- List item 2
+
+### Code Example
+
+```typescript
+const example = 'with language';
+```
+
+## Section 2
+
+More content.
+```
+
+### Tables
+
+```markdown
+| Column 1 | Column 2 |
+|----------|----------|
+| Data 1   | Data 2   |
+| Data 3   | Data 4   |
+```
+
+## Best Practices
+
+| Practice | Description |
+|----------|-------------|
+| **Consistent Indentation** | Use configured spaces for lists |
+| **Language Specification** | Always add language to code blocks |
+| **Blank Lines** | Surround headings, tables, code |
+| **No Trailing Punctuation** | Remove from headings |
+| **Unique Headings** | Avoid duplicate heading text |
+| **Link Validation** | Ensure fragment links work |
+
+## Automation
+
+### Watch Mode
+
+```bash
+# Auto-format on change
+pnpm format:md --watch
+```
+
+### Editor Integration
+
+```json
+// .vscode/settings.json
+{
+  "editor.formatOnSave": true,
+  "[markdown]": {
+    "editor.defaultFormatter": "markdownlint"
+  }
+}
+```
+
+## Error Handling
+
+### Graceful Degradation
+
+- Continue on individual rule failures
+- Create backups before modifications
+- Detailed error reporting
+- Rollback capabilities
+
+### Edge Cases
+
+- Malformed markdown handling
+- Binary file detection
+- Large file optimization
+- Unicode support
+
+## Reporting
+
+### Fix Summary
+
+```text
+Processed: 45 files
+Fixed: 127 violations
+  - MD007: 23 (list indentation)
+  - MD040: 56 (code languages)
+  - MD022: 48 (heading blanks)
+Manual review: 3 files
+```
+
+### Detailed Report
+
+```text
+file.md
+  ✓ MD007 Fixed list indentation (5 instances)
+  ✓ MD040 Added code languages (2 instances)
+  ✗ MD024 Duplicate headings require manual review
+```
+
+## Checklist
+
+- [ ] Rules configured for project
+- [ ] Integration with workflow
+- [ ] CI/CD validation enabled
+- [ ] Editor integration setup
+- [ ] Pre-commit hook active
+- [ ] All violations fixed
+- [ ] Documentation tested
+- [ ] Team guidelines updated