feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
61
skills/vercel-react-native-skills/rules/js-hoist-intl.md
Normal file
61
skills/vercel-react-native-skills/rules/js-hoist-intl.md
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Hoist Intl Formatter Creation
|
||||
impact: LOW-MEDIUM
|
||||
impactDescription: avoids expensive object recreation
|
||||
tags: javascript, intl, optimization, memoization
|
||||
---
|
||||
|
||||
## Hoist Intl Formatter Creation
|
||||
|
||||
Don't create `Intl.DateTimeFormat`, `Intl.NumberFormat`, or
|
||||
`Intl.RelativeTimeFormat` inside render or loops. These are expensive to
|
||||
instantiate. Hoist to module scope when the locale/options are static.
|
||||
|
||||
**Incorrect (new formatter every render):**
|
||||
|
||||
```tsx
|
||||
function Price({ amount }: { amount: number }) {
|
||||
const formatter = new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
})
|
||||
return <Text>{formatter.format(amount)}</Text>
|
||||
}
|
||||
```
|
||||
|
||||
**Correct (hoisted to module scope):**
|
||||
|
||||
```tsx
|
||||
const currencyFormatter = new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
})
|
||||
|
||||
function Price({ amount }: { amount: number }) {
|
||||
return <Text>{currencyFormatter.format(amount)}</Text>
|
||||
}
|
||||
```
|
||||
|
||||
**For dynamic locales, memoize:**
|
||||
|
||||
```tsx
|
||||
const dateFormatter = useMemo(
|
||||
() => new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }),
|
||||
[locale]
|
||||
)
|
||||
```
|
||||
|
||||
**Common formatters to hoist:**
|
||||
|
||||
```tsx
|
||||
// Module-level formatters
|
||||
const dateFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' })
|
||||
const timeFormatter = new Intl.DateTimeFormat('en-US', { timeStyle: 'short' })
|
||||
const percentFormatter = new Intl.NumberFormat('en-US', { style: 'percent' })
|
||||
const relativeFormatter = new Intl.RelativeTimeFormat('en-US', {
|
||||
numeric: 'auto',
|
||||
})
|
||||
```
|
||||
|
||||
Creating `Intl` objects is significantly more expensive than `RegExp` or plain
|
||||
objects—each instantiation parses locale data and builds internal lookup tables.
|
||||
Reference in New Issue
Block a user