# Development skills

Package: @commenda/pathfinder@0.1.0
Page: /docs/guides/development-skills

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 [#ui-and-motion]

Use skills from [Emil's official repository](https://github.com/emilkowalski/skills):

| 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 [#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 [#typescript-apis-and-tests]

Use skills from [Matt's official repository](https://github.com/mattpocock/skills):

| 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 [#install-and-maintain]

These are local agent tools, not package dependencies or CI executables. For Codex:

```sh
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 --global
```

The 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.