Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .agents/skills/ark-ui/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
name: ark-ui
description: Check Ark UI primitives via MCP and integrate them in ds-* components without duplicating internal state. Use before building a custom component, wrapping Ark primitives, or when the user mentions Ark UI MCP.
user-invocable: false
---

# Ark UI Skill
Expand Down
53 changes: 53 additions & 0 deletions .agents/skills/ask-matt/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
name: ask-matt
description: Ask which skill or flow fits your situation. A router over the skills in this repo.
disable-model-invocation: true
---

# Ask Matt

You don't remember every skill, so ask. This is the **flow** view — how the skills chain from idea to shipped component. The file-type → skill map (which reference to read when editing a given file) lives in [AGENTS.md](../../../AGENTS.md#project-skills).

## Main flow: idea → ship

The route most component work travels.

1. **Sharpen** — **`/grill-me`** interviews you relentlessly, one question at a time, until every branch of the decision tree is resolved. Switch to **`/grill-with-docs`** when the work touches domain language or irreversible architecture: it challenges against `CONTEXT.md` + ADRs and updates them inline.
2. **Plan** — **`/to-plan`** packages the locked decisions into a short execution plan for the build session. No re-interview, no scope invention — only what was decided.
3. **Build** — scaffold with **`/component-scaffold`** (or **`/figma-to-component`** from a Figma URL), then build test-first with **`/tdd`**, stories with **`/storybook`**, behavior with **`/browser-tests`**, docs coverage with **`/docs-tests`**. Editing a specific file pulls its reference: `/component-api`, `/react-patterns`, `/ark-ui`, `/scss`, `/ts-standards`.
4. **Ship** — **`/pr-prep`** runs the checks + changeset; **`/code-review`** does the two-axis (Standards + Spec) review of the diff before you push.

## On-ramps

A starting situation that generates work, then merges onto the main flow.

- **Something's broken** → **`/diagnose`**: reproduce → minimize → hypothesize → instrument → fix, refusing to theorize until a **tight feedback loop** goes red on _this_ bug. Lock it down with a **`/tdd`** regression test.
- **Old Storybook `play` tests** → **`/migrate-story-tests`** converts them to **`/browser-tests`**.

## Codebase health

Not feature work — upkeep.

- **`/improve-codebase-architecture`** — surface **deepening opportunities** against `CONTEXT.md`; picking one feeds an idea back into the main flow at `/grill-me`. It's the survey that finds candidates; **`/codebase-design`** is the bench you design the chosen module on.

## Vocabulary underneath

Model-invoked references — reach for them when the **words**, not the process, are the problem; or let the skills above pull them in.

- **`/domain-modeling`** — sharpen the project's _domain_ language: resolve an overloaded term, record a hard-to-reverse decision as an ADR. The discipline `/grill-with-docs` drives to keep `CONTEXT.md` a clean glossary.
- **`/codebase-design`** — deep-module vocabulary (module, interface, depth, seam, leverage, locality) for designing a module's _shape_: a lot of behavior behind a small interface at a clean seam.

## Crossing sessions

- **`/handoff`** — compact the conversation into a markdown file so a **fresh session** can pick up. Forks the context; reference the file from the new thread.
- **`/compact`** (built-in) — stay in the **same conversation**, summarizing earlier turns. Use at phase breaks, not mid-phase. `/handoff` forks; `/compact` continues.

## Standalone

Off the main flow entirely.

- **`/research`** — a **background agent** investigates a question against **primary sources** and leaves a cited Markdown file in the repo. Keep working while it reads.
- **`/teach`** — learn a concept over multiple sessions, using the workspace as stateful scratch.
- **`/get-pr-comments`** — fetch and summarize the active PR's review comments.
- **`/deslop`** — strip AI-generated slop and fix style on a diff.
- **`/write-a-skill`** — author a new skill in `.agents/skills/`.
1 change: 1 addition & 0 deletions .agents/skills/browser-tests/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
name: browser-tests
description: Write and extend Vitest browser tests for design-system components. Use when adding or editing `*.browser.test.tsx`, writing behavioral coverage, or moving assertions out of Storybook.
user-invocable: false
---

# Browser Tests Skill
Expand Down
37 changes: 37 additions & 0 deletions .agents/skills/codebase-design/DEEPENING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Deepening

How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [SKILL.md](SKILL.md) — **module**, **interface**, **seam**, **adapter**.

## Dependency categories

When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam.

### 1. In-process

Pure computation, in-memory state, no I/O. Always safe to deepen — merge the modules and test through the new interface directly. No adapter needed.

### 2. Local-substitutable

Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Safe to deepen if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface.

### 3. Remote but owned (Ports & Adapters)

Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter.

Recommendation shape: _"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."_

### 4. True external (Mock)

Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter.

## Seam discipline

- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection.
- **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them.

## Testing strategy: replace, don't layer

- Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them.
- Write new tests at the deepened module's interface. The **interface is the test surface**.
- Tests assert on observable outcomes through the interface, not internal state.
- Tests should survive internal refactors — they describe behavior, not implementation. If a test has to change when the implementation changes, it's testing past the interface.
44 changes: 44 additions & 0 deletions .agents/skills/codebase-design/DESIGN-IT-TWICE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Design It Twice

When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" — your first idea is unlikely to be the best.

Uses the vocabulary in [SKILL.md](SKILL.md) — **module**, **interface**, **seam**, **adapter**, **leverage**.

## Process

### 1. Frame the problem space

Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate:

- The constraints any new interface would need to satisfy
- The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md))
- A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete

Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel.

### 2. Spawn sub-agents

Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module.

Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint:

- Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximize leverage per entry point."
- Agent 2: "Maximize flexibility — support many use cases and extension."
- Agent 3: "Optimize for the most common caller — make the default case trivial."
- Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies."

Include both [SKILL.md](SKILL.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language.

Each sub-agent outputs:

1. Interface (types, methods, params — plus invariants, ordering, error modes)
2. Usage example showing how callers use it
3. What the implementation hides behind the seam
4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md))
5. Trade-offs — where leverage is high, where it's thin

### 3. Present and compare

Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**.

After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu.
114 changes: 114 additions & 0 deletions .agents/skills/codebase-design/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
---
name: codebase-design
description: Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
---

# Codebase Design

Design **deep modules**: a lot of behavior behind a small interface, placed at a clean seam, testable through that interface. Use this language and these principles wherever code is being designed or restructured. The aim is leverage for callers, locality for maintainers, and testability for everyone.

## Glossary

Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point.

**Module** — anything with an interface and an implementation. Deliberately scale-agnostic: a function, class, package, or tier-spanning slice. _Avoid_: unit, component, service.

**Interface** — everything a caller must know to use the module correctly: the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics. _Avoid_: API, signature (too narrow — they refer only to the type-level surface).

**Implementation** — what's inside a module, its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise.

**Depth** — leverage at the interface: the amount of behavior a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behavior sits behind a small interface, **shallow** when the interface is nearly as complex as the implementation.

**Seam** _(Michael Feathers)_ — a place where you can alter behavior without editing in that place; the _location_ at which a module's interface lives. Where to put the seam is its own design decision, distinct from what goes behind it. _Avoid_: boundary (overloaded with DDD's bounded context).

**Adapter** — a concrete thing that satisfies an interface at a seam. Describes _role_ (what slot it fills), not substance (what's inside).

**Leverage** — what callers get from depth: more capability per unit of interface they learn. One implementation pays back across N call sites and M tests.

**Locality** — what maintainers get from depth: change, bugs, knowledge, and verification concentrate in one place rather than spreading across callers. Fix once, fixed everywhere.

## Deep vs shallow

**Deep module** = small interface + lots of implementation:

```
┌─────────────────────┐
│ Small Interface │ ← Few methods, simple params
├─────────────────────┤
│ │
│ Deep Implementation│ ← Complex logic hidden
│ │
└─────────────────────┘
```

**Shallow module** = large interface + little implementation (avoid):

```
┌─────────────────────────────────┐
│ Large Interface │ ← Many methods, complex params
├─────────────────────────────────┤
│ Thin Implementation │ ← Just passes through
└─────────────────────────────────┘
```

When designing an interface, ask:

- Can I reduce the number of methods?
- Can I simplify the parameters?
- Can I hide more complexity inside?

## Principles

- **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface.
- **The deletion test.** Imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep.
- **The interface is the test surface.** Callers and tests cross the same seam. If you want to test _past_ the interface, the module is probably the wrong shape.
- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it.

## Designing for testability

Good interfaces make testing natural:

1. **Accept dependencies, don't create them.**

```typescript
// Testable
function processOrder(order, paymentGateway) {}

// Hard to test
function processOrder(order) {
const gateway = new StripeGateway();
}
```

2. **Return results, don't produce side effects.**

```typescript
// Testable
function calculateDiscount(cart): Discount {}

// Hard to test
function applyDiscount(cart): void {
cart.total -= discount;
}
```

3. **Small surface area.** Fewer methods = fewer tests needed. Fewer params = simpler test setup.

## Relationships

- A **Module** has exactly one **Interface** (the surface it presents to callers and tests).
- **Depth** is a property of a **Module**, measured against its **Interface**.
- A **Seam** is where a **Module**'s **Interface** lives.
- An **Adapter** sits at a **Seam** and satisfies the **Interface**.
- **Depth** produces **Leverage** for callers and **Locality** for maintainers.

## Rejected framings

- **Depth as ratio of implementation-lines to interface-lines**: rewards padding the implementation. We use depth-as-leverage instead.
- **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow — interface here includes every fact a caller must know.
- **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**.

## Going deeper

- **Deepening a cluster given its dependencies** — see [DEEPENING.md](DEEPENING.md): dependency categories, seam discipline, and replace-don't-layer testing.
- **Exploring alternative interfaces** — see [DESIGN-IT-TWICE.md](DESIGN-IT-TWICE.md): spin up parallel sub-agents to design the interface several radically different ways, then compare on depth, locality, and seam placement.
1 change: 1 addition & 0 deletions .agents/skills/component-api/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
name: component-api
description: Design public props for ds-* components in *.types.ts files. Use when editing ds-*.types.ts, Ds*Props interfaces, variant as const arrays, locale prop, onXChange callbacks, or changing component public API.
user-invocable: false
---

# Component API Skill
Expand Down
22 changes: 2 additions & 20 deletions .agents/skills/component-scaffold/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
name: component-scaffold
description: Scaffold a new ds-* component (files, barrel export, validation). Use when the user asks to create, scaffold, or add a new component.
user-invocable: false
disable-model-invocation: true
---

# Component Scaffold Skill
Expand Down Expand Up @@ -66,23 +68,3 @@ export type { Ds{Name}Props } from './ds-{name}.types';
```

Set `displayName` on the component in `ds-{name}.tsx` (or `index.ts` if wrapped). Stories must import from `./index` when a barrel/HOC is the public API.

Use `.ts` extension on barrel file, not `.tsx`.

## Validate

```bash
pnpm eslint packages/design-system/src/components/ds-{name}/
pnpm --filter @drivenets/design-system typecheck
```

With browser tests:

```bash
pnpm --filter @drivenets/design-system test packages/design-system/src/components/ds-{name}/__tests__/ds-{name}.browser.test.tsx --run
```

## Related

- Figma URL: [figma-to-component](../figma-to-component/SKILL.md) then this flow
- PR checks: [pr-prep](../pr-prep/SKILL.md)
1 change: 1 addition & 0 deletions .agents/skills/docs-tests/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
name: docs-tests
description: Write and run Storybook docs snippet tests (`*.docs.test.ts`) for Show code and MCP manifest verification against production storybook-static. Use when adding or editing docs tests or verifying Autodocs snippets after story changes.
user-invocable: false
---

# Docs Tests Skill
Expand Down
Loading
Loading