This skill should be used when the user asks to "update canary types", "sync schema", "update API types", "fix canary-client", "propagate schema changes", or mentions canary-types, canary-client, or OpenAPI schema updates. Provides knowledge about the codebase structure for schema update workflows.
Provides knowledge for updating OpenAPI schema changes across the Qogita frontend monorepo.
/plugin marketplace add oskar-dragon/claude-code/plugin install canary-update@claude-codeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill provides context for updating and propagating OpenAPI schema changes across the Qogita frontend monorepo.
| Component | Path | Purpose |
|---|---|---|
| Canary Types | packages/canary-types/ | Generated TypeScript types from OpenAPI |
| Canary Client | packages/canary-client/src/client.ts | API client methods using canary-types |
| Test Factories | packages/test-factories/ | Shared test data factories |
| Buyers Data Layer | apps/buyers/src/core/data-layer/ | Server-side data fetching for buyers |
| Sellers Data Layer | apps/sellers/src/deprecated/api/ | React Query hooks for sellers |
| Buyers Network Handlers | apps/buyers/src/test/network-handlers/ | MSW handlers for buyers tests |
| Sellers Network Handlers | apps/sellers/test/network-handlers/ | MSW handlers for sellers tests |
OpenAPI Spec → canary-types → canary-client → data-layer → network-handlers
↓
test-factories
Run the type generation command:
pnpm --filter canary-types type:update
This regenerates TypeScript types from the OpenAPI specification.
After type generation, analyze the git diff to identify:
Use git diff to see changes:
git diff packages/canary-types/
The canary-client at packages/canary-client/src/client.ts contains methods that:
@qogita/canary-typeskyWhen types change:
Buyers App (apps/buyers/src/core/data-layer/):
@qogita/canary-typesSellers App (apps/sellers/src/deprecated/api/):
*-queries.ts (user-queries.ts, sale-queries.ts, etc.)@qogita/canary-typesNetwork handlers mock API responses for testing:
Buyers (apps/buyers/src/test/network-handlers/):
server/ - Handlers for server-side testsbrowser/ - Handlers for browser testsSellers (apps/sellers/test/network-handlers/):
server/ - Handlers for server-side testsTest factories at packages/test-factories/ provide typed test data:
@qogita/canary-typesRun these commands to validate changes:
# Type checking
turbo type-check
# Linting
turbo lint
# Formatting
turbo format
# Unused exports check
turbo unused-exports
For targeted validation:
# Check specific packages
turbo type-check --filter=@qogita/canary-client
turbo type-check --filter=buyers
turbo type-check --filter=sellers
When a type is removed or significantly changed:
rg "TypeName" --type tsWhen new functions are added to canary-client but aren't used yet in data layers, the turbo unused-exports check will fail. For new functions that are intentionally not yet in use, add suppression comments:
// TODO: Remove ts-unused-exports:disable-next-line once this function is in use
// ts-unused-exports:disable-next-line
export function newApiMethod() { ... }
When to use suppression:
When NOT to use suppression:
The schema-validator agent handles this automatically for function exports.
Common mappings between canary-client methods and data layer files:
| Domain | Client Methods | Buyers Data Layer | Sellers Data Layer |
|---|---|---|---|
| User | getUser, updateUser | user.ts | user-queries.ts |
| Cart | getActiveCart, createCartLine | cart.ts | - |
| Order | getOrders, getOrder | order.ts | - |
| Sale | getSales, updateSale | - | sale-queries.ts |
| Address | getAddresses, createAddress | address.ts | address-queries.ts |
| Claim | getClaim, createClaim | claim.ts | claim-queries.ts |
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.