feat: add hookli ECC bundle

.agents/skills/hookli/SKILL.md

@@ -0,0 +1,166 @@
+```markdown
+# hookli Development Patterns
+
+> Auto-generated skill from repository analysis
+
+## Overview
+
+This skill covers the development patterns, coding conventions, and collaborative workflows for the **hookli** repository—a TypeScript codebase built with Next.js. The project focuses on documenting and demoing custom React hooks, maintaining a design system, and tracking progress with structured documentation and logs. It emphasizes consistent code style, clear commit messages, and streamlined processes for adding features, updating documentation, and enforcing conventions.
+
+---
+
+## Coding Conventions
+
+### File Naming
+
+- **Kebab-case** is used for all files, especially in `components/`.
+  - Example: `use-interval-demo.tsx`, `my-component.tsx`
+
+### Import Style
+
+- **Alias imports** are preferred, using configured path aliases.
+  - Example:
+    ```typescript
+    import { useInterval } from '@/lib/hooks/use-interval';
+    import Demo from '@/components/demos/use-interval-demo';
+    ```
+
+### Export Style
+
+- **Mixed exports**: Both default and named exports are used as appropriate.
+  - Example:
+    ```typescript
+    // Named export
+    export function useInterval(callback: () => void, delay: number) { ... }
+
+    // Default export
+    export default DemoComponent;
+    ```
+
+### Commit Messages
+
+- **Conventional commits**: Use prefixes like `feat`, `chore`, `design`.
+  - Example: `feat: add useTimeout hook and demo page`
+- **Average commit message length**: ~78 characters.
+
+---
+
+## Workflows
+
+### Add New Hook Doc Page
+
+**Trigger:** When someone wants to document a new hook for the site.  
+**Command:** `/add-hook-doc`
+
+1. Create a demo component:  
+   `components/demos/{hook-name}-demo.tsx`
+2. Add a hook entry to:  
+   `lib/hook-docs.ts`
+3. Add the hook's source snapshot to:  
+   `lib/hook-sources.ts`
+4. Register the hook in:  
+   `lib/hooks-registry.ts`
+5. Mark the task as done in:  
+   `ralph/prd.json`
+6. Update the progress log:  
+   `ralph/progress.txt`
+
+**Example:**
+```typescript
+// components/demos/use-interval-demo.tsx
+import { useInterval } from '@/lib/hooks/use-interval';
+
+export default function UseIntervalDemo() {
+  // Demo implementation here
+}
+```
+
+---
+
+### Batch Add Multiple Hook Doc Pages
+
+**Trigger:** When documenting a group of new hooks together.  
+**Command:** `/batch-add-hook-docs`
+
+1. For each hook:
+   - Create demo in `components/demos/{hook-name}-demo.tsx`
+   - Add entry to `lib/hook-docs.ts`
+   - Add source to `lib/hook-sources.ts`
+   - Register in `lib/hooks-registry.ts`
+2. Mark all related tasks as done in `ralph/prd.json`
+3. Update `ralph/progress.txt`
+
+---
+
+### Feature Development with PRD Tracking
+
+**Trigger:** When implementing a new feature or completing a tracked task.  
+**Command:** `/complete-task`
+
+1. Implement the feature in `app/`, `components/`, or `lib/` as needed.
+2. Mark the task as done in `ralph/prd.json`.
+3. Log progress in `ralph/progress.txt`.
+
+---
+
+### Design System Token Update
+
+**Trigger:** When updating design tokens (colors, typography, etc.) or visual style.  
+**Command:** `/update-design-tokens`
+
+1. Edit `app/globals.css` to update tokens.
+2. Update `docs/DESIGN.md` and/or `AGENTS.md` to reflect changes.
+3. Optionally update assets in `public/` (e.g., branding SVGs or PNGs).
+
+---
+
+### Component File Naming Convention Enforcement
+
+**Trigger:** When enforcing or migrating to kebab-case for component files.  
+**Command:** `/enforce-kebab-case-components`
+
+1. Rename all `components/*.tsx` files to kebab-case.
+2. Update all imports in `app/`, `components/`, and related files to match new names.
+3. Update `AGENTS.md` and/or conventions documentation.
+
+---
+
+### Ralph Progress Logging
+
+**Trigger:** Whenever a tracked task or batch is completed.  
+**Command:** `/log-progress`
+
+1. Edit `ralph/progress.txt` to log the latest progress.
+
+---
+
+## Testing Patterns
+
+- **Framework:** [vitest](https://vitest.dev/)
+- **Test files:** Named with `.test.ts` suffix.
+  - Example: `use-interval.test.ts`
+- **Typical test structure:**
+  ```typescript
+  import { describe, it, expect } from 'vitest';
+  import { useInterval } from '@/lib/hooks/use-interval';
+
+  describe('useInterval', () => {
+    it('calls callback at specified interval', () => {
+      // Test implementation
+    });
+  });
+  ```
+
+---
+
+## Commands
+
+| Command                       | Purpose                                                        |
+|-------------------------------|----------------------------------------------------------------|
+| /add-hook-doc                 | Add documentation and demo for a new hook                      |
+| /batch-add-hook-docs          | Add documentation and demos for multiple hooks in one batch    |
+| /complete-task                | Complete a feature/task and update PRD/progress                |
+| /update-design-tokens         | Update design tokens and sync design documentation             |
+| /enforce-kebab-case-components| Enforce kebab-case naming for component files and update imports|
+| /log-progress                 | Log progress after completing a task or batch                  |
+```

.agents/skills/hookli/agents/openai.yaml

@@ -0,0 +1,6 @@
+interface:
+  display_name: "Hookli"
+  short_description: "Repo-specific patterns and workflows for hookli"
+  default_prompt: "Use the hookli repo skill to follow existing architecture, testing, and workflow conventions."
+policy:
+  allow_implicit_invocation: true

.claude/commands/add-new-hook-doc-page.md

@@ -0,0 +1,42 @@
+---
+name: add-new-hook-doc-page
+description: Workflow command scaffold for add-new-hook-doc-page in hookli.
+allowed_tools: ["Bash", "Read", "Write", "Grep", "Glob"]
+---
+
+# /add-new-hook-doc-page
+
+Use this workflow when working on **add-new-hook-doc-page** in `hookli`.
+
+## Goal
+
+Adds documentation for a new React hook, including interactive demo, registry entry, docs metadata, and vendored source snapshot.
+
+## Common Files
+
+- `components/demos/{hook-name}-demo.tsx`
+- `lib/hook-docs.ts`
+- `lib/hook-sources.ts`
+- `lib/hooks-registry.ts`
+- `ralph/prd.json`
+- `ralph/progress.txt`
+
+## Suggested Sequence
+
+1. Understand the current state and failure mode before editing.
+2. Make the smallest coherent change that satisfies the workflow goal.
+3. Run the most relevant verification for touched files.
+4. Summarize what changed and what still needs review.
+
+## Typical Commit Signals
+
+- Create demo component in components/demos/{hook-name}-demo.tsx
+- Add hook entry to lib/hook-docs.ts
+- Add hook source to lib/hook-sources.ts
+- Add hook to lib/hooks-registry.ts
+- Update ralph/prd.json to mark the task done
+
+## Notes
+
+- Treat this as a scaffold, not a hard-coded script.
+- Update the command if the workflow evolves materially.

.claude/commands/batch-add-multiple-hook-doc-pages.md

@@ -0,0 +1,42 @@
+---
+name: batch-add-multiple-hook-doc-pages
+description: Workflow command scaffold for batch-add-multiple-hook-doc-pages in hookli.
+allowed_tools: ["Bash", "Read", "Write", "Grep", "Glob"]
+---
+
+# /batch-add-multiple-hook-doc-pages
+
+Use this workflow when working on **batch-add-multiple-hook-doc-pages** in `hookli`.
+
+## Goal
+
+Adds documentation for several new hooks in a single commit, following the same steps as adding a single hook doc page, but for multiple hooks at once.
+
+## Common Files
+
+- `components/demos/{hook-name}-demo.tsx`
+- `lib/hook-docs.ts`
+- `lib/hook-sources.ts`
+- `lib/hooks-registry.ts`
+- `ralph/prd.json`
+- `ralph/progress.txt`
+
+## Suggested Sequence
+
+1. Understand the current state and failure mode before editing.
+2. Make the smallest coherent change that satisfies the workflow goal.
+3. Run the most relevant verification for touched files.
+4. Summarize what changed and what still needs review.
+
+## Typical Commit Signals
+
+- For each hook: create demo component in components/demos/{hook-name}-demo.tsx
+- For each hook: add entry to lib/hook-docs.ts
+- For each hook: add source to lib/hook-sources.ts
+- For each hook: add to lib/hooks-registry.ts
+- Update ralph/prd.json to mark all related tasks done
+
+## Notes
+
+- Treat this as a scaffold, not a hard-coded script.
+- Update the command if the workflow evolves materially.

.claude/commands/feature-development.md

@@ -0,0 +1,38 @@
+---
+name: feature-development
+description: Workflow command scaffold for feature-development in hookli.
+allowed_tools: ["Bash", "Read", "Write", "Grep", "Glob"]
+---
+
+# /feature-development
+
+Use this workflow when working on **feature-development** in `hookli`.
+
+## Goal
+
+Standard feature implementation workflow
+
+## Common Files
+
+- `app/*`
+- `components/*`
+- `lib/*`
+- `**/api/**`
+
+## Suggested Sequence
+
+1. Understand the current state and failure mode before editing.
+2. Make the smallest coherent change that satisfies the workflow goal.
+3. Run the most relevant verification for touched files.
+4. Summarize what changed and what still needs review.
+
+## Typical Commit Signals
+
+- Add feature implementation
+- Add tests for feature
+- Update documentation
+
+## Notes
+
+- Treat this as a scaffold, not a hard-coded script.
+- Update the command if the workflow evolves materially.