PetriLahdelma

Creates and modifies Digitaltableteur UI components, layout patterns, Storybook stories, contracts, and design tokens under nextjs-app/shared/. Use when the user says "new component", "scaffold component", "Storybook story", "design system", "CSS Modules", "component contract", "validate:components", or edits files in shared/components or shared/patterns. Do NOT use for Next.js page routes (use dt-nextjs-app) or API endpoints (use dt-api-routes).

Find and reuse existing @dt design-system components before creating new UI. Use when the user asks which component to use, wants to avoid duplicating UI, needs import guidance, or says "reuse component", "what should I use for", "find component", "dogfood audit", or "existing primitive for".

Maintain the homepage news bulletin (three topical slots above the footer). Use when the user asks to add, replace, remove, or update a bulletin item, or says "news bulletin", "bulletin slot", or "top of mind" homepage snippets.

Expert guidance for React 19+, Next.js 16, TypeScript, CSS Modules, and modern frontend architecture. Use when building components, implementing features, optimizing performance, or working with React hooks, state management, routing, or frontend tooling. Includes accessibility (a11y), internationalization (i18n), and design system integration.

Builds and fixes Digitaltableteur Next.js 16 App Router pages, layouts, metadata, OG images, sitemap, and robots under app/. Use when the user says "add a page", "opengraph", "OG image", "generateMetadata", "page.tsx", "layout.tsx", "sitemap", "async params", or edits app/ routes. Do NOT use for UI component internals (use dt-design-system) or app/api route handlers (use dt-api-routes).

Runs Claude Code dynamic workflows (ultracode) on partitionable Digitaltableteur tasks with objective verification bars. Use when the user says "workflow", "ultracode", "bulk sweep", "parallel migration", "promote all components", or wants autonomous multi-agent work with tests as the done gate. Do NOT use for single-file edits, subjective design decisions, or shipping PRs (use dt-ship-pr).

Expert guidance for React 19+, Next.js 16, TypeScript, CSS Modules, and modern frontend architecture. Use when building components, implementing features, optimizing performance, or working with React hooks, state management, routing, or frontend tooling. Includes accessibility (a11y), internationalization (i18n), and design system integration.

Accessibility review for digitaltableteur using Sanna's a11y.ing demo checklist and testing philosophy. Use before shipping UI, when adding pages to the a11y registry, or when axe passes but voice control or screen reader UX may still fail.

Use when the user mentions AGENTS.md, CLAUDE.md, copilot-instructions, Cursor rules, project brief, context for coding agents, agency kickoff, onboarding a new project, or asks "how do I set up Project Spine". This is the orientation skill — reach for it FIRST when the user's intent involves Project Spine, then chain into a more specific active skill.

Use when the user asks about Project Spine hosted workspaces, team sync, shared workspace templates, invites, or commands such as `spine login`, `spine workspace`, `spine publish`, or `spine drift check --push`.

Use when the user wants to set up Project Spine for a new project — phrases like "new client project", "kickoff", "create AGENTS.md from scratch", "generate agent instructions for this repo", "set up project context". Runs `spine init` → edits brief → `spine compile` → reviews outputs. For stale files use project-spine-drift.

Use when the user mentions drift, says AGENTS.md / CLAUDE.md / copilot-instructions / Cursor rules are "stale" or "out of date", asks about CI catching docs drift, or says "check if my spine is still current". Runs `spine drift check`, interprets each drift category, and guides resolution. For initial setup use project-spine-kickoff.

Use when the user wants to review, polish, or share the generated Project Spine rationale file locally. Phrases like "show the project rationale", "send the client a project summary", "review rationale.md", or "make the client-facing overview safer".

Use when the user wants to apply a bundled, user-local, or project-local template to a new project, or save the current project as a reusable template. Phrases like "use our agency starter", "save this as a template for future clients", "apply the shared saas-marketing starter".