@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.
- package/README.md +394 -0
- package/build.js +15 -0
- package/collections/common/skills/create-prd/SKILL.md +43 -0
- package/collections/common/skills/discuss-problem/SKILL.md +55 -0
- package/collections/common/skills/explore-codebase/SKILL.md +79 -0
- package/collections/common/skills/prd-to-milestone/SKILL.md +40 -0
- package/collections/common/skills/refractor-and-clean/SKILL.md +41 -0
- package/collections/common/skills/solve-issue/SKILL.md +31 -0
- package/collections/common/skills/write-test-cases/SKILL.md +93 -0
- package/collections/web/agents/build-feature.md +42 -0
- package/collections/web/agents/build-milestone.md +61 -0
- package/collections/web/skills/build-component/SKILL.md +66 -0
- package/collections/web/skills/build-component/palette/README.md +3 -0
- package/collections/web/skills/build-component/palette/colors.md +87 -0
- package/collections/web/skills/build-component/references/best-practices.md +8 -0
- package/collections/web/skills/build-component/references/component-organization.md +21 -0
- package/collections/web/skills/build-component/references/figma-integration.md +5 -0
- package/collections/web/skills/build-component/references/icons.md +8 -0
- package/collections/web/skills/build-component/references/layout-and-structure.md +8 -0
- package/collections/web/skills/build-component/references/state-management.md +25 -0
- package/collections/web/skills/build-component/references/ui-kit-and-styling.md +13 -0
- package/collections/web/skills/build-component/typography/README.md +3 -0
- package/collections/web/skills/build-component/typography/variants.md +79 -0
- package/collections/web/skills/connect-api/SKILL.md +23 -0
- package/collections/web/skills/connect-api/references/api-call-structure.md +84 -0
- package/collections/web/skills/connect-api/references/best-practices.md +10 -0
- package/collections/web/skills/connect-api/references/data-fetchers.md +52 -0
- package/collections/web/skills/connect-api/references/error-handling.md +34 -0
- package/collections/web/skills/connect-api/references/hook-organization.md +11 -0
- package/collections/web/skills/connect-api/references/query-keys.md +21 -0
- package/collections/web/skills/connect-api/references/react-query-usage.md +83 -0
- package/collections/web/skills/connect-api/references/url-placeholders.md +17 -0
- package/collections/web/skills/scaffold-react-feature/SKILL.md +208 -0
- package/dist/cli.js +990 -0
- 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.
|