@gallopsystems/agent-skills 1.2.0 → 1.4.0
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 +57 -0
- package/commands/contribute-skill.md +65 -0
- package/package.json +2 -1
- package/plugins/copier-template/skills/copier-template/SKILL.md +6 -0
- package/plugins/doctl/skills/doctl/SKILL.md +6 -0
- package/plugins/git-github/skills/git-github/SKILL.md +6 -0
- package/plugins/kysely-postgres/skills/kysely-postgres/SKILL.md +6 -0
- package/plugins/linear/skills/linear/SKILL.md +6 -0
- package/plugins/nitro-testing/skills/nitro-testing/SKILL.md +6 -0
- package/plugins/nuxt-nitro-api/skills/nuxt-nitro-api/SKILL.md +7 -0
- package/plugins/nuxt-nitro-api/skills/nuxt-nitro-api/composables-utils.md +5 -0
- package/plugins/nuxt-nitro-api/skills/nuxt-nitro-api/formatters.md +139 -0
package/README.md
CHANGED
|
@@ -15,6 +15,9 @@ Then install the skills you want:
|
|
|
15
15
|
/plugin install nuxt-nitro-api@gallop-systems-agent-skills
|
|
16
16
|
/plugin install nitro-testing@gallop-systems-agent-skills
|
|
17
17
|
/plugin install linear@gallop-systems-agent-skills
|
|
18
|
+
/plugin install doctl@gallop-systems-agent-skills
|
|
19
|
+
/plugin install git-github@gallop-systems-agent-skills
|
|
20
|
+
/plugin install copier-template@gallop-systems-agent-skills
|
|
18
21
|
```
|
|
19
22
|
|
|
20
23
|
## Updating
|
|
@@ -111,6 +114,60 @@ Covers:
|
|
|
111
114
|
- Async/automation testing utilities
|
|
112
115
|
- CI/CD setup with GitHub Actions and PostgreSQL
|
|
113
116
|
|
|
117
|
+
### linear
|
|
118
|
+
|
|
119
|
+
Create, triage, and manage Linear issues following team conventions, with a GraphQL CLI for operations the Linear MCP server doesn't expose.
|
|
120
|
+
|
|
121
|
+
Covers:
|
|
122
|
+
- Issue creation and triage conventions
|
|
123
|
+
- Tech-stack labels
|
|
124
|
+
- A `linear.mjs` CLI for GraphQL operations
|
|
125
|
+
|
|
126
|
+
### doctl
|
|
127
|
+
|
|
128
|
+
Manage DigitalOcean resources with the doctl CLI.
|
|
129
|
+
|
|
130
|
+
Covers:
|
|
131
|
+
- Auth contexts (per-command `--context` over stateful switching)
|
|
132
|
+
- Resolving the current git repo to its DO context + app
|
|
133
|
+
- App Platform: deployments, bounded polling, logs and their retention quirks
|
|
134
|
+
- App specs: env var/secret round-trips, validation, creating apps
|
|
135
|
+
- `--format` / `-o json` gotchas
|
|
136
|
+
- Managed databases, Spaces keys, droplets, DNS
|
|
137
|
+
|
|
138
|
+
### git-github
|
|
139
|
+
|
|
140
|
+
Git and GitHub (gh CLI) workflows for agents.
|
|
141
|
+
|
|
142
|
+
Covers:
|
|
143
|
+
- Ground rules and the branch → commit → PR loop
|
|
144
|
+
- Reading PR and CI state (`gh pr view --json`, `gh pr checks`)
|
|
145
|
+
- Debugging failed GitHub Actions runs (the full playbook)
|
|
146
|
+
- Repair ladders: rejected pushes, rebase-after-squash-merge, shallow clones, worktrees
|
|
147
|
+
- `gh api` recipes: PR comments, no-checkout file reads, repo settings, PAT gotchas
|
|
148
|
+
- Releases: tags, npm Trusted Publishing, release-please
|
|
149
|
+
- External review loop with the codex CLI
|
|
150
|
+
|
|
151
|
+
### copier-template
|
|
152
|
+
|
|
153
|
+
Maintain a Copier project template and propagate updates to generated repos.
|
|
154
|
+
|
|
155
|
+
Covers:
|
|
156
|
+
- Template anatomy: copier.yml, conditional files, tasks, jinja escaping in CI workflows
|
|
157
|
+
- Testing template changes (`--vcs-ref HEAD`, generate-and-validate)
|
|
158
|
+
- Releasing versions (tag + GitHub Release) and the update-checker workflow pattern
|
|
159
|
+
- Applying `copier update` in descendants: conflict triage, `.rej` files, validation
|
|
160
|
+
|
|
161
|
+
## Contributing a Lesson Back
|
|
162
|
+
|
|
163
|
+
Every skill ends with a **Contributing Back** section: when Claude works through
|
|
164
|
+
something the skill didn't cover, it offers to contribute the lesson upstream. The
|
|
165
|
+
`/contribute-skill` command (shipped in this package and symlinked into
|
|
166
|
+
`.claude/commands/` on install) automates the flow: distill the generic lesson,
|
|
167
|
+
privacy-sweep it, clone or fork this repo, and open a PR against the right skill
|
|
168
|
+
file. PRs from forks are welcome — content must be generic (placeholders only, no
|
|
169
|
+
project-specific names, IDs, or domains).
|
|
170
|
+
|
|
114
171
|
## Adding New Skills
|
|
115
172
|
|
|
116
173
|
1. Create a new plugin directory: `plugins/my-skill/`
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Contribute a lesson learned this session back to the gallop-systems/agent-skills repo as a PR
|
|
3
|
+
argument-hint: [which skill and/or what lesson]
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Contribute a Lesson Back to the Skills Repo
|
|
7
|
+
|
|
8
|
+
You are turning something learned in this session into a PR against
|
|
9
|
+
https://github.com/gallop-systems/agent-skills, the public repo behind the
|
|
10
|
+
installed skills.
|
|
11
|
+
|
|
12
|
+
## 1. Identify the lesson
|
|
13
|
+
|
|
14
|
+
From this session (or from `$ARGUMENTS` if given), pin down:
|
|
15
|
+
|
|
16
|
+
- **The lesson**: usually an error→fix sequence, a behavior that contradicted the
|
|
17
|
+
skill, or a workflow knot the skill didn't cover. It must be something you
|
|
18
|
+
*verified in this session* — not a guess.
|
|
19
|
+
- **The target**: which skill (`doctl`, `git-github`, `copier-template`,
|
|
20
|
+
`kysely-postgres`, `nuxt-nitro-api`, `nitro-testing`, `linear`), and within it,
|
|
21
|
+
whether it belongs in `SKILL.md` or one of its reference `.md` files. Read the
|
|
22
|
+
target file first and match its structure and tone.
|
|
23
|
+
|
|
24
|
+
If the lesson is ambiguous or you can't verify it, stop and clarify with the user.
|
|
25
|
+
|
|
26
|
+
## 2. Genericize — the repo is public
|
|
27
|
+
|
|
28
|
+
Rewrite the lesson with placeholders only: `<app-id>`, `<owner>/<repo>`, `<branch>`,
|
|
29
|
+
`<domain>`. **No project names, client names, UUIDs, IPs, domains, tokens, or file
|
|
30
|
+
paths from the user's codebase.** Keep it tight: the generic rule, a minimal example
|
|
31
|
+
command, and the failure it prevents — in that order.
|
|
32
|
+
|
|
33
|
+
## 3. Clone, edit, verify
|
|
34
|
+
|
|
35
|
+
Work in a temp directory, never in the user's project:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
dir=$(mktemp -d)
|
|
39
|
+
if [ "$(gh api repos/gallop-systems/agent-skills --jq .permissions.push)" = "true" ]; then
|
|
40
|
+
gh repo clone gallop-systems/agent-skills "$dir"
|
|
41
|
+
else
|
|
42
|
+
gh repo fork gallop-systems/agent-skills --clone "$dir" # outside contributors
|
|
43
|
+
fi
|
|
44
|
+
cd "$dir" && git checkout -b feat/<skill>-<short-slug>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Edit the target file under `plugins/<skill>/skills/<skill>/`. Then privacy-sweep
|
|
48
|
+
your diff before committing — grep the changed files for anything resembling the
|
|
49
|
+
user's project (project name, org, hostnames, IDs). If anything hits, fix it.
|
|
50
|
+
|
|
51
|
+
## 4. Commit and open the PR
|
|
52
|
+
|
|
53
|
+
The repo enforces Conventional Commit PR titles (release-please derives versions
|
|
54
|
+
from them). Use `feat(<skill>): <summary>` for new coverage, `fix(<skill>): <summary>`
|
|
55
|
+
for corrections to existing content.
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
git add -A && git commit -m "feat(<skill>): document <lesson summary>"
|
|
59
|
+
git push -u origin <branch>
|
|
60
|
+
gh pr create --repo gallop-systems/agent-skills \
|
|
61
|
+
--title "feat(<skill>): <summary>" \
|
|
62
|
+
--body "<what the lesson is, how it was hit and verified (genericized), why it belongs in this skill>"
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Show the user the PR URL, then clean up: `cd - && rm -rf "$dir"`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gallopsystems/agent-skills",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Gallop Systems Claude Code skills, symlinked into .claude/skills on install.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
"files": [
|
|
11
11
|
"plugins",
|
|
12
|
+
"commands",
|
|
12
13
|
"scripts/link-skills.mjs",
|
|
13
14
|
"README.md"
|
|
14
15
|
],
|
|
@@ -66,3 +66,9 @@ If newer, it pushes a **static branch name** (e.g. `chore/template-update`) with
|
|
|
66
66
|
|
|
67
67
|
- **Template anatomy & testing changes**: [template-authoring.md](template-authoring.md)
|
|
68
68
|
- **Applying an update in a descendant** (the conflict-resolution procedure): [applying-updates.md](applying-updates.md)
|
|
69
|
+
|
|
70
|
+
## Contributing Back
|
|
71
|
+
|
|
72
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the copier-template skill?"**
|
|
73
|
+
|
|
74
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -117,3 +117,9 @@ doctl apps logs <app-id> --type run --follow # live tail (interactive
|
|
|
117
117
|
|
|
118
118
|
- **App specs — env vars, secrets, creating apps**: see [spec-management.md](spec-management.md)
|
|
119
119
|
- **Databases, Spaces, droplets, DNS**: see [other-services.md](other-services.md)
|
|
120
|
+
|
|
121
|
+
## Contributing Back
|
|
122
|
+
|
|
123
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the doctl skill?"**
|
|
124
|
+
|
|
125
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -83,3 +83,9 @@ Do not bypass failing hooks with `--no-verify` unless the user says to.
|
|
|
83
83
|
- **gh api recipes** — PR comments, reading files without checkout, repo settings, PAT gotchas: [gh-api-recipes.md](gh-api-recipes.md)
|
|
84
84
|
- **Releases & publishing** — tags, gh release, npm Trusted Publishing, release-please: [releases.md](releases.md)
|
|
85
85
|
- **External review loop** — using the codex CLI as an adversarial pre-merge reviewer: [external-review.md](external-review.md)
|
|
86
|
+
|
|
87
|
+
## Contributing Back
|
|
88
|
+
|
|
89
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the git-github skill?"**
|
|
90
|
+
|
|
91
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -1099,3 +1099,9 @@ const result = await db
|
|
|
1099
1099
|
- The asserted type must structurally match the actual type (full type safety preserved)
|
|
1100
1100
|
- Apply to several intermediate `with` clauses in large queries
|
|
1101
1101
|
- TypeScript cannot automatically simplify these types - explicit assertion is required
|
|
1102
|
+
|
|
1103
|
+
## Contributing Back
|
|
1104
|
+
|
|
1105
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the kysely-postgres skill?"**
|
|
1106
|
+
|
|
1107
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -1038,3 +1038,9 @@ node linear.mjs rebalance
|
|
|
1038
1038
|
4. **Don't overcommit cycles.** Leave ~20% buffer for bugs, client requests, and interruptions.
|
|
1039
1039
|
5. **Projects identify the client.** No need for client prefixes in issue titles or client labels — the project name (e.g., `[GBX] Portal`) already provides that context.
|
|
1040
1040
|
6. **Triage first.** New client requests go to Backlog, not straight into the sprint — unless truly urgent.
|
|
1041
|
+
|
|
1042
|
+
## Contributing Back
|
|
1043
|
+
|
|
1044
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the linear skill?"**
|
|
1045
|
+
|
|
1046
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -495,3 +495,9 @@ it("updates after user interaction", async () => {
|
|
|
495
495
|
5. **Await everything** - `mountSuspended`, `trigger()`, `nextTick()` are all async.
|
|
496
496
|
|
|
497
497
|
6. **Separate test configs** - Use `VITEST_ENV` to run frontend and backend tests with different environments.
|
|
498
|
+
|
|
499
|
+
## Contributing Back
|
|
500
|
+
|
|
501
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the nitro-testing skill?"**
|
|
502
|
+
|
|
503
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -25,6 +25,7 @@ For detailed patterns, see these topic-focused reference files:
|
|
|
25
25
|
- [auth-patterns.md](./auth-patterns.md) - nuxt-auth-utils, OAuth, WebAuthn, middleware
|
|
26
26
|
- [page-structure.md](./page-structure.md) - Keep pages thin, components do the work
|
|
27
27
|
- [composables-utils.md](./composables-utils.md) - When to use composables vs utils
|
|
28
|
+
- [formatters.md](./formatters.md) - Centralize currency/date/number formatters in useFormatters, never inline
|
|
28
29
|
- [ssr-client.md](./ssr-client.md) - SSR + localStorage, hydration, VueUse
|
|
29
30
|
- [deep-linking.md](./deep-linking.md) - URL params sync with filters and useFetch
|
|
30
31
|
- [nitro-tasks.md](./nitro-tasks.md) - Background jobs, scheduled tasks, job queues
|
|
@@ -258,3 +259,9 @@ const activeProjects = computed(() =>
|
|
|
258
259
|
```
|
|
259
260
|
|
|
260
261
|
This ensures your frontend types stay in sync with your API - if the endpoint return type changes, TypeScript will catch mismatches.
|
|
262
|
+
|
|
263
|
+
## Contributing Back
|
|
264
|
+
|
|
265
|
+
This skill grows by capturing what it missed. If you just worked through something in this domain that this skill did not cover — an error you had to figure out, a behavior that contradicts what is documented above, a workflow knot — ask the user: **"Want me to contribute this back to the nuxt-nitro-api skill?"**
|
|
266
|
+
|
|
267
|
+
If yes, run `/contribute-skill`. If that command is not available, do the equivalent inline: distill the generic lesson (placeholders only — no project names, IDs, domains, or secrets), then branch or fork [gallop-systems/agent-skills](https://github.com/gallop-systems/agent-skills) and open a PR editing this skill.
|
|
@@ -79,6 +79,11 @@ export const usePermissions = () => {
|
|
|
79
79
|
- Data transformations, formatting, parsing
|
|
80
80
|
- NO `use` prefix
|
|
81
81
|
|
|
82
|
+
> **Formatters belong in one shared place.** The examples below show util *placement*,
|
|
83
|
+
> not where to call formatters from. Never define a currency/date/number formatter inline
|
|
84
|
+
> at the call site — centralize them in `useFormatters` or a shared util, and prefer
|
|
85
|
+
> VueUse / date-fns over hand-rolling. See [formatters.md](./formatters.md).
|
|
86
|
+
|
|
82
87
|
```typescript
|
|
83
88
|
// utils/formatting.ts
|
|
84
89
|
export const formatDate = (date: string) => {
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# Formatters (Currency, Dates, Numbers)
|
|
2
|
+
|
|
3
|
+
## Rule: Never define a formatter inline
|
|
4
|
+
|
|
5
|
+
Whenever you need to format a value — currency, dates, times, numbers, percentages,
|
|
6
|
+
file sizes, relative time, etc. — **do not define the formatter inline at the call site.**
|
|
7
|
+
|
|
8
|
+
Before writing any new formatting logic:
|
|
9
|
+
|
|
10
|
+
1. **Check if a shared formatter already exists.** Look for a `useFormatters`
|
|
11
|
+
composable (`/composables/useFormatters.ts`) or a formatting util
|
|
12
|
+
(`/utils/formatters.ts`, `/shared/utils/format.ts`). If a formatter for the value
|
|
13
|
+
you need is already there, **use it.**
|
|
14
|
+
2. **If none exists, create one** in the appropriate shared location, then use it.
|
|
15
|
+
Do not scatter a one-off `Intl.NumberFormat(...)` or `new Date(...).toLocaleString(...)`
|
|
16
|
+
at the call site.
|
|
17
|
+
|
|
18
|
+
This keeps formatting consistent across the app (one source of truth for locale,
|
|
19
|
+
currency, date style) and makes a future change — switching locale, adding a currency,
|
|
20
|
+
tweaking date format — a single edit instead of a hunt-and-replace.
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
// WRONG - inline formatter at the call site
|
|
24
|
+
<template>
|
|
25
|
+
<span>{{ new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(total) }}</span>
|
|
26
|
+
<span>{{ new Date(order.createdAt).toLocaleDateString("en-US", { dateStyle: "medium" }) }}</span>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
// RIGHT - use the shared formatter
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
const { formatCurrency, formatDate } = useFormatters();
|
|
32
|
+
</script>
|
|
33
|
+
<template>
|
|
34
|
+
<span>{{ formatCurrency(total) }}</span>
|
|
35
|
+
<span>{{ formatDate(order.createdAt) }}</span>
|
|
36
|
+
</template>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Reach for existing libraries before hand-rolling
|
|
40
|
+
|
|
41
|
+
Two libraries are almost always already available — prefer them over writing formatting
|
|
42
|
+
or date logic by hand:
|
|
43
|
+
|
|
44
|
+
- **VueUse** ships a broad set of formatting/reactive helpers out of the box (auto-imported
|
|
45
|
+
in Nuxt). Before building your own, check for one of these:
|
|
46
|
+
- `useDateFormat(date, "YYYY-MM-DD HH:mm")` — reactive date formatting
|
|
47
|
+
- `useTimeAgo(date)` — reactive "3 minutes ago" relative time
|
|
48
|
+
- `useNow()` / `useTimestamp()` — reactive current time to drive the above
|
|
49
|
+
- `formatTimeAgo()` — the non-reactive function form
|
|
50
|
+
Wrap these in `useFormatters` when you want a single app-wide configuration point,
|
|
51
|
+
rather than calling them ad hoc at each site.
|
|
52
|
+
|
|
53
|
+
- **date-fns is the preferred way to work with dates.** Do **not** parse, compare, add,
|
|
54
|
+
or diff dates by hand (no manual `string.split("-")`, no `new Date(a) - new Date(b)`
|
|
55
|
+
arithmetic, no hand-rolled "is same day"). Use `date-fns`:
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
import { format, parseISO, formatDistanceToNow, differenceInDays, isSameDay } from "date-fns";
|
|
59
|
+
|
|
60
|
+
format(parseISO(order.createdAt), "MMM d, yyyy"); // "Jun 12, 2026"
|
|
61
|
+
formatDistanceToNow(parseISO(order.createdAt)); // "about 2 hours"
|
|
62
|
+
differenceInDays(parseISO(end), parseISO(start)); // 5
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
// WRONG - parsing/diffing dates by hand
|
|
67
|
+
const [y, m, d] = order.createdAt.split("T")[0].split("-");
|
|
68
|
+
const daysLeft = Math.floor((new Date(end) - new Date(start)) / 86400000);
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Still route date-fns calls through `useFormatters` (or a shared util) rather than
|
|
72
|
+
importing and calling them inline everywhere — same single-source-of-truth reason.
|
|
73
|
+
|
|
74
|
+
## Where to put the formatters
|
|
75
|
+
|
|
76
|
+
Pick the location by what the formatter needs (see [composables-utils.md](./composables-utils.md)):
|
|
77
|
+
|
|
78
|
+
- **Needs Nuxt/Vue context** (e.g. reads locale/currency from `useRuntimeConfig()`,
|
|
79
|
+
`useI18n()`, or user preferences) → **composable** `useFormatters` in
|
|
80
|
+
`/composables/useFormatters.ts`.
|
|
81
|
+
- **Pure, client-only** → **util** in `/utils/formatters.ts`.
|
|
82
|
+
- **Used on both client and server** (e.g. an invoice rendered in SSR *and* in a
|
|
83
|
+
server API response) → **shared util** in `/shared/utils/format.ts`.
|
|
84
|
+
|
|
85
|
+
When in doubt and the formatters are pure, prefer `useFormatters` as a composable so
|
|
86
|
+
there is one obvious, discoverable place to look — and so it can later pull locale
|
|
87
|
+
from context without moving every call site.
|
|
88
|
+
|
|
89
|
+
### Composable form (`useFormatters`)
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
// composables/useFormatters.ts
|
|
93
|
+
export const useFormatters = () => {
|
|
94
|
+
const config = useRuntimeConfig();
|
|
95
|
+
const locale = config.public.locale ?? "en-US";
|
|
96
|
+
const currency = config.public.currency ?? "USD";
|
|
97
|
+
|
|
98
|
+
const currencyFmt = new Intl.NumberFormat(locale, { style: "currency", currency });
|
|
99
|
+
const dateFmt = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
|
|
100
|
+
const dateTimeFmt = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" });
|
|
101
|
+
const numberFmt = new Intl.NumberFormat(locale);
|
|
102
|
+
const percentFmt = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 });
|
|
103
|
+
|
|
104
|
+
return {
|
|
105
|
+
formatCurrency: (amount: number) => currencyFmt.format(amount),
|
|
106
|
+
formatDate: (date: string | Date) => dateFmt.format(new Date(date)),
|
|
107
|
+
formatDateTime: (date: string | Date) => dateTimeFmt.format(new Date(date)),
|
|
108
|
+
formatNumber: (n: number) => numberFmt.format(n),
|
|
109
|
+
formatPercent: (n: number) => percentFmt.format(n),
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
> **Reuse the `Intl.*` instances.** Construct each formatter once (as above), not on
|
|
115
|
+
> every call. `Intl.NumberFormat`/`Intl.DateTimeFormat` construction is comparatively
|
|
116
|
+
> expensive, so building a new one inside a render or a loop is wasteful.
|
|
117
|
+
|
|
118
|
+
### Pure util / shared form
|
|
119
|
+
|
|
120
|
+
If no Nuxt context is needed, the same functions live as plain exports:
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
// shared/utils/format.ts (or utils/formatters.ts for client-only)
|
|
124
|
+
const currencyFmt = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
|
|
125
|
+
const dateFmt = new Intl.DateTimeFormat("en-US", { dateStyle: "medium" });
|
|
126
|
+
|
|
127
|
+
export const formatCurrency = (amount: number) => currencyFmt.format(amount);
|
|
128
|
+
export const formatDate = (date: string | Date) => dateFmt.format(new Date(date));
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Checklist before adding a formatter
|
|
132
|
+
|
|
133
|
+
- [ ] Searched for an existing `useFormatters` / `formatters` / `format` util?
|
|
134
|
+
- [ ] Reusing it if a matching formatter exists?
|
|
135
|
+
- [ ] Checked for a VueUse helper (`useDateFormat`, `useTimeAgo`, …) before hand-rolling?
|
|
136
|
+
- [ ] Using `date-fns` for any date parsing/formatting/math — not hand-parsing strings?
|
|
137
|
+
- [ ] If creating, placed it in the right shared location (composable vs util vs shared)?
|
|
138
|
+
- [ ] Constructed the `Intl.*` instance once, not per call?
|
|
139
|
+
- [ ] Replaced the inline formatting at the call site with the shared function?
|