Development skills
When to use Emil Kowalski's and Matt Pocock's skills while building Pathfinder.
Skills guide implementation and review. Our package contract, Figma decisions, lint rules, and compiler checks remain the source of truth. Use the relevant skill for the work at hand; reading every skill is not a contribution requirement.
UI and motion
Use skills from Emil's official repository:
| Skill | Use it for |
|---|---|
break-ui | Stress-testing realistic content and layout limits in new or substantially changed components. |
emil-design-eng | Component polish, interaction states, typography, and visual review. |
animate | Building motion with a clear purpose, reduced-motion handling, and existing tokens. |
review-animations | Reviewing timing, interruption, origin, and reduced-motion behavior. |
animation-performance | Investigating dropped frames with browser/device evidence. |
improve-animations | A broader motion audit and improvement plan. |
Preserve Base UI semantics and React 18/19 support. Verify animation recipes against our supported browsers. A skill does not authorize introducing a new motion library, overriding Figma, or assuming a performance optimization works without measurement.
Worst-case testing
Keep realistic synthetic fixtures beside stories. Use a Storybook-only Demo data / Worst case control that changes props through the same interface. Keep this harness out of the package bundle and enterprise production UI.
Cover long/unbreakable labels, short labels, non-Latin text, and emoji. For components that support them, also cover missing data/media, empty and single-item collections, large counts, and disabled states. Record input limits or note that none are defined. Do not invent unsupported loading/variant APIs for the test.
Check the actual container, 320px, the widest supported layout, and 200% browser zoom. Check dark mode and RTL only when supported, and record missing coverage. Keep keyboard and accessibility checks alongside these layout checks.
Record the fixture, story URL, viewport/zoom, severity, expected and actual behavior, source location, proposed fix, and screenshots where available. Distinguish observed failures from code-only concerns. Record what held up too. Resolve design choices against Figma/the component spec, then recheck both datasets after fixing.
The Button's existing long-label story is a starting point. A complete break-ui
audit is still pending; installing the skill does not mean that audit has passed.
TypeScript, APIs, and tests
Use skills from Matt's official repository:
| Skill | Pathfinder application |
|---|---|
tdd | One failing behavior test followed by its implementation, using the public test surface agreed in the component spec. |
codebase-design | Small public APIs that hide useful behavior and are straightforward to test. |
setup-ts-deep-modules | Optional package-boundary reference. Its setup migration is not part of our workflow. |
Matt's reviewed repository has no general skill named typescript.
setup-ts-deep-modules concerns architecture; our existing typescript-advanced-types
skill and TypeScript documentation cover types and compiler behavior.
Keep the pnpm workspace layout, explicit package exports, and colocated component tests. Do not replace them with the skill's example layout or automatically install dependency-cruiser. Public type checks still exercise Bundler and NodeNext consumers; lint and packed-package checks enforce the existing contract.
Install and maintain
These are local agent tools, not package dependencies or CI executables. For Codex:
npx skills add emilkowalski/skills --skill break-ui animate animation-performance emil-design-eng review-animations improve-animations --agent codex --global
npx skills add mattpocock/skills --skill setup-ts-deep-modules tdd codebase-design --agent codex --globalThe commands resolve current upstream versions. Review updates before adopting them. Locally installed skills become available on the next Codex turn. These docs, including this guide, also appear in Pathfinder's AI-readable Markdown endpoints.