@mallardbay/cursor-rules 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cursor/backend/rules/backend.mdc +2 -1
- package/.cursor/frontend/rules/ui.mdc +50 -29
- package/.cursor/frontend-lib/rules/storybook.mdc +147 -0
- package/.cursor/shared/rules/code-quality.mdc +38 -33
- package/.cursor/shared/rules/code-review.mdc +26 -20
- package/.cursor/shared/rules/error-handling.mdc +29 -22
- package/.cursor/shared/rules/mallardbay.mdc +3 -2
- package/.cursor/shared/rules/performance.mdc +25 -18
- package/.cursor/shared/rules/testing.mdc +41 -31
- package/.cursor/shared/rules/typescript.mdc +14 -11
- package/README.md +23 -2
- package/bin/setup-cursor.sh +46 -3
- package/package.json +1 -1
|
@@ -1,70 +1,91 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Defines best practices for building consistent, maintainable, and responsive UI in Mallard Bay projects
|
|
3
3
|
globs:
|
|
4
|
-
alwaysApply:
|
|
4
|
+
alwaysApply: true
|
|
5
5
|
---
|
|
6
|
+
|
|
6
7
|
# UI Development Standards
|
|
7
8
|
|
|
8
9
|
## Theme Usage
|
|
10
|
+
|
|
9
11
|
Use theme values consistently across all components:
|
|
10
12
|
|
|
11
13
|
### Colors
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
+
|
|
15
|
+
- Use theme colors instead of hardcoded values
|
|
16
|
+
- Example: `theme.colors.primary` instead of `'#000000'`
|
|
14
17
|
|
|
15
18
|
### Spacing
|
|
16
|
-
|
|
17
|
-
-
|
|
19
|
+
|
|
20
|
+
- Use theme spacing values for margins and padding
|
|
21
|
+
- Example: `theme.space[4]` instead of `'16px'`
|
|
18
22
|
|
|
19
23
|
### Typography
|
|
20
|
-
- Use theme typography settings for text styles
|
|
21
|
-
- Example: `theme.fontSizes.md` instead of `'16px'`
|
|
22
24
|
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
|
|
25
|
+
- Use theme typography settings for text styles
|
|
26
|
+
- Example: `theme.fontSizes.md` instead of `'16px'`
|
|
27
|
+
|
|
28
|
+
### Borders and border radius
|
|
29
|
+
|
|
30
|
+
- Use theme border styles and radius values
|
|
31
|
+
- Examples: `theme.borders.sm` instead of `'1px solid'`, `theme.radii.md` instead of using px values
|
|
26
32
|
|
|
27
33
|
## Component Structure
|
|
34
|
+
|
|
28
35
|
Maintain clean and consistent component structure:
|
|
29
36
|
|
|
30
37
|
### Nesting
|
|
31
|
-
|
|
32
|
-
-
|
|
38
|
+
|
|
39
|
+
- Limit component nesting to maximum depth of 3
|
|
40
|
+
- Keep component hierarchy readable and maintainable
|
|
33
41
|
|
|
34
42
|
### Inline Styles
|
|
35
|
-
|
|
36
|
-
-
|
|
43
|
+
|
|
44
|
+
- Limit inline styles to maximum of 2 per component
|
|
45
|
+
- Prefer theme-based styling
|
|
37
46
|
|
|
38
47
|
### Component Library
|
|
39
|
-
|
|
40
|
-
-
|
|
48
|
+
|
|
49
|
+
- Use existing components in @mallardbay/lib-react-components, @mallardbay/lib-react-components is based off Crakra UI v2
|
|
50
|
+
- If no component available in @mallardbay/lib-react-components, create one using Crakra UI and place it under src/components/shared/todo-lib-react-components/ to me moved later
|
|
41
51
|
|
|
42
52
|
## Responsive Design
|
|
53
|
+
|
|
43
54
|
Ensure responsive and accessible design:
|
|
44
55
|
|
|
45
56
|
### Breakpoints
|
|
46
|
-
|
|
47
|
-
-
|
|
57
|
+
|
|
58
|
+
- Use theme breakpoints for responsive design
|
|
59
|
+
- Implement mobile-first approach
|
|
48
60
|
|
|
49
61
|
### Spacing
|
|
50
|
-
|
|
51
|
-
-
|
|
62
|
+
|
|
63
|
+
- Use responsive spacing values
|
|
64
|
+
- Adapt layouts for different screen sizes
|
|
52
65
|
|
|
53
66
|
### Animations
|
|
54
|
-
|
|
55
|
-
-
|
|
67
|
+
|
|
68
|
+
- Use theme transition values for animations
|
|
69
|
+
- Keep animations smooth and performant
|
|
56
70
|
|
|
57
71
|
### Rendering
|
|
58
|
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
72
|
+
|
|
73
|
+
- Optimize component rendering
|
|
74
|
+
- Avoid unnecessary re-renders
|
|
75
|
+
- Use React.memo and useMemo when appropriate
|
|
76
|
+
- Avoid defining functions inside components to prevent recreation on each render
|
|
77
|
+
- Move function definitions outside components or use useCallback for event handlers
|
|
78
|
+
- Use useCallback for functions passed as props to child components
|
|
79
|
+
- Use useMemo for expensive computations and complex data transformations
|
|
80
|
+
- Memoize filtered, sorted, or mapped arrays to avoid recalculation on every render
|
|
81
|
+
- Use useMemo for object/array creation that would otherwise be recreated on each render
|
|
61
82
|
|
|
62
83
|
## File Patterns
|
|
84
|
+
|
|
63
85
|
These rules apply to all TypeScript and TSX files in the project.
|
|
64
86
|
|
|
65
87
|
## Components
|
|
66
|
-
- Keep components small and focused on a single responsibility
|
|
67
|
-
- Use functional components with hooks instead of class components
|
|
68
|
-
- Prefer `export default function ImpersonationBox() {` over `function ImpersonationBox(): React.ReactElement | null {` when defining components
|
|
69
|
-
|
|
70
88
|
|
|
89
|
+
- Keep components small and focused on a single responsibility
|
|
90
|
+
- Use functional components with hooks instead of class components
|
|
91
|
+
- Prefer `export default function ImpersonationBox() {` over `function ImpersonationBox(): React.ReactElement | null {` when defining components
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
---
|
|
2
|
+
alwaysApply: true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Storybook Performance Standards
|
|
6
|
+
|
|
7
|
+
## Story Optimization
|
|
8
|
+
|
|
9
|
+
Optimize Storybook stories for better performance and developer experience:
|
|
10
|
+
|
|
11
|
+
### Story Structure
|
|
12
|
+
|
|
13
|
+
- Use `StoryObj` type for better type safety
|
|
14
|
+
- Implement proper story parameters and controls
|
|
15
|
+
- Group related stories using `storiesOf` or CSF 3.0
|
|
16
|
+
- Use meaningful story names and descriptions
|
|
17
|
+
- Organize stories by component hierarchy (e.g., "Core/Button")
|
|
18
|
+
|
|
19
|
+
### Story Organization
|
|
20
|
+
|
|
21
|
+
- Group stories by component or feature
|
|
22
|
+
- Use consistent naming conventions for stories
|
|
23
|
+
- Implement proper story hierarchy with nested folders
|
|
24
|
+
- Separate interactive and documentation stories
|
|
25
|
+
- Use helper functions like `renderStorySections` for consistent layouts
|
|
26
|
+
- Create reusable story section builders for component variants
|
|
27
|
+
|
|
28
|
+
## Rendering Optimization
|
|
29
|
+
|
|
30
|
+
Prevent unnecessary re-renders in stories:
|
|
31
|
+
|
|
32
|
+
- Avoid inline styles in story args
|
|
33
|
+
- Prevent inline object creation in story parameters
|
|
34
|
+
- Use proper key props in story lists
|
|
35
|
+
- Memoize complex story args and callbacks
|
|
36
|
+
- Use `fn()` from `@storybook/test` for mock functions
|
|
37
|
+
- Spread args properly to avoid TypeScript errors
|
|
38
|
+
|
|
39
|
+
### Story Dependencies
|
|
40
|
+
|
|
41
|
+
- Prefer existing dependencies over new ones
|
|
42
|
+
- Review [package.json](mdc:package.json) before adding new packages
|
|
43
|
+
- Consider bundle size impact of new story dependencies
|
|
44
|
+
- Use tree-shaking friendly imports for story utilities
|
|
45
|
+
- Import storybook helpers from dedicated helper files
|
|
46
|
+
|
|
47
|
+
## Component Variant Management
|
|
48
|
+
|
|
49
|
+
- Use helper functions like `getStoryComponentVariantsAndColorSchemes` for systematic variant testing
|
|
50
|
+
- Create structured sections for different component states
|
|
51
|
+
- Implement consistent labeling for component variants
|
|
52
|
+
- Use TypeScript to ensure proper component prop spreading
|
|
53
|
+
|
|
54
|
+
## Performance Best Practices
|
|
55
|
+
|
|
56
|
+
- Use `play` functions for complex interactions
|
|
57
|
+
- Implement proper story loading states
|
|
58
|
+
- Optimize story assets and images
|
|
59
|
+
- Use Storybook's performance monitoring tools
|
|
60
|
+
- Implement proper story caching strategies
|
|
61
|
+
- Avoid inline component creation in render functions
|
|
62
|
+
|
|
63
|
+
## Story Development
|
|
64
|
+
|
|
65
|
+
- Write stories that cover all component states
|
|
66
|
+
- Use controls for interactive testing
|
|
67
|
+
- Implement proper accessibility testing in stories
|
|
68
|
+
- Use Storybook's built-in performance profiling
|
|
69
|
+
- Create comprehensive variant coverage (primary, secondary, etc.)
|
|
70
|
+
- Use meaningful labels for each component variant
|
|
71
|
+
- Implement proper TypeScript typing for story args
|
|
72
|
+
|
|
73
|
+
## File Patterns
|
|
74
|
+
|
|
75
|
+
These rules apply to all Storybook story files (`.stories.ts`, `.stories.tsx`, `.stories.js`, `.stories.jsx`) in the project.
|
|
76
|
+
|
|
77
|
+
# Storybook Performance Standards
|
|
78
|
+
|
|
79
|
+
## Story Optimization
|
|
80
|
+
|
|
81
|
+
Optimize Storybook stories for better performance and developer experience:
|
|
82
|
+
|
|
83
|
+
### Story Structure
|
|
84
|
+
|
|
85
|
+
- Use `StoryObj` type for better type safety
|
|
86
|
+
- Implement proper story parameters and controls
|
|
87
|
+
- Group related stories using `storiesOf` or CSF 3.0
|
|
88
|
+
- Use meaningful story names and descriptions
|
|
89
|
+
- Organize stories by component hierarchy (e.g., "Core/Button")
|
|
90
|
+
|
|
91
|
+
### Story Organization
|
|
92
|
+
|
|
93
|
+
- Group stories by component or feature
|
|
94
|
+
- Use consistent naming conventions for stories
|
|
95
|
+
- Implement proper story hierarchy with nested folders
|
|
96
|
+
- Separate interactive and documentation stories
|
|
97
|
+
- Use helper functions like `renderStorySections` for consistent layouts
|
|
98
|
+
- Create reusable story section builders for component variants
|
|
99
|
+
|
|
100
|
+
## Rendering Optimization
|
|
101
|
+
|
|
102
|
+
Prevent unnecessary re-renders in stories:
|
|
103
|
+
|
|
104
|
+
- Avoid inline styles in story args
|
|
105
|
+
- Prevent inline object creation in story parameters
|
|
106
|
+
- Use proper key props in story lists
|
|
107
|
+
- Memoize complex story args and callbacks
|
|
108
|
+
- Use `fn()` from `@storybook/test` for mock functions
|
|
109
|
+
- Spread args properly to avoid TypeScript errors
|
|
110
|
+
|
|
111
|
+
### Story Dependencies
|
|
112
|
+
|
|
113
|
+
- Prefer existing dependencies over new ones
|
|
114
|
+
- Review [package.json](mdc:package.json) before adding new packages
|
|
115
|
+
- Consider bundle size impact of new story dependencies
|
|
116
|
+
- Use tree-shaking friendly imports for story utilities
|
|
117
|
+
- Import storybook helpers from dedicated helper files
|
|
118
|
+
|
|
119
|
+
## Component Variant Management
|
|
120
|
+
|
|
121
|
+
- Use helper functions like `getStoryComponentVariantsAndColorSchemes` for systematic variant testing
|
|
122
|
+
- Create structured sections for different component states
|
|
123
|
+
- Implement consistent labeling for component variants
|
|
124
|
+
- Use TypeScript to ensure proper component prop spreading
|
|
125
|
+
|
|
126
|
+
## Performance Best Practices
|
|
127
|
+
|
|
128
|
+
- Use `play` functions for complex interactions
|
|
129
|
+
- Implement proper story loading states
|
|
130
|
+
- Optimize story assets and images
|
|
131
|
+
- Use Storybook's performance monitoring tools
|
|
132
|
+
- Implement proper story caching strategies
|
|
133
|
+
- Avoid inline component creation in render functions
|
|
134
|
+
|
|
135
|
+
## Story Development
|
|
136
|
+
|
|
137
|
+
- Write stories that cover all component states
|
|
138
|
+
- Use controls for interactive testing
|
|
139
|
+
- Implement proper accessibility testing in stories
|
|
140
|
+
- Use Storybook's built-in performance profiling
|
|
141
|
+
- Create comprehensive variant coverage (primary, secondary, etc.)
|
|
142
|
+
- Use meaningful labels for each component variant
|
|
143
|
+
- Implement proper TypeScript typing for story args
|
|
144
|
+
|
|
145
|
+
## File Patterns
|
|
146
|
+
|
|
147
|
+
These rules apply to all Storybook story files (`.stories.ts`, `.stories.tsx`, `.stories.js`, `.stories.jsx`) in the project.
|
|
@@ -1,48 +1,53 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Defines structure, naming, reuse, and dependency guidelines to ensure clean, maintainable, and consistent TypeScript code across the project—favoring pragmatism, proven libraries, and shared conventions.
|
|
3
|
-
globs:
|
|
4
3
|
alwaysApply: false
|
|
5
4
|
---
|
|
5
|
+
|
|
6
6
|
# Code Quality Standards
|
|
7
7
|
|
|
8
8
|
## Code Structure
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
9
|
+
|
|
10
|
+
- Maximum file length: 200 lines
|
|
11
|
+
- Maximum function length: 50 lines
|
|
12
|
+
- Naming conventions:
|
|
13
|
+
- Components: PascalCase
|
|
14
|
+
- Functions: camelCase
|
|
15
|
+
- Constants: UPPER_SNAKE_CASE
|
|
16
|
+
- Types: PascalCase
|
|
17
|
+
- Types should be defined at the bottom of files
|
|
18
|
+
- PropTypes should be defined before component definitions
|
|
19
|
+
- Prefer using alias for importing components. Only use relative for tests or when there's a direct sibling
|
|
19
20
|
|
|
20
21
|
## Code Reuse
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
|
|
23
|
+
- Use shared libraries to avoid duplication
|
|
24
|
+
- Primary libraries to use:
|
|
25
|
+
- [@mallardbay/lib-react-components](mdc:package.json)
|
|
26
|
+
- [@mallardbay/lib-shared-helpers](mdc:package.json)
|
|
25
27
|
|
|
26
28
|
## Third party libraries
|
|
27
|
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
29
|
+
|
|
30
|
+
- Favor battle-tested libraries over custom solutions. If a well-maintained, widely-used library solves the problem cleanly, use it. Reinventing functionality that’s already solid, reliable, and well-documented usually leads to more bugs, more maintenance, and wasted time.
|
|
31
|
+
- Prioritize stability and ecosystem fit. Pick libraries that are actively maintained, have strong adoption, and fit well within our existing tech stack. Avoid fringe or unmaintained packages unless there’s a strong reason.
|
|
32
|
+
- Suggest existing libraries during code review. If you spot hand-rolled code that could be replaced with a proven library, flag it. Examples:
|
|
33
|
+
- Use zod or yup instead of custom input validation
|
|
34
|
+
- Use date-fns instead of writing date math from scratch
|
|
35
|
+
- Use radash for utility-heavy logic if readability or testability improves
|
|
36
|
+
- Use react-hook-form for complex form state handling
|
|
37
|
+
- Be pragmatic. Sometimes a simple custom solution is faster and easier than pulling in a heavy dependency—but always weigh short-term gains against long-term cost.
|
|
38
|
+
- Make reuse easy. If we do build something custom, design it to be clean, reusable, and well-documented. That way, we’re not creating another wheel, but investing in something worth maintaining.
|
|
36
39
|
|
|
37
40
|
## String Constants
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
|
|
42
|
+
- Use constants instead of string literals for:
|
|
43
|
+
- Copy text (UI content). Most projects have a `copy-constants` file
|
|
44
|
+
- Test IDs. Most projects have `TEST_IDS` defined
|
|
45
|
+
- Error messages
|
|
46
|
+
- URLs
|
|
47
|
+
- Source constants from:
|
|
48
|
+
- @mallardbay/lib-shared-helpers
|
|
49
|
+
- Local constants files
|
|
46
50
|
|
|
47
51
|
## Cursor Rules
|
|
48
|
-
|
|
52
|
+
|
|
53
|
+
- Suggest cursor rules as needed
|
|
@@ -1,40 +1,46 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Outlines expectations for pull request size, test coverage, documentation, and review process—promoting focused, well-tested, and maintainable contributions that align with team standards and improve review efficiency.
|
|
3
|
-
globs:
|
|
4
3
|
alwaysApply: false
|
|
5
4
|
---
|
|
5
|
+
|
|
6
6
|
# Code Review Standards
|
|
7
7
|
|
|
8
8
|
## Pull Request Guidelines
|
|
9
9
|
|
|
10
10
|
### Size Requirements
|
|
11
|
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
11
|
+
|
|
12
|
+
- Maximum PR size: 400 lines
|
|
13
|
+
- Split large changes into smaller, focused PRs
|
|
14
|
+
- Keep changes atomic and focused
|
|
15
|
+
- Consider impact on review process
|
|
15
16
|
|
|
16
17
|
## Testing Requirements
|
|
18
|
+
|
|
17
19
|
Ensure comprehensive test coverage:
|
|
18
20
|
|
|
19
21
|
### Test Coverage
|
|
20
|
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
22
|
+
|
|
23
|
+
- All new code must include tests
|
|
24
|
+
- Follow testing standards in [testing.mdc](mdc:.cursor/rules/testing.mdc)
|
|
25
|
+
- Include unit tests for new functionality
|
|
26
|
+
- Avoid making a ton of changes to existing tests while refactoring
|
|
24
27
|
|
|
25
28
|
### Code Documentation
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
+
|
|
30
|
+
- Document complex logic with comments
|
|
31
|
+
- Explain non-obvious implementation details
|
|
32
|
+
- Document features added and important caveats in README
|
|
29
33
|
|
|
30
34
|
### Review Process
|
|
31
|
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
+
|
|
36
|
+
- Review for code quality
|
|
37
|
+
- Check for test coverage
|
|
38
|
+
- Verify documentation
|
|
39
|
+
- Ensure adherence to project standards
|
|
35
40
|
|
|
36
41
|
## Best Practices
|
|
37
|
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
42
|
+
|
|
43
|
+
- Keep PRs focused and manageable
|
|
44
|
+
- Include clear PR descriptions
|
|
45
|
+
- Reference related issues/tickets
|
|
46
|
+
- Respond to review comments promptly
|
|
@@ -1,41 +1,48 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Defines consistent patterns for API and form error handling—focusing on clear user feedback, robust validation, and reliable logging to improve user experience, developer debugging, and overall app resilience.
|
|
3
|
-
globs:
|
|
4
3
|
alwaysApply: false
|
|
5
4
|
---
|
|
5
|
+
|
|
6
6
|
# Error Handling Standards
|
|
7
7
|
|
|
8
8
|
## API Error Handling
|
|
9
|
+
|
|
9
10
|
Implement comprehensive API error handling
|
|
10
11
|
|
|
11
12
|
### Error Types
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
13
|
+
|
|
14
|
+
- Handle network errors
|
|
15
|
+
- Handle server errors
|
|
16
|
+
- Handle validation errors
|
|
17
|
+
- Handle Apollo-specific errors
|
|
16
18
|
|
|
17
19
|
### Error Presentation
|
|
18
|
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
20
|
+
|
|
21
|
+
- Show error toasts for user feedback
|
|
22
|
+
- Use original error messages when appropriate
|
|
23
|
+
- Provide clear, actionable error messages
|
|
24
|
+
- Log errors for debugging
|
|
22
25
|
|
|
23
26
|
## Form Validation
|
|
27
|
+
|
|
24
28
|
Implement robust form validation
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
+
|
|
30
|
+
- Validate all user inputs
|
|
31
|
+
- Show validation errors clearly
|
|
32
|
+
- Handle form submission errors
|
|
33
|
+
- Use [@hookform/resolvers](mdc:package.json) for validation
|
|
29
34
|
|
|
30
35
|
### Error Display
|
|
31
|
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
36
|
+
|
|
37
|
+
- Show validation errors inline
|
|
38
|
+
- Provide clear error messages
|
|
39
|
+
- Highlight invalid fields
|
|
40
|
+
- Prevent form submission with invalid data
|
|
35
41
|
|
|
36
42
|
## Best Practices
|
|
37
|
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
43
|
+
|
|
44
|
+
- Use try-catch blocks appropriately
|
|
45
|
+
- Implement proper error boundaries
|
|
46
|
+
- Log errors for debugging
|
|
47
|
+
- Provide user-friendly error messages
|
|
48
|
+
- Handle edge cases gracefully
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Describes Mallard Bay’s mission to simplify and scale outfitter operations through purpose-built software—emphasizing real-world impact, outfitter collaboration, and a long-term vision to digitize and unify the outdoor experience industry.
|
|
3
3
|
globs:
|
|
4
|
-
alwaysApply:
|
|
4
|
+
alwaysApply: true
|
|
5
5
|
---
|
|
6
|
+
|
|
6
7
|
# Mallard Bay: Outfitter Management System Overview
|
|
7
8
|
|
|
8
9
|
Mallard Bay is a specialized platform designed to streamline operations for outfitters—businesses that offer guided outdoor experiences such as hunting, fishing, and eco-tourism. At its core, Mallard Bay operates as an outfitter management system, purpose-built to reduce administrative burden, improve customer experience, and unlock new revenue channels for guides and lodge operators.
|
|
@@ -19,4 +20,4 @@ We’re building tools that fit into the way outfitters actually work — not th
|
|
|
19
20
|
|
|
20
21
|
# Vision
|
|
21
22
|
|
|
22
|
-
Mallard Bay aims to be the digital backbone for the outfitting industry—a single source of truth for trip logistics, customer interaction, and business growth. The long-term goal is to transform an analog, fragmented market into a digital-first, scalable ecosystem.
|
|
23
|
+
Mallard Bay aims to be the digital backbone for the outfitting industry—a single source of truth for trip logistics, customer interaction, and business growth. The long-term goal is to transform an analog, fragmented market into a digital-first, scalable ecosystem.
|
|
@@ -1,38 +1,45 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Defines best practices for optimizing React components, rendering efficiency, and dependency management—focusing on minimizing re-renders, reducing bundle size, and enabling smooth user experiences through memoization, lazy loading, and performance-aware development.
|
|
3
|
-
globs:
|
|
4
3
|
alwaysApply: false
|
|
5
4
|
---
|
|
5
|
+
|
|
6
6
|
# Performance Standards
|
|
7
7
|
|
|
8
8
|
## React Optimization
|
|
9
|
+
|
|
9
10
|
Optimize React components for better performance:
|
|
10
11
|
|
|
11
12
|
### Component Optimization
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
13
|
+
|
|
14
|
+
- Use `React.memo` for pure components
|
|
15
|
+
- Implement `useCallback` for function props
|
|
16
|
+
- Use `useMemo` for expensive computations
|
|
17
|
+
- Avoid inline function definitions in render
|
|
16
18
|
|
|
17
19
|
## Rendering Optimization
|
|
20
|
+
|
|
18
21
|
Prevent unnecessary re-renders:
|
|
19
|
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
22
|
+
|
|
23
|
+
- Avoid inline styles in components
|
|
24
|
+
- Prevent inline object creation in render
|
|
25
|
+
- Use proper key props in lists
|
|
26
|
+
- Memoize complex objects and callbacks
|
|
23
27
|
|
|
24
28
|
### Dependencies
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
+
|
|
30
|
+
- Prefer existing dependencies over new ones
|
|
31
|
+
- Review [package.json](mdc:package.json) before adding new packages
|
|
32
|
+
- Consider bundle size impact of new dependencies
|
|
33
|
+
- Use tree-shaking friendly imports
|
|
29
34
|
|
|
30
35
|
## Best Practices
|
|
31
|
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
+
|
|
37
|
+
- Implement proper code splitting
|
|
38
|
+
- Use lazy loading for routes and large components
|
|
39
|
+
- Optimize images and assets
|
|
40
|
+
- Monitor performance metrics
|
|
41
|
+
- Use React DevTools for performance profiling
|
|
36
42
|
|
|
37
43
|
## File Patterns
|
|
44
|
+
|
|
38
45
|
These rules apply to all TypeScript and TSX files in the project.
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
description: Outlines practical, value-driven testing guidelines focused on reliability, developer confidence, and speed. Emphasizes high-impact coverage (not overkill), structured test organization, clear scenarios, and reusable mock/test utilities—enabling fast iteration without sacrificing quality.
|
|
3
3
|
globs:
|
|
4
|
-
alwaysApply:
|
|
4
|
+
alwaysApply: true
|
|
5
5
|
---
|
|
6
|
+
|
|
6
7
|
# Testing Standards
|
|
7
8
|
|
|
8
9
|
## Test Coverage and Structure
|
|
10
|
+
|
|
9
11
|
We aim for high-impact test coverage, focused on adding value and improving developer confidence and experience. The priority is to cover critical logic, edge cases, and integration points where bugs would hurt the most. Tests should act as a safety net and enable fast, fearless iteration—not as a box-ticking exercise.
|
|
10
12
|
|
|
11
13
|
We do not chase 100% coverage for its own sake. If a test doesn’t meaningfully reduce risk or help developers move faster, it’s not worth writing. The goal is smart coverage, not maximum coverage—optimize for reliability, clarity, and development speed without overengineering.
|
|
@@ -13,49 +15,57 @@ We do not chase 100% coverage for its own sake. If a test doesn’t meaningfully
|
|
|
13
15
|
Avoid e2e tests for UI. Favor unit tests.
|
|
14
16
|
|
|
15
17
|
### Coverage Requirements
|
|
16
|
-
- Minimum test coverage: 80%
|
|
17
|
-
- Place tests in `_tests_` directory closest to the file being tested
|
|
18
|
-
- Use `.spec.ts` or `.spec.tsx` file extensions
|
|
19
|
-
- Do NOT Use `.test.ts` or `.test.tsx` file extensions
|
|
20
18
|
|
|
19
|
+
- Minimum test coverage: 80%
|
|
20
|
+
- Place tests in `_tests_` directory closest to the file being tested
|
|
21
|
+
- Use `.spec.ts` or `.spec.tsx` file extensions
|
|
22
|
+
- Do NOT Use `.test.ts` or `.test.tsx` file extensions
|
|
21
23
|
|
|
22
24
|
### Test Organization
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
25
|
+
|
|
26
|
+
- Maximum nesting level: 2
|
|
27
|
+
- Use `test` or `it` for test cases
|
|
28
|
+
- Keep tests focused and atomic
|
|
29
|
+
- Follow AAA pattern (Arrange, Act, Assert)
|
|
27
30
|
|
|
28
31
|
### Required Scenarios
|
|
29
|
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
32
|
+
|
|
33
|
+
- Happy path testing
|
|
34
|
+
- Error case handling
|
|
35
|
+
- Edge case coverage within reason. Optimize for branching logic, and avoid creating nearly identical tests
|
|
36
|
+
- Aim for simplicity
|
|
37
|
+
- All tests must pass before completion
|
|
33
38
|
|
|
34
39
|
### Test Quality
|
|
35
|
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
+
|
|
41
|
+
- Write clear, descriptive test names
|
|
42
|
+
- Test one concept per test case
|
|
43
|
+
- Avoid test interdependence
|
|
44
|
+
- Use meaningful assertions
|
|
45
|
+
- Avoid tests that will make the overall run slower
|
|
40
46
|
|
|
41
47
|
### Component Testing
|
|
42
|
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
48
|
+
|
|
49
|
+
- Use `renderWithProviders` for component tests
|
|
50
|
+
- Use `renderHookWithProviders` for hook tests
|
|
51
|
+
- Avoid mocking dependent components
|
|
52
|
+
- Test component behavior, not implementation
|
|
46
53
|
|
|
47
54
|
### Mocking Guidelines
|
|
48
|
-
|
|
49
|
-
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
-
|
|
55
|
+
|
|
56
|
+
- Use mock helpers instead of inline mocks
|
|
57
|
+
- Follow existing patterns for:
|
|
58
|
+
- Entity mocks
|
|
59
|
+
- Apollo mocks
|
|
60
|
+
- Provider mocks
|
|
61
|
+
- Keep mocks simple and maintainable
|
|
54
62
|
|
|
55
63
|
### Test Utilities
|
|
56
|
-
|
|
57
|
-
-
|
|
58
|
-
-
|
|
64
|
+
|
|
65
|
+
- Leverage testing utilities from [@testing-library/react](mdc:package.json)
|
|
66
|
+
- Use [@testing-library/jest-dom](mdc:package.json) for DOM assertions
|
|
67
|
+
- Follow established patterns in existing tests
|
|
59
68
|
|
|
60
69
|
## File Patterns
|
|
70
|
+
|
|
61
71
|
These rules apply to all test files with `.spec.ts` or `.spec.tsx` extensions.
|
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
globs:
|
|
4
|
-
alwaysApply: false
|
|
2
|
+
alwaysApply: true
|
|
5
3
|
---
|
|
4
|
+
|
|
6
5
|
# TypeScript Development Standards
|
|
7
6
|
|
|
8
7
|
## Type Safety
|
|
8
|
+
|
|
9
9
|
Enforce comprehensive type safety across the codebase:
|
|
10
10
|
|
|
11
11
|
### Strict Type Checking
|
|
12
|
+
|
|
12
13
|
Be as strictly as possible where it delivers clear value—specifically in preventing bugs and improving the developer experience. The goal is to enforce strong types and catch issues early, without introducing excessive friction or overhead. If a strict setting improves safety, maintainability, or clarity, we’ll use it. If it creates noise or slows down iteration without real benefit, we’ll dial it back. This is about pragmatic strictness, not dogmatism.
|
|
13
14
|
|
|
14
15
|
### File Organization
|
|
15
|
-
|
|
16
|
-
-
|
|
16
|
+
|
|
17
|
+
- Place types at the bottom of files
|
|
18
|
+
- Define PropTypes before component definitions
|
|
17
19
|
|
|
18
20
|
## Best Practices
|
|
19
|
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
21
|
+
|
|
22
|
+
- Use TypeScript for all new code
|
|
23
|
+
- Leverage TypeScript's type system for better code quality
|
|
24
|
+
- Follow React best practices with TypeScript
|
|
25
|
+
- Use proper type definitions for props and state
|
|
26
|
+
- Utilize TypeScript's utility types when appropriate
|
|
27
|
+
- Suggest existing libaries as needed
|
package/README.md
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
# Cursor Rules
|
|
2
2
|
|
|
3
|
-
A tool for managing Cursor IDE rules across different environment types with shared base configurations.
|
|
3
|
+
A tool for managing Cursor IDE rules and Claude Code configuration across different environment types with shared base configurations.
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
|
-
This project provides a structured way to manage
|
|
7
|
+
This project provides a structured way to manage AI agent rules for different development environments while maintaining a shared base configuration. It generates:
|
|
8
|
+
|
|
9
|
+
- **Cursor IDE**: `.cursor/rules/*.mdc` files
|
|
10
|
+
- **Claude Code**: A combined `CLAUDE.md` file at project root
|
|
11
|
+
|
|
12
|
+
It supports three main environment types:
|
|
8
13
|
|
|
9
14
|
- `frontend`: Basic frontend development rules
|
|
10
15
|
- `frontend-lib`: Extended rules for frontend library development, inheriting from frontend rules
|
|
@@ -66,6 +71,22 @@ The rules follow an inheritance pattern:
|
|
|
66
71
|
- All environments include the shared base rules
|
|
67
72
|
- `frontend-lib` inherits rules from both `frontend` and `frontend-lib` directories
|
|
68
73
|
|
|
74
|
+
## Output
|
|
75
|
+
|
|
76
|
+
Running the setup script generates:
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
your-project/
|
|
80
|
+
├── .cursor/
|
|
81
|
+
│ └── rules/ # Cursor IDE rules (*.mdc files)
|
|
82
|
+
│ ├── code-quality.mdc
|
|
83
|
+
│ ├── testing.mdc
|
|
84
|
+
│ └── ...
|
|
85
|
+
└── CLAUDE.md # Claude Code configuration (combined rules)
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
The `CLAUDE.md` file combines all applicable rules into a single file, with YAML frontmatter stripped for compatibility with Claude Code.
|
|
89
|
+
|
|
69
90
|
## Development
|
|
70
91
|
|
|
71
92
|
### Adding New Rules
|
package/bin/setup-cursor.sh
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env bash
|
|
2
2
|
# setup-cursor.sh — frontend & frontend-lib layering with shared base
|
|
3
|
+
# Also generates CLAUDE.md for Claude Code
|
|
3
4
|
|
|
4
5
|
set -e
|
|
5
6
|
|
|
@@ -11,8 +12,13 @@ if [ -z "$ENV_TYPE" ]; then
|
|
|
11
12
|
exit 1
|
|
12
13
|
fi
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
# Get the real path of the script (portable across Mac/Linux)
|
|
16
|
+
get_real_path() {
|
|
17
|
+
local path="$1"
|
|
18
|
+
cd "$(dirname "$path")" && echo "$(pwd -P)/$(basename "$path")"
|
|
19
|
+
}
|
|
20
|
+
SCRIPT_PATH="$(get_real_path "$0")"
|
|
21
|
+
SRC_DIR="$(cd "$(dirname "$SCRIPT_PATH")/.." && pwd -P)"
|
|
16
22
|
|
|
17
23
|
SHARED_DIR="$SRC_DIR/.cursor/shared/rules"
|
|
18
24
|
FRONTEND_DIR="$SRC_DIR/.cursor/frontend/rules"
|
|
@@ -21,6 +27,10 @@ BACKEND_DIR="$SRC_DIR/.cursor/backend/rules"
|
|
|
21
27
|
|
|
22
28
|
mkdir -p .cursor/rules
|
|
23
29
|
|
|
30
|
+
# Temporary file to collect CLAUDE.md content
|
|
31
|
+
CLAUDE_MD_TEMP=$(mktemp)
|
|
32
|
+
trap 'rm -f "$CLAUDE_MD_TEMP"' EXIT
|
|
33
|
+
|
|
24
34
|
copy_rules() {
|
|
25
35
|
local DIR="$1"
|
|
26
36
|
if [ -d "$DIR" ]; then
|
|
@@ -29,20 +39,48 @@ copy_rules() {
|
|
|
29
39
|
fi
|
|
30
40
|
}
|
|
31
41
|
|
|
42
|
+
# Append rules to CLAUDE.md (strips YAML frontmatter)
|
|
43
|
+
append_to_claude_md() {
|
|
44
|
+
local DIR="$1"
|
|
45
|
+
if [ -d "$DIR" ]; then
|
|
46
|
+
for file in "$DIR"/*.mdc; do
|
|
47
|
+
[ -f "$file" ] || continue
|
|
48
|
+
# Add separator
|
|
49
|
+
echo "" >> "$CLAUDE_MD_TEMP"
|
|
50
|
+
echo "---" >> "$CLAUDE_MD_TEMP"
|
|
51
|
+
echo "" >> "$CLAUDE_MD_TEMP"
|
|
52
|
+
# Strip YAML frontmatter (content between --- markers) and append
|
|
53
|
+
awk '
|
|
54
|
+
BEGIN { in_frontmatter=0; found_end=0 }
|
|
55
|
+
/^---$/ && !found_end {
|
|
56
|
+
if (in_frontmatter) { found_end=1; next }
|
|
57
|
+
else { in_frontmatter=1; next }
|
|
58
|
+
}
|
|
59
|
+
!in_frontmatter || found_end { print }
|
|
60
|
+
' "$file" >> "$CLAUDE_MD_TEMP"
|
|
61
|
+
done
|
|
62
|
+
fi
|
|
63
|
+
}
|
|
64
|
+
|
|
32
65
|
# Always include shared rules
|
|
33
66
|
copy_rules "$SHARED_DIR"
|
|
67
|
+
append_to_claude_md "$SHARED_DIR"
|
|
34
68
|
|
|
35
69
|
# Inheritance handling
|
|
36
70
|
case "$ENV_TYPE" in
|
|
37
71
|
frontend)
|
|
38
72
|
copy_rules "$FRONTEND_DIR"
|
|
73
|
+
append_to_claude_md "$FRONTEND_DIR"
|
|
39
74
|
;;
|
|
40
75
|
backend)
|
|
41
76
|
copy_rules "$BACKEND_DIR"
|
|
77
|
+
append_to_claude_md "$BACKEND_DIR"
|
|
42
78
|
;;
|
|
43
79
|
frontend-lib)
|
|
44
80
|
copy_rules "$FRONTEND_DIR"
|
|
45
81
|
copy_rules "$FRONTEND_LIB_DIR"
|
|
82
|
+
append_to_claude_md "$FRONTEND_DIR"
|
|
83
|
+
append_to_claude_md "$FRONTEND_LIB_DIR"
|
|
46
84
|
;;
|
|
47
85
|
*)
|
|
48
86
|
echo "Unknown environment type: $ENV_TYPE"
|
|
@@ -50,4 +88,9 @@ case "$ENV_TYPE" in
|
|
|
50
88
|
;;
|
|
51
89
|
esac
|
|
52
90
|
|
|
53
|
-
|
|
91
|
+
# Generate CLAUDE.md
|
|
92
|
+
mv "$CLAUDE_MD_TEMP" CLAUDE.md
|
|
93
|
+
trap - EXIT
|
|
94
|
+
echo "CLAUDE.md generated for Claude Code"
|
|
95
|
+
|
|
96
|
+
echo "Setup complete for '$ENV_TYPE' (Cursor + Claude)"
|