Prompt Templates

Read the current Sketch document's color variables, text styles, and layer styles.
Use Sketch MCP `run_code` to execute:

const doc = sketch.getDocument();
const colors = doc.colors.map(c => ({ name: c.name, color: c.color }));
const textStyles = doc.sharedTextStyles.map(s => ({
  name: s.name,
  fontFamily: s.style.fontFamily,
  fontSize: s.style.fontSize,
  lineHeight: s.style.lineHeight,
}));
const layerStyles = doc.sharedLayerStyles.map(s => ({
  name: s.name,
  fills: s.style.fills,
  borders: s.style.borders,
  shadows: s.style.shadows,
}));
JSON.stringify({ colors, textStyles, layerStyles }, null, 2);

Then update packages/tokens/src/defaults.ts with any changed values.
Run `pnpm design:generate` to regenerate tokens.css.

Update the Sketch document's color variables to match code tokens.
Use Sketch MCP `run_code` with the script generated by:
  cd tools/sketch-bridge && npx tsx src/push-tokens.ts
This outputs SketchAPI code that sets all color variables.

Compare code tokens with Sketch document state.
1. Read Sketch colors/styles via `run_code` (same script as pull-tokens)
2. Read packages/tokens/src/defaults.ts
3. Report:
   - In sync: tokens matching in both
   - Drifted: tokens with different values (show code vs sketch)
   - Missing in Sketch: tokens in code but not in Sketch
   - Missing in code: Sketch styles not mapped to tokens

Capture the Sketch symbol named "[Category] / [Component] / [Variant]".
Use `get_selection_as_image` to screenshot the current selection.
Compare with the code component rendered in the Designer app.
Report visual differences.

Audit all Sketch symbol names and fix naming violations.
Use Sketch MCP `run_code`:

const doc = sketch.getDocument();
const symbols = doc.getSymbols();
const issues = [];

symbols.forEach(sym => {
  // Check: must use " / " separator (space-slash-space)
  if (sym.name.includes('/') && !sym.name.includes(' / ')) {
    issues.push({ name: sym.name, issue: 'Missing spaces around /' });
  }
  // Check: must start with a known category
  const categories = ['Primitives', 'Layout', 'Display', 'Navigation', 'Overlay', 'Map', 'Editor', 'Blocks', 'Pages'];
  const prefix = sym.name.split(' / ')[0];
  if (!categories.includes(prefix)) {
    issues.push({ name: sym.name, issue: `Unknown category: ${prefix}` });
  }
});

JSON.stringify(issues, null, 2);

Then fix each issue by renaming via `run_code`:
  sym.name = "Correct / Name / Here";

Create a new Sketch symbol for the component [ComponentName].
1. Read packages/ui/src/components/[name]/[name].module.css for visual properties
2. Read packages/ui/src/components/[name]/[name].tsx for structure and variants
3. In Sketch, create symbol named "[Category] / [ComponentName]"
4. For each variant, create "[Category] / [ComponentName] / [VariantName]"
5. Apply token values from Sketch color variables and text styles

I need to create a new shared UI component called [ComponentName].

Follow the design system rules in CLAUDE.md:
1. Create folder: packages/ui/src/components/[name]/
2. Create files: [name].tsx, [name].module.css, index.ts
3. Use CSS Modules with design tokens (var(--color-*), var(--space-*), etc.)
4. Use cx() from packages/ui/src/utils/variants for conditional classes
5. Export from packages/ui/src/index.ts
6. Add to Designer app component list in apps/designer/src/app/components/page.tsx
7. Create preview page at apps/designer/src/app/components/[name]/page.tsx

The component should: [describe what it does]
Props: [list expected props]
Variants: [list variants if any]

I need to create a new view called [ViewName].

Follow the design system rules:
1. Create folder: packages/ui/src/views/[name]/
2. Create files: [name].view.tsx, [name].module.css, [name].meta.ts, index.ts
3. Add meta to VIEW_REGISTRY in packages/ui/src/views/index.ts
4. Create fixture data in packages/ui/src/fixtures/ if needed
5. Views are presentation-only — accept data as props, never fetch

The view should render: [describe layout sections]
Props: [list expected props]
Variants: [list variants — e.g. desktop/mobile/panel]

I need to add a new design token.

Follow the token naming rules:
1. Key: [category]-[name] in kebab-case
2. CSS var: --[key]
3. Label: Title Case for the Designer gallery
4. Add to packages/tokens/src/definitions.ts (TOKEN_DEFINITIONS array)
5. Add default value to packages/tokens/src/defaults.ts
6. Run pnpm design:generate to regenerate tokens.css
7. If this is a color token, add Sketch mapping: "Colors / [Label]"

Token details:
- Category: [colors|typography|spacing|radii|shadows|motion]
- Key: [key]
- Default value: [value]

I need to add a new tenant configuration for [TenantName].

Follow the tenant rules:
1. Create packages/tokens/src/tenants/[slug].json with only the overrides (not the full token set)
2. Add the tenant to apps/designer/src/components/designer-context.tsx TENANT_OVERRIDES
3. Preview in Designer at /tenants to verify branding

Tenant branding:
- Brand color: [hex]
- Accent color: [hex]
- Heading font: [font name]
- Any other token overrides: [list]

I need to migrate [ComponentName] from [inline styles / Tailwind] to CSS Modules.

Follow the migration rules:
1. Create [name].module.css alongside the .tsx file
2. Extract ALL static inline styles / Tailwind classes to CSS Module classes
3. Use design tokens: var(--color-*), var(--space-*), var(--radius-*), etc.
4. Only keep style={{}} for truly dynamic values (computed at runtime)
5. Use cx() for conditional classes instead of ternary className strings
6. Never use !important
7. Max 2 levels of CSS nesting
8. Responsive via @media (640px sm, 768px tablet, 1280px desktop)

File location: [path to current component]
Current styling approach: [inline styles / Tailwind / mixed]

I need fixture data for [entity type] to preview in the Designer app.

Follow the fixture patterns in packages/ui/src/fixtures/:
1. Create or update the fixture file in packages/ui/src/fixtures/
2. Use realistic data (Miami real estate themed)
3. Include all required fields from the TypeScript type
4. Use Unsplash URLs for images (?w=800&h=600&fit=crop)
5. Keep IDs consistent with other fixtures (use fixture-N, building-N, neighborhood-N prefixes)
6. Export from packages/ui/src/fixtures/index.ts

Entity type: [properties / buildings / neighborhoods / workspace-config]
How many items: [number]
Special requirements: [any specific data needs]