docs: add claude skills

Author: pythoninthegrass

.claude/settings.json

@@ -1,29 +1,70 @@
 {
   "permissions": {
     "allow": [
-      "Bash(cargo:*)",
+      "Bash(backlog:*)",
       "Bash(cat:*)",
-      "Bash(env)",
-      "Bash(fastlane match:*)",
-      "Bash(mc:*)",
-      "Bash(npx tauri:*)",
-      "Bash(rustup:*)",
-      "Bash(security cms:*)",
-      "Bash(security find-identity:*)",
-      "Bash(sg:*)",
-      "Bash(source .env)",
+      "Bash(deno fmt:*)",
+      "Bash(deno lint:*)",
+      "Bash(fd:*)",
+      "Bash(git add:*)",
+      "Bash(git bisect:*)",
+      "Bash(git commit:*)",
+      "Bash(git log:*)",
+      "Bash(git show:*)",
+      "Bash(git push:*)",
+      "Bash(git rev-parse:*)",
+      "Bash(git revert:*)",
+      "Bash(ls:*)",
+      "Bash(lsof:*)",
+      "Bash(npm:*)",
+      "Bash(npx:*)",
+      "Bash(pre-commit:*)",
+      "Bash(pytest:*)",
+      "Bash(python:*)",
+      "Bash(python3:*)",
+      "Bash(rg:*)",
+      "Bash(ruff:*)",
+      "Bash(sqlite3:*)",
       "Bash(task:*)",
-      "Bash(xcodebuild:*)",
+      "Bash(timeout:*)",
+      "Bash(tree:*)",
+      "Bash(uv:*)",
+      "mcp__backlog__get_task_creation_guide",
+      "mcp__backlog__get_workflow_overview",
       "mcp__backlog__task_create",
-      "mcp__backlog__task_edit",
       "mcp__backlog__task_list",
+      "mcp__backlog__task_search",
       "mcp__backlog__task_view",
+      "mcp__context7__query-docs",
+      "mcp__mantic__search_files",
+      "mcp__screencap__screenshot_app",
+      "mcp__sequential-thinking__sequentialthinking",
       "mcp__serena__activate_project",
-      "mcp__serena__get_symbols_overview",
+      "mcp__serena__find_file",
+      "mcp__serena__find_referencing_symbols",
+      "mcp__serena__get_current_config",
       "mcp__serena__initial_instructions",
-      "mcp__serena__list_dir"
+      "mcp__serena__list_dir",
+      "mcp__serena__read_memory",
+      "mcp__serena__think_about_task_adherence",
+      "Read(//tmp/**)",
+      "Read(//Users/*/Desktop/**)",
+      "Read(//Users/*/Downloads/**)",
+      "WebSearch"
     ],
-    "deny": [],
-    "ask": []
+    "deny": []
+  },
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "git diff --name-only HEAD | xargs -r pre-commit run --files"
+          }
+        ]
+      }
+    ]
   }
 }

.claude/skills/alpine-js/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: alpine-js
+description: Alpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.
+---
+
+# Alpine.js Development
+
+You are an expert in Alpine.js for building lightweight, reactive web interfaces.
+
+## Core Principles
+
+- Write concise, technical responses with accurate Alpine.js examples
+- Use Alpine.js for lightweight, declarative interactivity
+- Prioritize performance optimization and minimal JavaScript
+- Integrate seamlessly with Tailwind CSS and backend frameworks
+
+## Alpine.js Fundamentals
+
+### Directives
+- `x-data` - Define reactive data for a component
+- `x-bind` - Bind attributes to expressions
+- `x-on` - Attach event listeners
+- `x-model` - Two-way data binding for inputs
+- `x-show` / `x-if` - Conditional rendering
+- `x-for` - Loop through arrays
+- `x-text` / `x-html` - Set text or HTML content
+- `x-ref` - Reference DOM elements
+- `x-init` - Run code on initialization
+
+### Component Pattern
+```html
+<div x-data="{ open: false, count: 0 }">
+  <button @click="open = !open">Toggle</button>
+  <div x-show="open" x-transition>
+    <p x-text="count"></p>
+    <button @click="count++">Increment</button>
+  </div>
+</div>
+```
+
+## Integration Patterns
+
+### With Tailwind CSS
+- Use Tailwind for styling, Alpine for behavior
+- Combine `x-bind:class` with Tailwind utilities
+- Use transitions with `x-transition` and Tailwind
+
+### With Laravel/Livewire (TALL Stack)
+- Use Alpine for client-side interactivity
+- Let Livewire handle server communication
+- Use `@entangle` for two-way binding with Livewire
+- Keep components focused and modular
+
+### With Ghost CMS
+- Use Alpine for dynamic content interactions
+- Integrate with Ghost's content API
+- Handle data fetching patterns appropriately
+
+## Best Practices
+
+### Performance
+- Keep `x-data` objects small and focused
+- Use `x-show` over `x-if` when possible for better performance
+- Lazy load heavy components
+- Minimize DOM manipulation
+
+### Code Organization
+- Extract reusable logic into Alpine.data() components
+- Use Alpine.store() for shared state
+- Keep inline expressions simple; move complex logic to methods
+- Use meaningful variable names
+
+### Accessibility
+- Ensure keyboard navigation works
+- Use proper ARIA attributes
+- Test with screen readers
+- Maintain focus management
+
+## Common Patterns
+
+### Dropdown Menu
+```html
+<div x-data="{ open: false }" @click.away="open = false">
+  <button @click="open = !open">Menu</button>
+  <div x-show="open" x-transition>
+    <!-- Menu items -->
+  </div>
+</div>
+```
+
+### Form Validation
+```html
+<form x-data="{ email: '', isValid: false }" @submit.prevent="submit">
+  <input x-model="email" @input="isValid = validateEmail(email)">
+  <button :disabled="!isValid">Submit</button>
+</form>
+```