Add Claude skills for business logic separation and no-barrel-exports#6279
Add Claude skills for business logic separation and no-barrel-exports#6279lkostrowski wants to merge 4 commits intomainfrom
Conversation
lkostrowski
requested review from
Copilot and
witoszekdev
and removed request for
Copilot
|
lkostrowski
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6279 +/- ##
=========================================
Coverage 42.34% 42.34%
=========================================
Files 2469 2469
Lines 42106 42106
Branches 9721 9721
=========================================
Hits 17831 17831
- Misses 23011 24244 +1233
+ Partials 1264 31 -1233 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
suggestion: for enforcement SKILLS are brittle, claude loads them dynamically - it might load or not and it can just straight up ignore it 😄. It's better to use them to perform certain tasks in a way we want (e.g. separate business logic)
Maybe we could rewrite this to a hook instead? This way we can check if Claude edits / creates index.ts / index.tsx and return an error there to force it to not create such files programatically
Example:
|
|
||
| ## What Counts as Business Logic | ||
|
|
||
| - Data mapping and transformations (e.g., converting API responses to UI models) |
There was a problem hiding this comment.
suggestion: let's add a description so that it doesn't overengineer data mapping - a simple data.map() in JSX is fine imho, if we don't calculate new values just render a list for example
| - Filtering, sorting, grouping collections | ||
| - Validation rules and error message resolution | ||
| - Conditional logic that determines what to display or which action to take | ||
| - Formatting (dates, currencies, percentages, labels) |
There was a problem hiding this comment.
suggestion: we should use react-intl for formatting most of the time, so maybe let's also add a note? otherwise i suspect we might end up with more and more utility functions that are built into libraries we already use
| ├── useComponentName.ts # Hook (optional, bridges logic → component) | ||
| ├── componentNameUtils.ts # Pure logic functions | ||
| ├── componentNameUtils.test.ts # Unit tests for the logic | ||
| └── ComponentName.module.css |
There was a problem hiding this comment.
question: do we want to move ahead with writing .module.css? I remember we were thinking about using vanilla-extract since macaw-ui is already using it and imho it's a pretty good library, less verbose than css modules and has nice type checking
|
|
||
| ## Testing Expectations | ||
|
|
||
| - Every `*Utils.ts` file must have a corresponding `*.test.ts` file. |
There was a problem hiding this comment.
suggestion: let's also add explicitly hooks
| - Every `*Utils.ts` file must have a corresponding `*.test.ts` file. | |
| - Every `*Utils.ts` and `use*.ts` file must have a corresponding `*.test.ts` file. |
| ```typescript | ||
| // calculateTotal.test.ts | ||
| import { calculateTotal } from "./cartUtils"; | ||
| import { Item } from "./types"; | ||
|
|
||
| describe("calculateTotal", () => { | ||
| it("sums item prices multiplied by quantity", () => { | ||
| // Arrange | ||
| const items: Item[] = [ | ||
| { price: 10, quantity: 2 }, | ||
| { price: 5, quantity: 3 }, | ||
| ]; | ||
|
|
||
| // Act | ||
| const result = calculateTotal(items); | ||
|
|
||
| // Assert | ||
| expect(result).toBe(35); | ||
| }); | ||
|
|
||
| it("returns 0 for empty list", () => { | ||
| // Arrange | ||
| const items: Item[] = []; | ||
|
|
||
| // Act | ||
| const result = calculateTotal(items); | ||
|
|
||
| // Assert | ||
| expect(result).toBe(0); | ||
| }); | ||
| }); | ||
| ``` |
There was a problem hiding this comment.
suggestion: maybe we should separate examples into a separate file in a skill directory? This is a good way to save context for specific use cases, e.g. writing test
There was a problem hiding this comment.
suggestion: in general maybe we should also add instructions about finding existing utilities? I think we have plenty of them (e.g. related to prices) - it would be great if we would re-use that instead of creating more and more code
2 participants
Summary
logic → hook → componentpatternindex.ts/index.tsxbarrel files and enforces direct imports from source filesBoth skills align with existing conventions documented in
CLAUDE.mdand provide structured guidance for Claude Code when writing or refactoring code in this repository.Changes
.claude/skills/separate-business-logic/SKILL.md— New skill with rules for extracting data transformations, validation, formatting, and conditional logic out of components, along with file naming conventions, testing expectations, and examples.claude/skills/no-barrel-exports/SKILL.md— New skill enforcing direct imports instead of barrel re-exports, with clear exceptions for route entry pointsTest plan
separate-business-logicskill triggers when refactoring a component with inlined logicno-barrel-exportsskill triggers when creating new components or modules