Skip to content

Commit f733fc7

Browse files
kirill-konshinkirill-konshin
committed
Agent refactoring
1 parent fb14755 commit f733fc7

File tree

21 files changed

+1174
-970
lines changed

21 files changed

+1174
-970
lines changed

‎.augment/rules/agents.md‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1-
# Agent Task Management
1+
# Agent Rules
22

3-
ALWAYS create tasks and subtasks for any non-trivial work to ensure progress is visible and trackable. This includes:
3+
General agent rules are provided by `@kirill.konshin/agents` package.
4+
See: `packages/agents/rules/01-agents.md`
45

5-
- Breaking down complex requests into individual subtasks
6-
- Creating a task for each file or component that needs to be modified
7-
- Marking tasks as IN_PROGRESS when starting work and COMPLETE when finished
8-
- Adding new subtasks as they are discovered during work
9-
10-
Do not wait for the user to ask for task tracking - proactively use task management tools.
11-
12-
# Build and Test Verification
6+
# Build and Test Verification (Repo-Specific)
137

148
ALWAYS verify that the package builds successfully and tests pass after making changes:
159

‎.augment/rules/changesets.md‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
# Changesets
22

3-
Normal flow: create branch, create MR, add changesets, merge MR.
3+
General changesets rules are provided by `@kirill.konshin/agents` package.
4+
See: `packages/agents/rules/02-changesets.md`
45

5-
Quick flow: locally run `yarn changeset`, then `yarn changeset version` and then CI will publish.
6+
# Repo-Specific
67

7-
# Megapackage vs individual packages
8+
Current state: individual packages.
89

9-
- **Megapackage**: All packages are bundled into a single package
10-
- ✅Easier to consume, one install and import to use
11-
- ❌Larger bundle sizes and slower installs
12-
- **Individual packages**: Each package is published separately, which allows for smaller bundle sizes and faster installs.
13-
- ❌More complex dependency management and versioning for consumers, but NPM should warn (TODO check)
14-
- ✅Easier to adopt and requires less commitment from consumers
15-
- ✅Looks cleaner
16-
17-
Current state: individual packages. Used to be megapackage, now abandoned.
10+
Used to be megapackage, now abandoned.

‎.augment/rules/react.md‎

Lines changed: 2 additions & 248 deletions
Original file line numberDiff line numberDiff line change
@@ -1,248 +1,2 @@
1-
---
2-
type: always_apply # or agent_requested
3-
description: React patterns # Required for agent_requested
4-
---
5-
6-
_EVERY_ React component must adhere to policy unless explicitly prohibited in comment before the component definition.
7-
8-
## Extracting props from other library components
9-
10-
```tsx
11-
import React, { ComponentProps, FC } from 'react';
12-
import Link, { LinkProps } from 'next/link'; // example component
13-
14-
export const AppLink: FC<
15-
LinkProps & ComponentProps<typeof Link> // if LinkProps are available prefer it, otherwise extract from Link (Link is used as example)
16-
> = function AppLink({ href, children, ...props }) {
17-
return (
18-
<Link href={href} {...props}>
19-
{children}
20-
</Link>
21-
);
22-
};
23-
```
24-
25-
## Component Pattern
26-
27-
Prefer using memoized components. Use `FC<Props> = memo(...)` pattern to ensure compatibility with TypeScript's `--isolatedDeclarations` flag:
28-
29-
```tsx
30-
import { FC, memo } from 'react';
31-
32-
export type CmpProps = {
33-
foo: string;
34-
};
35-
36-
export const Cmp: FC<CmpProps> = memo(function Cmp({ foo, ...props }) {
37-
// code here
38-
});
39-
```
40-
41-
If memo is not applicable:
42-
43-
```tsx
44-
import { FC } from 'react';
45-
46-
export type CmpProps = {
47-
foo: string;
48-
};
49-
50-
export const Cmp: FC<CmpProps> = function Cmp({ foo, ...props }) {
51-
// code here
52-
};
53-
```
54-
55-
If `CmpProps` will be empty use `export type CmpProps = never;`.
56-
57-
## Import Order
58-
59-
Organize imports in this order:
60-
61-
1. React imports first
62-
2. Third-party library imports
63-
3. Local imports (relative paths)
64-
65-
```tsx
66-
import React, { FC, memo, useState, useCallback } from 'react';
67-
import { Button, Modal } from 'react-bootstrap';
68-
import clsx from 'clsx';
69-
70-
import { GenericControl } from './genericControl';
71-
import { create, Validation } from './form';
72-
```
73-
74-
## Client Components
75-
76-
Use `'use client';` directive at the top of files that use client-side features:
77-
78-
```tsx
79-
'use client';
80-
81-
import { useRouter } from 'next/navigation';
82-
import { FC, memo, useEffect } from 'react';
83-
```
84-
85-
## Props Patterns
86-
87-
### Children Prop
88-
89-
Always type `children` as `any` for flexibility:
90-
91-
```tsx
92-
export type LoadingProps = {
93-
children?: any;
94-
show?: boolean;
95-
};
96-
```
97-
98-
### Default Props
99-
100-
Use default parameter values in destructuring:
101-
102-
```tsx
103-
export const Loading: FC<LoadingProps> = memo(function Loading({
104-
children = 'Loading...' as any,
105-
show = true,
106-
className = '',
107-
size,
108-
}) {
109-
// ...
110-
});
111-
```
112-
113-
### Extending Library Props
114-
115-
Extend library component props with intersection types:
116-
117-
```tsx
118-
export type GenericControlProps = FormControlProps & { children: any };
119-
120-
export type AppLinkProps = {
121-
children: any;
122-
exact?: boolean;
123-
activeClassName?: any;
124-
} & LinkProps &
125-
ComponentProps<typeof Link>;
126-
```
127-
128-
## Hook Patterns
129-
130-
### Custom Hooks
131-
132-
Return explicit types for custom hooks:
133-
134-
```tsx
135-
export function useModal({ onClose, showOnMount }: UseModalArgs = {}): {
136-
show: boolean | undefined;
137-
close: () => void;
138-
open: () => void;
139-
ModalDialog: FC<ModalProps>;
140-
} {
141-
// ...
142-
}
143-
```
144-
145-
### Hook with Callbacks
146-
147-
Use `useCallback` for functions passed to children or used in dependencies:
148-
149-
```tsx
150-
const close = useCallback((): void => {
151-
setShow(false);
152-
onClose?.();
153-
}, [onClose]);
154-
```
155-
156-
### Factory Functions for Hooks
157-
158-
Create factory functions that return hooks for schema-bound functionality:
159-
160-
```tsx
161-
export function createClient<S extends z.ZodObject<any>>(
162-
schema: S,
163-
): {
164-
useValidation: (...) => [...];
165-
useValidationTransition: (...) => [...];
166-
} {
167-
// ...
168-
return { useValidation, useValidationTransition };
169-
}
170-
```
171-
172-
## Context Patterns
173-
174-
### Context with Explicit Type
175-
176-
Always type Context explicitly:
177-
178-
```tsx
179-
export const FormContext: Context<{
180-
schema: ZodObject;
181-
}> = createContext(null as never);
182-
183-
export const HotkeysContext: Context<HotkeyContextType> = createContext<{
184-
enabled: boolean;
185-
setEnabled: Dispatch<SetStateAction<boolean>>;
186-
}>(null as never);
187-
```
188-
189-
### Provider Components
190-
191-
Memoize provider components:
192-
193-
```tsx
194-
export const HotkeysProvider: FC<HotkeysProviderProps> = memo(function HotkeysProvider({ children }) {
195-
const [enabled, setEnabled] = useState(true);
196-
const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);
197-
return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;
198-
});
199-
```
200-
201-
## Storybook Patterns
202-
203-
### Story File Structure
204-
205-
```tsx
206-
import type { Meta, StoryObj } from '@storybook/react';
207-
import { ComponentName } from './componentName';
208-
209-
const meta: Meta<typeof ComponentName> = {
210-
title: 'Category / ComponentName',
211-
component: ComponentName,
212-
parameters: {
213-
layout: 'centered',
214-
},
215-
tags: ['autodocs'],
216-
argTypes: {
217-
// control definitions
218-
},
219-
};
220-
221-
export default meta;
222-
223-
type Story = StoryObj<typeof meta>;
224-
225-
export const Default: Story = {};
226-
227-
export const WithArgs: Story = {
228-
args: {
229-
// props
230-
},
231-
};
232-
```
233-
234-
## AbortController Pattern
235-
236-
Use AbortController for cleanup in effects:
237-
238-
```tsx
239-
useEffect(() => {
240-
const ctrl = new AbortController();
241-
242-
window.addEventListener('keydown', handler, { signal: ctrl.signal, capture: true });
243-
244-
return () => {
245-
ctrl.abort();
246-
};
247-
}, [deps]);
248-
```
1+
General coding style rules are provided by `@kirill.konshin/agents` package.
2+
See: `packages/agents/rules/06-react.md`

0 commit comments

Comments
 (0)