-
Notifications
You must be signed in to change notification settings - Fork 176
Update Claude / Agent MD and add React skill #2273
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
alexandrudanpop
wants to merge
4
commits into
main
Choose a base branch
from
feat/react-skills
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| --- | ||
| name: react | ||
| description: > | ||
| Use when creating or editing frontend React code in react-ui or ui-components packages. | ||
| Triggers on any frontend component, hook, or UI work. | ||
| --- | ||
|
|
||
| # React & Frontend Development Skill | ||
|
|
||
| When working on frontend code in `packages/react-ui` or `packages/ui-components`, follow these guidelines strictly. | ||
|
|
||
| --- | ||
|
|
||
| ## 1. Modular Components | ||
|
|
||
| - Break the design into independent files. Avoid large, single-file outputs. | ||
| - Each component should have one clear responsibility. | ||
| - Reusable, pure components live in `packages/ui-components` and **must** have Storybook stories in `packages/ui-components/src/stories/`. | ||
| - Application-specific components live in `packages/react-ui`. | ||
| - Do not make breaking changes to existing component interfaces (props, names) without discussion. | ||
|
|
||
| --- | ||
|
|
||
| ## 2. Logic Isolation | ||
|
|
||
| - Move event handlers and business logic into **custom hooks** (`use-*.ts`). | ||
| - Follow existing convention: hooks go in `hooks/` directories alongside features (e.g., `features/campaigns/hooks/use-campaign-charts.ts`). | ||
| - Keep component files focused on rendering; delegate logic to hooks. | ||
| - Extract complex derived state into hooks or utility functions. | ||
|
|
||
| --- | ||
|
|
||
| ## 3. Data Fetching — react-query v5 | ||
|
|
||
| - Use `QueryKeys` from `@/app/constants/query-keys.ts` — **never hardcode query key strings**. | ||
| - Use `useQuery` for reads, `useMutation` for writes. | ||
| - Invalidate related queries after mutations using `queryClient.invalidateQueries`. | ||
| - Use the `enabled` option for conditional queries. | ||
| - Keep query functions in dedicated API modules (e.g., `campaigns-api.ts`). | ||
|
|
||
| **Example — existing pattern:** | ||
|
|
||
| ```tsx | ||
| import { QueryKeys } from '@/app/constants/query-keys'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { campaignsApi } from '../campaigns-api'; | ||
|
|
||
| export function useCampaignCharts(campaignId: string) { | ||
| const { data: chartData } = useQuery({ | ||
| queryKey: [QueryKeys.campaignCharts, campaignId], | ||
| queryFn: () => campaignsApi.getCharts(campaignId), | ||
| }); | ||
|
|
||
| const weekData = useMemo(() => /* derive from chartData */, [chartData]); | ||
|
|
||
| return { chartData, weekData }; | ||
| } | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 4. React Hooks & Performance | ||
|
|
||
| - **Prefer extracted event handlers** at component scope when they are passed to memoized children, reused across multiple elements, used in dependency arrays, or contain non-trivial logic. | ||
| - **Inline JSX callbacks are acceptable** for simple, local interactions when they keep the code clearer and are not causing avoidable re-renders in hot paths. | ||
| - **Use `useMemo`** for expensive computations or derived state. | ||
| - **Use `useCallback`** selectively for handlers where referential stability matters (for example, props to memoized children or values used in hook dependency arrays). | ||
| - Place hooks and any memoized values/functions near the top of the component, after state declarations, following existing file conventions. | ||
|
|
||
| **Prefer extraction when logic is non-trivial or stability matters**: | ||
|
|
||
| ```tsx | ||
| // ✅ Simple inline callback — fine when the handler is trivial and local | ||
| <Button onClick={() => setOpen(true)}>Open</Button>; | ||
|
|
||
| // ✅ Extracted handler — preferred when logic is non-trivial or passed to memoized children | ||
| const handleSubmit = useCallback( | ||
| (values: FormValues) => { | ||
| const sanitized = sanitizeInput(values); | ||
| onSubmit?.(sanitized); | ||
| }, | ||
| [onSubmit], | ||
| ); | ||
|
|
||
| return <Form onSubmit={handleSubmit} />; | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 5. Anti-Patterns Checklist | ||
|
|
||
| ❌ **Inline arrow functions in JSX for non-trivial logic or props to memoized children** (can cause avoidable re-renders) | ||
| ❌ **Inline object/array literals in JSX props** (breaks reference equality) | ||
| ❌ **Complex logic inside render** (hard to test, poor separation of concerns) | ||
| ❌ **Missing dependency arrays** in `useEffect`/`useCallback`/`useMemo` | ||
| ❌ **Unnecessary state** (derive from props when possible) | ||
| ❌ **Hardcoded query key strings** (use `QueryKeys` constants) | ||
|
|
||
| ✅ **Extract and memoize** callbacks with `useCallback` when referential stability matters | ||
| ✅ **Extract complex JSX logic** into separate memoized functions or sub-components | ||
| ✅ **Derive state** with `useMemo` instead of storing duplicated state | ||
| ✅ **Keep component functions focused** — one clear responsibility per function | ||
| ✅ **Move business logic into custom hooks** | ||
|
|
||
| --- | ||
|
|
||
| ## 6. Styling | ||
|
|
||
| - Use shadcn components as the foundation. | ||
| - Use `cn` utility to group Tailwind classnames: | ||
|
|
||
| ```tsx | ||
| <div | ||
| className={cn( | ||
| 'absolute bottom-[-20px] left-1/2 -translate-x-1/2', | ||
| 'w-[118px] h-[24px] flex items-center justify-center', | ||
| 'font-satoshi font-medium text-xs text-blueAccent-500', | ||
| 'border border-solid border-blueAccent-500 rounded-[4px]', | ||
| 'bg-background-800', | ||
| { | ||
| 'pt-2': !someVar, | ||
| }, | ||
| )} | ||
| > | ||
| {t('Sample output data')} | ||
| </div> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 7. Code Quality Constraints | ||
|
|
||
| - **SOLID, DRY, Clean Code** — small functions, clear names, no dead code. | ||
| - **Pattern consistency** — read existing code in the target area before writing new code. | ||
| - Run build, test, lint, type-check iteratively: | ||
|
|
||
| ```bash | ||
| npx nx test react-ui | ||
| npx nx test ui-components | ||
| npx nx lint react-ui | ||
| npx nx lint ui-components | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 8. Project-Specific Context | ||
|
|
||
| - **React 18** with functional components | ||
| - **Zustand** for state management | ||
| - **react-query v5** (`@tanstack/react-query`) for data fetching | ||
| - **shadcn** for UI components | ||
| - **Axios** via existing wrapper in `api.ts`; use `qs` package for query strings | ||
| - Tests go in `tests/` folders alongside code (Jest) | ||
| - Perform browser testing with the available project tooling before finalizing UI changes |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
modiefied agents.md to be the same as claude.md