@hiver/skills 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +394 -0
  2. package/build.js +15 -0
  3. package/collections/common/skills/create-prd/SKILL.md +43 -0
  4. package/collections/common/skills/discuss-problem/SKILL.md +55 -0
  5. package/collections/common/skills/explore-codebase/SKILL.md +79 -0
  6. package/collections/common/skills/prd-to-milestone/SKILL.md +40 -0
  7. package/collections/common/skills/refractor-and-clean/SKILL.md +41 -0
  8. package/collections/common/skills/solve-issue/SKILL.md +31 -0
  9. package/collections/common/skills/write-test-cases/SKILL.md +93 -0
  10. package/collections/web/agents/build-feature.md +42 -0
  11. package/collections/web/agents/build-milestone.md +61 -0
  12. package/collections/web/skills/build-component/SKILL.md +66 -0
  13. package/collections/web/skills/build-component/palette/README.md +3 -0
  14. package/collections/web/skills/build-component/palette/colors.md +87 -0
  15. package/collections/web/skills/build-component/references/best-practices.md +8 -0
  16. package/collections/web/skills/build-component/references/component-organization.md +21 -0
  17. package/collections/web/skills/build-component/references/figma-integration.md +5 -0
  18. package/collections/web/skills/build-component/references/icons.md +8 -0
  19. package/collections/web/skills/build-component/references/layout-and-structure.md +8 -0
  20. package/collections/web/skills/build-component/references/state-management.md +25 -0
  21. package/collections/web/skills/build-component/references/ui-kit-and-styling.md +13 -0
  22. package/collections/web/skills/build-component/typography/README.md +3 -0
  23. package/collections/web/skills/build-component/typography/variants.md +79 -0
  24. package/collections/web/skills/connect-api/SKILL.md +23 -0
  25. package/collections/web/skills/connect-api/references/api-call-structure.md +84 -0
  26. package/collections/web/skills/connect-api/references/best-practices.md +10 -0
  27. package/collections/web/skills/connect-api/references/data-fetchers.md +52 -0
  28. package/collections/web/skills/connect-api/references/error-handling.md +34 -0
  29. package/collections/web/skills/connect-api/references/hook-organization.md +11 -0
  30. package/collections/web/skills/connect-api/references/query-keys.md +21 -0
  31. package/collections/web/skills/connect-api/references/react-query-usage.md +83 -0
  32. package/collections/web/skills/connect-api/references/url-placeholders.md +17 -0
  33. package/collections/web/skills/scaffold-react-feature/SKILL.md +208 -0
  34. package/dist/cli.js +990 -0
  35. package/package.json +33 -0
package/README.md ADDED
@@ -0,0 +1,394 @@
1
+ # @hiver/skills
2
+
3
+ A CLI tool to install and manage shared Claude Code skills & agents across Hiver repositories.
4
+
5
+ Skills are reusable AI prompt workflows (markdown files) that live in collections. This CLI copies them into the right directory for your IDE — Claude Code, Cursor, or Windsurf.
6
+
7
+ ---
8
+
9
+ ## For Consumers
10
+
11
+ ### Install skills interactively
12
+
13
+ ```bash
14
+ npx @hiver/skills add
15
+ ```
16
+
17
+ This walks you through:
18
+ 1. **Pick your IDE** — Claude Code, Cursor, or Windsurf
19
+ 2. **Pick a collection** — `common` (generic) or `web` (React/Hiver-specific)
20
+ 3. **Pick type** — Skills or Agents (only shown if both exist)
21
+ 4. **Pick items** — Select which skills/agents to install
22
+
23
+ Dependencies are auto-resolved and installed.
24
+
25
+ ### Other commands
26
+
27
+ ```bash
28
+ npx @hiver/skills list # List all available skills & agents
29
+ npx @hiver/skills add discuss-problem create-prd # Install specific skills directly
30
+ npx @hiver/skills update # Check for updates (shows diff, asks before overwriting)
31
+ npx @hiver/skills remove discuss-problem # Remove an installed skill
32
+ npx @hiver/skills help # Show help
33
+ ```
34
+
35
+ ### Navigation
36
+
37
+ - **Arrow keys** — move up/down
38
+ - **Space** — toggle selection (multi-select)
39
+ - **Enter** — confirm
40
+ - **Esc** — go back to previous step
41
+
42
+ ---
43
+
44
+ ## For Contributors
45
+
46
+ ### Prerequisites
47
+
48
+ - Node.js >= 18
49
+ - Yarn
50
+
51
+ ### Setup
52
+
53
+ ```bash
54
+ git clone <repo-url>
55
+ cd hiver-skills
56
+ yarn install
57
+ yarn build
58
+ ```
59
+
60
+ ### Test locally
61
+
62
+ ```bash
63
+ # Run any command directly
64
+ node dist/cli.js list
65
+ node dist/cli.js add
66
+ node dist/cli.js help
67
+
68
+ # Or link globally to test as a consumer would
69
+ yarn link
70
+ cd /path/to/any/project
71
+ hiver-skills add
72
+ ```
73
+
74
+ ### Creating a new skill (AI-assisted)
75
+
76
+ This repo includes a built-in `/create-skill` skill that guides you through the entire process of creating a new skill or agent using AI. It works in both Claude Code and Cursor.
77
+
78
+ **In Claude Code:**
79
+ ```
80
+ /create-skill
81
+ ```
82
+
83
+ **In Cursor:** The `create-skill.md` rule is auto-loaded from `.cursor/rules/`.
84
+
85
+ The skill will:
86
+ 1. Ask you what the skill should do, who it's for, and where it belongs
87
+ 2. Discuss edge cases, dependencies, and scope boundaries through back-and-forth
88
+ 3. Validate its understanding with you before writing anything
89
+ 4. Create the properly structured `SKILL.md` (or agent `.md`) file with correct frontmatter
90
+ 5. Verify it shows up in the CLI
91
+
92
+ This is the recommended way to add new skills — it ensures consistency with existing patterns and catches issues early.
93
+
94
+ ### Project structure
95
+
96
+ ```
97
+ hiver-skills/
98
+ ├── .claude/skills/create-skill/ # AI skill to help devs create new skills (Claude Code)
99
+ ├── .cursor/rules/ # Same skill for Cursor
100
+ ├── src/ # Source code (React + Ink CLI)
101
+ │ ├── cli.jsx # Entry point — routes to commands
102
+ │ ├── commands/
103
+ │ │ ├── Add.jsx # Interactive install wizard
104
+ │ │ ├── List.jsx # List available skills/agents
105
+ │ │ ├── Update.jsx # Diff-based update flow
106
+ │ │ └── Remove.jsx # Remove installed skills/agents
107
+ │ ├── components/
108
+ │ │ ├── Select.jsx # Single-select menu (for target, collection)
109
+ │ │ ├── MultiSelect.jsx # Multi-select with checkboxes (for skills)
110
+ │ │ ├── Confirm.jsx # Yes/no prompt
111
+ │ │ ├── DiffView.jsx # Colored diff display
112
+ │ │ └── StatusMessage.jsx # Success/warning/error messages
113
+ │ └── utils/
114
+ │ ├── collections.js # Scan collections, parse frontmatter, resolve deps
115
+ │ ├── installer.js # Copy/remove skills to IDE target directories
116
+ │ ├── targets.js # IDE target configs (paths for Claude, Cursor, Windsurf)
117
+ │ └── diffUtil.js # Compute diffs between local and latest files
118
+
119
+ ├── collections/ # Skill & agent markdown files
120
+ │ ├── common/ # Repo-agnostic skills (work in any project)
121
+ │ │ ├── skills/
122
+ │ │ └── agents/
123
+ │ └── web/ # Hiver web app specific
124
+ │ ├── skills/
125
+ │ └── agents/
126
+
127
+ ├── dist/ # Built output (do not edit directly)
128
+ │ └── cli.js # Bundled CLI binary
129
+
130
+ ├── build.js # esbuild config
131
+ ├── package.json
132
+ └── .github/workflows/ # CI/CD pipelines
133
+ ```
134
+
135
+ ---
136
+
137
+ ## How to: Common tasks
138
+
139
+ ### Add a new skill
140
+
141
+ 1. Decide which collection it belongs to:
142
+ - `collections/common/skills/` — if it's repo-agnostic (no hardcoded paths, no specific frameworks)
143
+ - `collections/web/skills/` — if it's specific to the Hiver web app
144
+ - Create a new collection directory if needed (e.g., `collections/extension/skills/`)
145
+
146
+ 2. Create a directory for the skill:
147
+ ```bash
148
+ mkdir collections/common/skills/my-new-skill
149
+ ```
150
+
151
+ 3. Create a `SKILL.md` file inside it with YAML frontmatter:
152
+ ```markdown
153
+ ---
154
+ name: my-new-skill
155
+ description: Short description of what this skill does. This shows up in the CLI.
156
+ dependencies: []
157
+ ---
158
+
159
+ # My New Skill
160
+
161
+ Instructions for the AI go here...
162
+ ```
163
+
164
+ 4. If the skill has supporting reference files, put them in subdirectories:
165
+ ```
166
+ my-new-skill/
167
+ ├── SKILL.md
168
+ └── references/
169
+ ├── patterns.md
170
+ └── examples.md
171
+ ```
172
+ The entire directory gets copied when a consumer installs the skill.
173
+
174
+ 5. Build and test:
175
+ ```bash
176
+ yarn build
177
+ node dist/cli.js list # Verify it shows up
178
+ node dist/cli.js add # Test installing it
179
+ ```
180
+
181
+ ### Add a new agent
182
+
183
+ 1. Create a markdown file in the appropriate `agents/` directory:
184
+ ```bash
185
+ # For repo-agnostic agents
186
+ touch collections/common/agents/my-agent.md
187
+
188
+ # For web-specific agents
189
+ touch collections/web/agents/my-agent.md
190
+ ```
191
+
192
+ 2. Add YAML frontmatter:
193
+ ```markdown
194
+ ---
195
+ name: my-agent
196
+ description: Short description shown in the CLI.
197
+ dependencies: [write-test-cases]
198
+ ---
199
+
200
+ Agent instructions here...
201
+ ```
202
+
203
+ 3. Build and verify:
204
+ ```bash
205
+ yarn build
206
+ node dist/cli.js list
207
+ ```
208
+
209
+ ### Add a new collection (for a new repo/team)
210
+
211
+ 1. Create the collection directory structure:
212
+ ```bash
213
+ mkdir -p collections/my-repo/{skills,agents}
214
+ ```
215
+
216
+ 2. Add skills and/or agents inside it (follow the steps above).
217
+
218
+ 3. That's it — the CLI auto-discovers collections by scanning the `collections/` directory. No registration needed.
219
+
220
+ ### Add a new IDE target
221
+
222
+ 1. Open `src/utils/targets.js`
223
+
224
+ 2. Add a new entry:
225
+ ```js
226
+ export const targets = {
227
+ claude: { name: 'Claude Code', skillsDir: '.claude/skills', agentsDir: '.claude/agents' },
228
+ cursor: { name: 'Cursor', skillsDir: '.cursor/rules', agentsDir: '.cursor/rules' },
229
+ windsurf: { name: 'Windsurf', skillsDir: '.windsurfrules', agentsDir: '.windsurfrules' },
230
+ // Add new target here:
231
+ newIde: { name: 'New IDE', skillsDir: '.newide/skills', agentsDir: '.newide/agents' },
232
+ };
233
+ ```
234
+
235
+ 3. The CLI picks it up automatically in the target selection step.
236
+
237
+ ### Declare dependencies between skills/agents
238
+
239
+ Add a `dependencies` field in the YAML frontmatter:
240
+
241
+ ```markdown
242
+ ---
243
+ name: build-feature
244
+ description: Orchestrates full feature build
245
+ dependencies: [build-milestone, write-test-cases]
246
+ ---
247
+ ```
248
+
249
+ When a consumer installs `build-feature`, the CLI will auto-install `build-milestone` and `write-test-cases` if they're not already selected.
250
+
251
+ Dependencies are resolved across all collections — a `common` skill can depend on a `web` agent, etc.
252
+
253
+ ### Modify the CLI UI
254
+
255
+ The CLI is built with [Ink](https://github.com/vadimdemedes/ink) (React for the terminal).
256
+
257
+ - **Components** are in `src/components/` — standard React components using Ink's `<Box>`, `<Text>`, `useInput`
258
+ - **Commands** are in `src/commands/` — each command is a React component with step-based state machine
259
+ - **Routing** is in `src/cli.jsx` — maps CLI args to command components
260
+
261
+ After any source change:
262
+ ```bash
263
+ yarn build # Rebuild
264
+ node dist/cli.js <command> # Test
265
+ ```
266
+
267
+ ### Add a new CLI command
268
+
269
+ 1. Create `src/commands/MyCommand.jsx`:
270
+ ```jsx
271
+ import React from 'react';
272
+ import { Text, useApp } from 'ink';
273
+
274
+ export function MyCommand() {
275
+ const { exit } = useApp();
276
+ setTimeout(() => exit(), 100);
277
+ return <Text color="green">Hello from my command!</Text>;
278
+ }
279
+ ```
280
+
281
+ 2. Register it in `src/cli.jsx`:
282
+ ```jsx
283
+ import { MyCommand } from './commands/MyCommand.jsx';
284
+
285
+ // Inside the App switch:
286
+ case 'my-command':
287
+ return <MyCommand />;
288
+ ```
289
+
290
+ 3. Add it to the help text in the `Help` component in the same file.
291
+
292
+ ---
293
+
294
+ ## Build & Release
295
+
296
+ ### Build
297
+
298
+ ```bash
299
+ yarn build
300
+ ```
301
+
302
+ This runs esbuild to bundle `src/cli.jsx` into `dist/cli.js` — a single ESM file with a shebang that can run directly with Node.
303
+
304
+ ### GitHub Workflows
305
+
306
+ There are 4 workflows in `.github/workflows/`:
307
+
308
+ | Workflow | File | Trigger | Purpose |
309
+ |----------|------|---------|---------|
310
+ | **Verify PR** | `verify-pull-request.yml` | Auto on PR open/sync | Runs `yarn install` + `yarn build` to verify the PR compiles |
311
+ | **Stable Release** | `publish-to-npm.yml` | Manual (workflow_dispatch) | Publishes a stable version to NPM |
312
+ | **Beta Release** | `publish-to-npm-beta.yml` | Manual (workflow_dispatch) | Publishes a beta version to NPM from any branch |
313
+
314
+ ### How to release a change
315
+
316
+ #### Step 1: Get your PR merged
317
+
318
+ 1. Create a feature branch and make your changes
319
+ 2. Open a PR to `main`
320
+ 3. The **Verify PR** workflow runs automatically — it must pass before merging
321
+ 4. Get review and merge to `main`
322
+
323
+ #### Step 2a: Stable release (for production-ready changes)
324
+
325
+ 1. Go to **GitHub Actions** → **"Npm release process"**
326
+ 2. Click **"Run workflow"**
327
+ 3. Enter the **version number** (e.g., `1.2.0`)
328
+ 4. Click **"Run workflow"**
329
+
330
+ What it does:
331
+ - Checks out `main`
332
+ - Installs dependencies and builds
333
+ - Bumps the version in `package.json`
334
+ - Publishes to NPM (`npm publish`)
335
+ - Commits the version bump and pushes
336
+ - Generates a changelog from merged PRs and commits it
337
+
338
+ After release, consumers get the new version with:
339
+ ```bash
340
+ npx @hiver/skills@latest add
341
+ ```
342
+
343
+ #### Step 2b: Beta release (for testing before stable)
344
+
345
+ Use this when you want others to test a change before making it the default version.
346
+
347
+ 1. Go to **GitHub Actions** → **"Beta Release Process"**
348
+ 2. Click **"Run workflow"**
349
+ 3. Enter the **branch** to publish from (e.g., `feat/new-skill` or `main`)
350
+ 4. Enter the **beta version** (e.g., `1.2.0-beta.1`)
351
+ - Always use the format `x.y.z-beta.N`
352
+ - Increment `N` for subsequent beta releases (`beta.1`, `beta.2`, etc.)
353
+ 5. Click **"Run workflow"**
354
+
355
+ What it does:
356
+ - Checks out the specified branch
357
+ - Installs dependencies and builds
358
+ - Bumps the version in `package.json` (does not commit)
359
+ - Publishes to NPM with the `beta` tag
360
+
361
+ Consumers can test the beta with:
362
+ ```bash
363
+ npx @hiver/skills@beta add
364
+ ```
365
+
366
+ The `beta` tag means `npx @hiver/skills add` (without a tag) still uses the latest stable version — beta is opt-in only.
367
+
368
+ #### When to use which?
369
+
370
+ | Scenario | Workflow |
371
+ |----------|----------|
372
+ | Merged a new skill, ready for everyone | **Stable release** |
373
+ | Updated skill content, small fix | **Stable release** (patch bump) |
374
+ | WIP feature on a branch, need someone to test | **Beta release** from that branch |
375
+ | Big change, want to validate before going stable | **Beta release** first, then **Stable release** |
376
+
377
+ ### Required secrets
378
+
379
+ These GitHub secrets must be configured in the repository settings:
380
+
381
+ | Secret | Purpose |
382
+ |--------|---------|
383
+ | `NPM_TOKEN_NEW` | NPM authentication token for publishing |
384
+ | `CI_SYSTEM_GITHUB_WORKFLOW` | GitHub PAT for pushing commits (version bumps, changelog) |
385
+ | `GITHUB_TOKEN` | Auto-provided by GitHub Actions (used for PR checks) |
386
+
387
+ ---
388
+
389
+ ## Key design decisions
390
+
391
+ - **Copy-on-install** (like shadcn/ui) — skills are copied into the consumer's project, not symlinked. Consumers own the files and can customize them.
392
+ - **Markdown-only skills** — skills are `.md` files with YAML frontmatter. No executable code in skills.
393
+ - **Auto-discovery** — collections, skills, and agents are discovered by scanning the filesystem. No central registry file to maintain.
394
+ - **Single build output** — esbuild bundles all JSX into one `dist/cli.js`. Dependencies stay external (loaded from `node_modules` at runtime).
package/build.js ADDED
@@ -0,0 +1,15 @@
1
+ import esbuild from 'esbuild';
2
+
3
+ await esbuild.build({
4
+ entryPoints: ['src/cli.jsx'],
5
+ bundle: true,
6
+ platform: 'node',
7
+ format: 'esm',
8
+ outfile: 'dist/cli.js',
9
+ banner: { js: '#!/usr/bin/env node' },
10
+ packages: 'external',
11
+ jsx: 'automatic',
12
+ jsxImportSource: 'react',
13
+ });
14
+
15
+ console.log('Build complete → dist/cli.js');
@@ -0,0 +1,43 @@
1
+ ---
2
+ name: create-prd
3
+ description: This skill is used to create a proper tech spec PRD for a problem statment. Use it only when the user is explicitly asking to create a PRD.
4
+ ---
5
+
6
+ # Create tech spec PRD document
7
+
8
+ Helps the user to create a proper PRD document by dividing the entire feature into multiple tasks order from independent to non-independent.
9
+
10
+
11
+ ## When to Use
12
+
13
+ - Use this skill when user wanted to create a PRD based upon a problem statment which he already discussed and finalized on the solutions
14
+ - do not use this if a summary document isnt provided
15
+
16
+ ## Phase Isolation
17
+
18
+ > **This should run in a FRESH conversation** — not the same one where `discuss-problem` ran. The summary document is the input, not the prior discussion history.
19
+ > **Start a NEW conversation for the next phase.** Once this skill produces `Prd.md`, the user should open a fresh conversation to run `prd-to-milestone`.
20
+
21
+ ## Instructions
22
+
23
+ - Take summary of the initial discussions as input from the user
24
+ - Analyze the summary in context of the current codebase
25
+ - Ask right questions if you are not clear on the problem statment or with the summary provided
26
+ - Go through the strategy and approaches fianalized and break down it into tasks to achieve
27
+ - in every milestone describe in detail
28
+ - Goal to achieve
29
+ - Concerns if any
30
+ - strategy and approach to use
31
+ - will it cause code break in the existing flows
32
+ - is the change is a breaking change
33
+ - Do add figma prototype screenshots if possible if its related to feature building or modification
34
+ - is the milestone dependent on the other milestone or not ?
35
+ - order the tasks from independent tasks which needed to be implemented first before starting another one
36
+ - take inputs from the user if he has any
37
+ - once both of you are on the same page create a Prd.md file which includes
38
+ - Problem statment
39
+ - figma links
40
+ - Summary
41
+ - Objective
42
+ - Tasks with all the things discussed so far.
43
+ - create this Prd in the same directory where the initial summary was created
@@ -0,0 +1,55 @@
1
+ ---
2
+ name: discuss-problem
3
+ description: This skill is used to discuss a problem statment which can be either building a feature, solving a bug etc. Use it only when user explicitly asks to discuss or grill down on a problem statment.
4
+ ---
5
+
6
+ # Discuss problem
7
+
8
+ > **MODE: DISCUSSION ONLY.**
9
+ > This skill is strictly for analysis and discussion. No source code will be written or modified under any circumstance. The ONLY file you may create is the final `summary.md`.
10
+
11
+ Help the user to grill down on a problem to its core discussing all sorts of the strategies, options to solve the problem. Discussing all the issues, edge cases, which can come up while solving the problem and getting on same page for solving the problem using the finalized approach or strategy.
12
+
13
+ ## Forbidden actions — NEVER do these
14
+
15
+ - Do NOT write, create, or edit any source code files
16
+ - Do NOT use `StrReplace`, `Write`, or `Shell` tools to make code changes
17
+ - Do NOT implement any solution, even partially
18
+ - Do NOT generate code snippets as part of a "just to show you" step
19
+ - The ONLY permitted file operation is creating the final `summary.md`
20
+
21
+ ## When to Use
22
+
23
+ - Use this skill when user wants to discuss a problem statement like implementing a new feature, modifying an existing feature, or solving a bug
24
+ - This skill is helpful for grilling down on a problem statement before even starting creating PRDs or development
25
+
26
+ ## Token Budget
27
+
28
+ - **Cap discussions at 5-7 exchanges.** After 7 rounds of back-and-forth, actively push toward convergence — summarize the current state, list open questions, and ask "are we ready to finalize?"
29
+ - If the problem genuinely needs more discussion, continue but be aware of context limits.
30
+
31
+ ## Phase Isolation
32
+
33
+ > **Start a NEW conversation for the next phase.** Once this skill produces `summary.md`, the user should open a fresh conversation to run `create-prd`. The summary document carries all necessary context — the discussion history does not need to transfer.
34
+
35
+ ## Instructions
36
+
37
+ 1. Take input from the user related to the problem they want to discuss or grill down
38
+ 2. If the problem is related to building a new feature, check with the user if prototype designs are available
39
+ 3. If Figma designs are available, use the Figma MCP tool to get the prototype details and analyze them
40
+ 4. Keep asking if the user has more Figma designs available until all designs are provided; keep using the Figma MCP tool to load them into memory
41
+ 5. Analyze the problem statement in context of the current codebase — use read and search tools to explore, never write tools
42
+ 6. Ask the right questions until you are clear on the problem statement
43
+ 7. Go through the codebase and figure out how the problem can be solved — discussion only
44
+ 8. Provide your thoughts and opinions on how to tackle this
45
+ 9. Figure out problems, issues, and edge cases which can come up while solving the problem
46
+ 10. Take inputs from the user if they have any
47
+ 11. Keep discussing until you and the user are on the same page (aim for convergence within 5-7 exchanges)
48
+ 12. Keep discussing until all the issues being presented are resolved
49
+
50
+ ### Final step — summary only, no code
51
+
52
+ Once both of you are on the same page:
53
+ - Create a `summary.md` file under a new directory at the root of the codebase, named after the problem
54
+ - The summary must include: problem statement, all options discussed, finalized approach, known issues and their resolutions, and open questions if any
55
+ - **Do NOT write any source code in this step or any step. The summary is plain markdown only.**
@@ -0,0 +1,79 @@
1
+ ---
2
+ name: explore-codebase
3
+ description: Explore a module, file, or directory with scoped, token-efficient analysis. Produces a structured summary focused only on what is relevant to the current task context.
4
+ ---
5
+
6
+ # Explore Codebase
7
+
8
+ Analyze a module, file, or directory to produce a focused summary that helps the user or calling agent understand the code before modifying it.
9
+
10
+ ## When to Use
11
+
12
+ - When the user or an agent needs to understand a module, file, or directory before making changes
13
+ - When investigating how a specific feature, component, or data flow works
14
+
15
+ ## Inputs
16
+
17
+ The caller MUST provide:
18
+ 1. **Starting path** — the module, directory, or file to explore
19
+ 2. **Context / goal** (optional but strongly recommended) — what the caller wants to achieve (e.g., "need to add a new filter option to the sidebar", "investigating why email sync fails"). If no context is given, ask the user before exploring.
20
+
21
+ ## Instructions
22
+
23
+ ### Step 1: Scope the exploration
24
+
25
+ - Start by listing the top-level contents of the given path (use `ls` or Glob)
26
+ - Identify which files/subdirectories are **relevant to the stated goal**
27
+ - **Skip** files that are clearly unrelated (e.g., test fixtures, unrelated sibling modules, generated files, assets like images/fonts)
28
+ - **Max depth: 3 levels** from the starting path. Do NOT recurse beyond 3 levels unless the caller explicitly asks for deeper exploration or a specific deeper file is clearly critical.
29
+
30
+ ### Step 2: Read only what matters
31
+
32
+ - Read the **entry-point files first** (index.js/ts, main component, route definitions, barrel exports)
33
+ - From entry points, follow **only the imports/dependencies relevant to the goal**
34
+ - Do NOT read every file in the directory. Read a file only if:
35
+ - It is an entry point or barrel export
36
+ - It is directly imported by an already-read relevant file
37
+ - It contains the component, hook, function, or class the goal is about
38
+ - **Budget: aim to read no more than 10-15 files** for a typical exploration. If you need more, pause and confirm with the user.
39
+
40
+ ### Step 3: Trace relevant flows only
41
+
42
+ Focus your analysis on flows relevant to the goal:
43
+ - **UI flow**: Which components render what? What props/state drive the behavior in question?
44
+ - **Data flow**: Where does the relevant data come from? (Redux store, Zustand, React Query, props, API call)
45
+ - **API layer**: Which API endpoints are called? What fetcher/hook is used?
46
+ - **Business logic**: What transformations, validations, or side effects apply to the relevant feature?
47
+
48
+ Do NOT try to document every flow in the module — only the ones that matter for the goal.
49
+
50
+ ### Step 4: Produce a structured summary
51
+
52
+ Return findings in this format:
53
+
54
+ ```
55
+ ## Module: <path>
56
+ **Goal context**: <what the caller wants to do>
57
+
58
+ ### Key Files
59
+ - `path/to/file.tsx` — <one-line role description>
60
+ - `path/to/hook.ts` — <one-line role description>
61
+ (list only files you actually read and found relevant)
62
+
63
+ ### How It Works
64
+ <2-5 sentences describing the relevant flow: UI → state → API → business logic>
65
+
66
+ ### Key Dependencies
67
+ - Internal: <other modules/components this depends on>
68
+ - External: <npm packages, APIs, services>
69
+
70
+ ### Modification Notes
71
+ <Anything the caller should know before making changes: gotchas, shared state, side effects, tightly coupled areas>
72
+ ```
73
+
74
+ ## Rules
75
+
76
+ - **Relevance over completeness** — a focused 10-file analysis beats a 50-file exhaustive scan
77
+ - **Stop early if the goal is answered** — if you find what the caller needs in 3 files, stop there
78
+ - **Never read files speculatively** — every file read should have a reason tied to the goal
79
+ - **If the scope is too large** (e.g., the caller points at a top-level directory with 20+ subdirectories), ask the caller to narrow down before exploring
@@ -0,0 +1,40 @@
1
+ ---
2
+ name: prd-to-milestone
3
+ description: This skill is used to create a proper implementation detail of a particular task taken from a Prd document. Use it only when the user or agent has explicitly asked for it.
4
+ ---
5
+
6
+ # PRD to milestone
7
+
8
+ Helps the user to pick one milestone from a PRD and create a proper plan with implementation detail from top to bottom on how to achieve this.
9
+
10
+ ## When to Use
11
+
12
+ - Use this skill when user or agent wants to create an implementation detail for a specific task in a PRD document.
13
+
14
+ ## Phase Isolation
15
+
16
+ > **This should run in a FRESH conversation** — not the same one where `create-prd` ran. The PRD document is the input, not the prior conversation.
17
+ > **Start a NEW conversation for the next phase.** Once this skill produces milestone documents, the user should open a fresh conversation to run `build-feature`.
18
+
19
+ ## Instructions
20
+
21
+ - Get the task data which we need to implement
22
+ - Analyze the milestone data in context of the current codebase
23
+ - Ask right questions if you are not clear on the problem statement
24
+ - Go through the strategy and approaches finalized in the milestone provided
25
+ - Use the right tools to explore the codebase — especially to determine the architectural approach (see below)
26
+ - For each milestone, describe the following:
27
+ - **Goal** — what this milestone achieves at a product/behaviour level
28
+ - **Architectural approach** — explore the codebase to determine this:
29
+ - `React-only` — if the feature is a standalone interactive component driven by Redux/React Query
30
+ - **Feature flag needed?** Yes / No. If yes, specify the key name following the `rls-` prefix convention (e.g., `rls-my-feature-name`)
31
+ - **High-level areas affected** — which modules or subsystems are involved (e.g., "Gmail sidebar", "Backbone conversation module", "React sidebar panel") — do NOT list exact files or lines
32
+ - **Breaking changes** — anything that could regress existing behaviour
33
+ - **Skills to activate** — explicitly list which `build-milestone` skills should be invoked for this milestone:
34
+ - `scaffold-react-feature` + `build-component` (for Pure React features)
35
+ - `connect-api` (if new API calls are needed)
36
+ - **Acceptance criteria** — write 2–3 product-level conditions that define "done" for this milestone:
37
+ - Each criterion describes a user-observable outcome at a high level
38
+ - These are the coverage target for the `write-test-cases` skill — not detailed test cases
39
+ - Create a separate `<milestone_name>.md` document for each milestone with all the details above.
40
+ - Create the documents under a folder named `milestones` in the same directory where the PRD document is present.
@@ -0,0 +1,41 @@
1
+ ---
2
+ name: refactor-and-clean
3
+ description: Refactor code for readability, maintainability, and cleanliness following standard guidelines. Use only when the user or agent has explicitly asked for refactoring or cleanup.
4
+ ---
5
+
6
+ # Refactor and Clean
7
+
8
+ Improve code quality in a file or directory — readability, maintainability, consistency — without changing external behavior.
9
+
10
+ ## Inputs
11
+
12
+ - **Required:** file or directory path.
13
+ - **Optional:** specific focus (e.g., "just naming", "break up large functions").
14
+
15
+ ## Workflow
16
+
17
+ 1. **Read** target file(s). Identify framework (React/Backbone/vanilla JS/TS).
18
+ 2. If invoked by user, ask: "Full pass or specific focus? Any conventions to preserve?" If by agent, proceed directly.
19
+ 3. **Analyze** for: dead code, large functions (>40 lines), vague naming, duplication (3+), magic values, deep nesting, responsibility violations.
20
+ 4. **Apply rules** (priority order below). Skip any rule where the code is already clean.
21
+ 5. **Verify** no behavior change — trace logic, check exports/props unchanged, update import sites for renames.
22
+ 6. **Summarize** changes by category (removed, renamed, extracted, restructured).
23
+
24
+ ## Refactoring Rules (priority order)
25
+
26
+ 1. **Remove dead code** — unused imports/vars/functions, commented-out blocks, unreachable branches. Skip if kept for feature flags.
27
+ 2. **Improve naming** — describe what, not how. `camelCase` vars/functions, `PascalCase` components, `UPPER_SNAKE_CASE` constants. Booleans as questions (`isVisible`). Skip if external API contract.
28
+ 3. **Extract constants** — hardcoded strings/numbers/config into named constants. File-top if local, shared `constants` file if cross-file. Skip if single-use and self-explanatory.
29
+ 4. **Break large functions** — split >40 lines or 3+ nesting levels. Prefer pure helpers. React: extract sub-components. Backbone: private methods. Skip if simple sequential pipeline.
30
+ 5. **Reduce duplication** — extract shared function/hook for 3+ repetitions. Skip if only 2 and abstraction hurts clarity.
31
+ 6. **Simplify control flow** — early returns over nested if/else, lookup objects over long chains, async/await over nested callbacks, no multi-line ternaries.
32
+ 7. **Single responsibility** — one job per function/component. Split container+presentational if needed. Skip if <50 lines.
33
+ 8. **Minimal comments** — only explain **why**, not what. Remove stale comments. JSDoc for non-obvious exports.
34
+ 9. **Organize structure** — constants -> types -> helpers -> main export. Imports: external, internal, relative (grouped).
35
+
36
+ ## Hard Rules
37
+
38
+ - **Never change behavior.** Flag bugs found during refactoring — don't fix silently.
39
+ - **Respect existing conventions.** Don't introduce conflicting patterns.
40
+ - **Readability > DRY.** Don't over-abstract.
41
+ - **Preserve git blame.** Don't reformat untouched code.