Skip to content

Commit d9c5fc4

Browse files
justin-schroederjustin-schroeder
committed
feat(cli): add FormKit Pro documentation to skill
Add Pro input routes, installation instructions, and key guidance to SKILL.md. Export Pro route list from skill.ts and update tests.
1 parent 3192520 commit d9c5fc4

3 files changed

Lines changed: 61 additions & 1 deletion

File tree

‎packages/cli/__tests__/skill.spec.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,11 @@ describe('FormKit skill installation', () => {
113113
expect(skill).toContain('# FormKit')
114114
expect(skill).toContain('Tailwind CSS 4')
115115
expect(skill).toContain('formkit theme --theme=regenesis')
116+
expect(skill).toContain('For non-interactive Regenesis setup')
117+
expect(skill).toContain('Current Pro input docs routes')
118+
expect(skill).toContain('https://pro.formkit.com')
119+
expect(skill).toContain('@formkit/pro')
120+
expect(skill).toContain('Whenever you use or recommend a Pro input')
116121
expect(skill).toContain('node.setErrors()')
117122
expect(skill).toContain('group.list.2.name')
118123
await expect(
@@ -141,6 +146,11 @@ describe('FormKit skill installation', () => {
141146
expect(agentsMd).toContain('https://formkit.com/<page>.react.md')
142147
expect(agentsMd).toContain('Tailwind CSS 4')
143148
expect(agentsMd).toContain('formkit theme --theme=regenesis')
149+
expect(agentsMd).toContain('non-interactive way')
150+
expect(agentsMd).toContain('Current Pro routes')
151+
expect(agentsMd).toContain('https://pro.formkit.com')
152+
expect(agentsMd).toContain('@formkit/pro')
153+
expect(agentsMd).toContain('user-facing summary')
144154
expect(agentsMd).toContain('node.setErrors()')
145155
expect(claudeMd).toContain('Use the `formkit` skill')
146156
expect(result.updatedFiles).toEqual([

‎packages/cli/assets/skills/formkit/SKILL.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,33 @@ Use this skill when you are building, debugging, or refactoring FormKit forms, i
2222
- Vue or Nuxt: `https://formkit.com/<page>.vue.md`
2323
- The full route index for both runtimes is in `references/docs-index.md`.
2424

25+
## FormKit Pro
26+
27+
- Distinguish core inputs from Pro inputs before recommending or implementing one.
28+
- Current Pro input docs routes are:
29+
- `/inputs/autocomplete`
30+
- `/inputs/colorpicker`
31+
- `/inputs/currency`
32+
- `/inputs/datepicker`
33+
- `/inputs/dropdown`
34+
- `/inputs/mask`
35+
- `/inputs/rating`
36+
- `/inputs/repeater`
37+
- `/inputs/slider`
38+
- `/inputs/taglist`
39+
- `/inputs/toggle`
40+
- `/inputs/togglebuttons`
41+
- `/inputs/transfer-list`
42+
- `/inputs/unit`
43+
- Core inputs do not require FormKit Pro. Pro inputs require `@formkit/pro` plus a FormKit Pro project key.
44+
- To add Pro to a project:
45+
- create a free project key at `https://pro.formkit.com`
46+
- install `@formkit/pro`
47+
- add `createProPlugin(...)` to the FormKit config and register the needed Pro inputs
48+
- React projects wire Pro through the FormKit React config. Vue and Nuxt projects wire Pro through the FormKit Vue config. The Pro plugin and inputs come from `@formkit/pro`.
49+
- FormKit Pro keys are not public values for docs or examples, but they are also not private keys in the server-secret sense. They are client-side project keys and should usually be hard-coded in the codebase or another intentionally client-exposed config surface.
50+
- Whenever you use or recommend a Pro input, say so in the user-facing summary and explicitly mention that `@formkit/pro` and a FormKit Pro key are required.
51+
2552
## Mental model
2653

2754
- FormKit is a node tree. Inputs, forms, groups, and lists are all nodes with value, props, state, validation, messages, and plugins.
@@ -33,7 +60,8 @@ Use this skill when you are building, debugging, or refactoring FormKit forms, i
3360

3461
- Prefer Tailwind CSS 4 as the primary styling mechanism when the project can support it.
3562
- Avoid the legacy Genesis theme by default. Prefer Regenesis or another Tailwind theme from the FormKit theme workflow.
36-
- To generate a project-root Tailwind theme, prefer the FormKit CLI:
63+
- To generate a project-root Tailwind theme, prefer the FormKit CLI.
64+
- For non-interactive Regenesis setup, pass the theme explicitly instead of using the prompt:
3765
- `formkit theme --theme=regenesis`
3866
- or `npx formkit@latest theme --theme=regenesis`
3967
- That command generates `formkit.theme.(mjs|ts)` in the project root. Then:

‎packages/cli/src/skill.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,23 @@ export const SUPPORTED_AGENTS: Array<SupportedAgent> = [
3131
{ id: 'crush', label: 'Crush' },
3232
]
3333

34+
const FORMKIT_PRO_INPUT_ROUTES = [
35+
'/inputs/autocomplete',
36+
'/inputs/colorpicker',
37+
'/inputs/currency',
38+
'/inputs/datepicker',
39+
'/inputs/dropdown',
40+
'/inputs/mask',
41+
'/inputs/rating',
42+
'/inputs/repeater',
43+
'/inputs/slider',
44+
'/inputs/taglist',
45+
'/inputs/toggle',
46+
'/inputs/togglebuttons',
47+
'/inputs/transfer-list',
48+
'/inputs/unit',
49+
].join(', ')
50+
3451
const AUTO_ENABLE_FILES: Record<string, string> = {
3552
'claude-code': 'CLAUDE.md',
3653
codex: 'AGENTS.md',
@@ -196,7 +213,12 @@ export function renderProjectInstructionSection(
196213
'- Prefer declarative FormKit patterns. Avoid event listeners unless there is no node- or state-driven alternative.',
197214
'- Prefer Tailwind CSS 4 for FormKit styling when the project can support it.',
198215
'- Avoid Genesis by default. Prefer generating Regenesis with `formkit theme --theme=regenesis`.',
216+
'- `formkit theme --theme=regenesis` is the non-interactive way to generate the Regenesis-based `formkit.theme` file.',
199217
'- For theme setup, wire `rootClasses` from `./formkit.theme` and add the `formkit.theme` file to Tailwind 4 via `@source` in the main CSS entry.',
218+
`- Distinguish core inputs from Pro inputs. Current Pro routes: ${FORMKIT_PRO_INPUT_ROUTES}.`,
219+
'- Pro inputs require `@formkit/pro` and a FormKit Pro key from `https://pro.formkit.com`.',
220+
'- FormKit Pro keys are client-side project keys, not server-private secrets. Prefer hard-coded codebase config or another intentional client-exposed config surface.',
221+
'- If you use or recommend Pro, say that clearly in the user-facing summary and mention the `@formkit/pro` plus Pro key requirement.',
200222
'- For backend errors, prefer one adapter/helper that maps server payloads to FormKit form errors plus dot-notation input paths like `group.name` or `group.list.2.name`, then call `node.setErrors()` or framework `setErrors()`.',
201223
].join('\n')
202224
}

0 commit comments

Comments
 (0)