@mallardbay/cursor-rules 1.0.14 → 1.0.16
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/rules/code-quality.mdc +53 -0
- package/.cursor/rules/code-review.mdc +46 -0
- package/.cursor/rules/error-handling.mdc +48 -0
- package/.cursor/rules/general-best-practices.mdc +163 -0
- package/.cursor/rules/mallardbay.mdc +23 -0
- package/.cursor/rules/performance.mdc +45 -0
- package/.cursor/rules/testing.mdc +71 -0
- package/.cursor/rules/typescript.mdc +27 -0
- package/.cursor/rules/ui.mdc +91 -0
- package/.cursor/shared/rules/code-quality.mdc +0 -2
- package/.cursor/shared/rules/general-best-practices.mdc +163 -0
- package/.cursor/shared/skills/address-pr-feedback/SKILL.md +156 -0
- package/.cursor/shared/skills/prep-for-pr/SKILL.md +160 -0
- package/.cursor/shared/skills/review-pr/SKILL.md +267 -0
- package/.cursor/skills/address-pr-feedback/SKILL.md +156 -0
- package/.cursor/skills/prep-for-pr/SKILL.md +160 -0
- package/.cursor/skills/review-pr/SKILL.md +267 -0
- package/README.md +60 -9
- package/bin/setup-cursor.sh +79 -16
- package/package.json +1 -5
- package/bin/test-setup.sh +0 -108
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
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
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Code Quality Standards
|
|
7
|
+
|
|
8
|
+
## Code Structure
|
|
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
|
|
20
|
+
|
|
21
|
+
## Code Reuse
|
|
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)
|
|
27
|
+
|
|
28
|
+
## Third party libraries
|
|
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.
|
|
39
|
+
|
|
40
|
+
## String Constants
|
|
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
|
|
50
|
+
|
|
51
|
+
## Cursor Rules
|
|
52
|
+
|
|
53
|
+
- Suggest cursor rules as needed
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
---
|
|
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
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Code Review Standards
|
|
7
|
+
|
|
8
|
+
## Pull Request Guidelines
|
|
9
|
+
|
|
10
|
+
### Size Requirements
|
|
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
|
|
16
|
+
|
|
17
|
+
## Testing Requirements
|
|
18
|
+
|
|
19
|
+
Ensure comprehensive test coverage:
|
|
20
|
+
|
|
21
|
+
### Test Coverage
|
|
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
|
|
27
|
+
|
|
28
|
+
### Code Documentation
|
|
29
|
+
|
|
30
|
+
- Document complex logic with comments
|
|
31
|
+
- Explain non-obvious implementation details
|
|
32
|
+
- Document features added and important caveats in README
|
|
33
|
+
|
|
34
|
+
### Review Process
|
|
35
|
+
|
|
36
|
+
- Review for code quality
|
|
37
|
+
- Check for test coverage
|
|
38
|
+
- Verify documentation
|
|
39
|
+
- Ensure adherence to project standards
|
|
40
|
+
|
|
41
|
+
## Best Practices
|
|
42
|
+
|
|
43
|
+
- Keep PRs focused and manageable
|
|
44
|
+
- Include clear PR descriptions
|
|
45
|
+
- Reference related issues/tickets
|
|
46
|
+
- Respond to review comments promptly
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
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
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Error Handling Standards
|
|
7
|
+
|
|
8
|
+
## API Error Handling
|
|
9
|
+
|
|
10
|
+
Implement comprehensive API error handling
|
|
11
|
+
|
|
12
|
+
### Error Types
|
|
13
|
+
|
|
14
|
+
- Handle network errors
|
|
15
|
+
- Handle server errors
|
|
16
|
+
- Handle validation errors
|
|
17
|
+
- Handle Apollo-specific errors
|
|
18
|
+
|
|
19
|
+
### Error Presentation
|
|
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
|
|
25
|
+
|
|
26
|
+
## Form Validation
|
|
27
|
+
|
|
28
|
+
Implement robust form validation
|
|
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
|
|
34
|
+
|
|
35
|
+
### Error Display
|
|
36
|
+
|
|
37
|
+
- Show validation errors inline
|
|
38
|
+
- Provide clear error messages
|
|
39
|
+
- Highlight invalid fields
|
|
40
|
+
- Prevent form submission with invalid data
|
|
41
|
+
|
|
42
|
+
## Best Practices
|
|
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
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Core development principles and best practices that always apply—optimized for AI agents to produce clean, maintainable, reviewable code with low cognitive complexity, clear semantics, and incremental changes.
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# General Best Practices
|
|
7
|
+
|
|
8
|
+
These principles apply to all code changes and should guide every implementation decision.
|
|
9
|
+
|
|
10
|
+
## Core Principles
|
|
11
|
+
|
|
12
|
+
### DRY (Don't Repeat Yourself)
|
|
13
|
+
- Extract common logic into reusable functions, utilities, or shared modules
|
|
14
|
+
- Leverage existing patterns and utilities before creating new ones
|
|
15
|
+
- When duplicating code, ask: "Can this be abstracted?"
|
|
16
|
+
- Prefer composition and shared utilities over copy-paste solutions
|
|
17
|
+
|
|
18
|
+
### Leverage Existing Patterns
|
|
19
|
+
- **Always** search the codebase for similar implementations before creating new code
|
|
20
|
+
- Follow established patterns, conventions, and architectural decisions
|
|
21
|
+
- Use existing utilities, helpers, and shared libraries
|
|
22
|
+
- Match the style and structure of related files
|
|
23
|
+
- When patterns exist, use them consistently—don't invent new approaches without justification
|
|
24
|
+
|
|
25
|
+
### Incremental Changes
|
|
26
|
+
- **Minimize large changes in a single PR or commit**
|
|
27
|
+
- Break large features into smaller, testable increments
|
|
28
|
+
- Make changes that are easy to review and understand
|
|
29
|
+
- Prefer multiple small PRs over one massive change
|
|
30
|
+
- Each change should be independently testable and reviewable
|
|
31
|
+
- If a change touches many files, consider splitting it into logical phases
|
|
32
|
+
|
|
33
|
+
### Semantic Clarity
|
|
34
|
+
- Use **semantic, self-documenting names** for functions, variables, and types
|
|
35
|
+
- Function names should clearly describe what they do (e.g., `calculateTotalPrice` not `calc`)
|
|
36
|
+
- Variable names should express intent (e.g., `userAccountBalance` not `bal`)
|
|
37
|
+
- Terminology should be consistent across the codebase
|
|
38
|
+
- Avoid abbreviations unless they're widely understood in the domain
|
|
39
|
+
- Names should make code readable without comments
|
|
40
|
+
|
|
41
|
+
### Cognitive Complexity
|
|
42
|
+
- **Keep cognitive complexity low**—code should be easy to understand at a glance
|
|
43
|
+
- Prefer early returns and guard clauses over deep nesting
|
|
44
|
+
- Break complex logic into smaller, well-named functions
|
|
45
|
+
- Maximum nesting depth: 3 levels
|
|
46
|
+
- Use intermediate variables to clarify intent
|
|
47
|
+
- Extract complex conditionals into named boolean functions
|
|
48
|
+
- Avoid deeply nested ternaries—use if/else or extract to function
|
|
49
|
+
|
|
50
|
+
### Separation of Concerns
|
|
51
|
+
- **Files**: Each file should have a single, clear responsibility
|
|
52
|
+
- **Functions**: Each function should do one thing well
|
|
53
|
+
- Separate business logic from presentation, data access, and side effects
|
|
54
|
+
- Keep UI components focused on rendering and user interaction
|
|
55
|
+
- Extract business logic into pure functions or services
|
|
56
|
+
- Avoid god objects or functions that do too much
|
|
57
|
+
|
|
58
|
+
## Code Quality Standards
|
|
59
|
+
|
|
60
|
+
### Avoid "AI Slop"
|
|
61
|
+
- **Write code that's easy for humans to review**
|
|
62
|
+
- Avoid generating large amounts of code without understanding context
|
|
63
|
+
- Don't create unnecessary abstractions or over-engineered solutions
|
|
64
|
+
- Remove unused code, imports, and dead branches
|
|
65
|
+
- Clean up commented-out code and debugging statements
|
|
66
|
+
- If an approach doesn't work, **clean up failed attempts** before trying another
|
|
67
|
+
- Keep only relevant, working code—remove experimental code that didn't pan out
|
|
68
|
+
|
|
69
|
+
### Testing and Linting
|
|
70
|
+
- **Lint and test files related to your changes** before completing work
|
|
71
|
+
- Run linters on modified files and fix issues
|
|
72
|
+
- Run tests for affected modules, not the entire test suite unnecessarily
|
|
73
|
+
- For large changes: **use test sharding**—split tests across multiple runs
|
|
74
|
+
- **Do not run all tests in parallel** when dealing with many changes
|
|
75
|
+
- Tests should be **clear, fast, and minimize setup duplication**
|
|
76
|
+
- Use shared test utilities and fixtures to reduce boilerplate
|
|
77
|
+
- Each test should be independent and runnable in isolation
|
|
78
|
+
|
|
79
|
+
### Code Organization
|
|
80
|
+
- Group related functionality together
|
|
81
|
+
- Keep related code close (cohesion)
|
|
82
|
+
- Minimize dependencies between modules (loose coupling)
|
|
83
|
+
- Use appropriate data structures for the problem
|
|
84
|
+
- Prefer composition over inheritance
|
|
85
|
+
- Make functions pure when possible (no side effects)
|
|
86
|
+
- Handle edge cases explicitly—don't rely on implicit behavior
|
|
87
|
+
|
|
88
|
+
### Type Safety and Clarity
|
|
89
|
+
- Use TypeScript types effectively—avoid `any` unless necessary
|
|
90
|
+
- Make types explicit and meaningful
|
|
91
|
+
- Use const assertions and readonly where appropriate
|
|
92
|
+
- Prefer `const` over `let`, avoid `var`
|
|
93
|
+
- Use type guards and discriminated unions for type narrowing
|
|
94
|
+
|
|
95
|
+
### Performance Considerations
|
|
96
|
+
- Consider performance implications, but **avoid premature optimization**
|
|
97
|
+
- Profile before optimizing—optimize bottlenecks, not everything
|
|
98
|
+
- Use appropriate algorithms and data structures
|
|
99
|
+
- Avoid unnecessary re-renders, re-computations, or API calls
|
|
100
|
+
- Cache expensive computations when appropriate
|
|
101
|
+
|
|
102
|
+
## AI Agent Workflow
|
|
103
|
+
|
|
104
|
+
### Before Making Changes
|
|
105
|
+
1. **Create a plan** before making changes directly—outline the approach, identify affected files, and break down the work into steps
|
|
106
|
+
2. **Read existing code** to understand patterns and context
|
|
107
|
+
3. **Search the codebase** for similar implementations
|
|
108
|
+
4. **Check git history** to understand why code exists as it does
|
|
109
|
+
5. **Identify related files** that might be affected
|
|
110
|
+
6. **Ask clarifying questions** if requirements are unclear
|
|
111
|
+
|
|
112
|
+
### During Implementation
|
|
113
|
+
1. Make **small, incremental changes**
|
|
114
|
+
2. **Test as you go**—verify each change works before moving on
|
|
115
|
+
3. **Lint frequently**—don't accumulate lint errors
|
|
116
|
+
4. **Follow existing patterns**—don't reinvent the wheel
|
|
117
|
+
5. **Use semantic names**—code should be self-documenting
|
|
118
|
+
6. **Keep functions focused**—one responsibility per function
|
|
119
|
+
7. **Extract common logic**—don't duplicate code
|
|
120
|
+
|
|
121
|
+
### After Making Changes
|
|
122
|
+
1. **Clean up failed attempts**—remove experimental code
|
|
123
|
+
2. **Remove unused code**—imports, variables, functions
|
|
124
|
+
3. **Run linters** on modified files
|
|
125
|
+
4. **Run relevant tests**—not the entire suite unless necessary
|
|
126
|
+
5. **Verify the change works** end-to-end
|
|
127
|
+
6. **Check for side effects**—ensure changes don't break unrelated code
|
|
128
|
+
|
|
129
|
+
### When Changes Are Large
|
|
130
|
+
1. **Consider splitting** into multiple smaller PRs
|
|
131
|
+
2. **Use test sharding**—run tests in batches, not all at once
|
|
132
|
+
3. **Review incrementally**—make sure each part works before moving on
|
|
133
|
+
4. **Document the approach**—explain why changes are structured this way
|
|
134
|
+
5. **Check impact** on related systems and files
|
|
135
|
+
|
|
136
|
+
## Anti-Patterns to Avoid
|
|
137
|
+
|
|
138
|
+
- ❌ Copy-pasting code instead of extracting to a function
|
|
139
|
+
- ❌ Creating new patterns when existing ones work
|
|
140
|
+
- ❌ Making massive changes in one go
|
|
141
|
+
- ❌ Using vague names like `data`, `temp`, `value`, `thing`
|
|
142
|
+
- ❌ Deeply nested conditionals and loops
|
|
143
|
+
- ❌ Functions that do multiple unrelated things
|
|
144
|
+
- ❌ Leaving commented-out code or debugging statements
|
|
145
|
+
- ❌ Skipping tests or linting "to save time"
|
|
146
|
+
- ❌ Running entire test suite for small changes
|
|
147
|
+
- ❌ Leaving experimental code after failed attempts
|
|
148
|
+
- ❌ Premature optimization without profiling
|
|
149
|
+
- ❌ Using `any` types to avoid type errors
|
|
150
|
+
- ❌ Magic numbers or strings without constants
|
|
151
|
+
|
|
152
|
+
## Remember
|
|
153
|
+
|
|
154
|
+
**Code is read far more often than it's written.** Write code that:
|
|
155
|
+
- Is easy to understand
|
|
156
|
+
- Is easy to review
|
|
157
|
+
- Is easy to test
|
|
158
|
+
- Is easy to modify
|
|
159
|
+
- Follows established patterns
|
|
160
|
+
- Has clear semantics
|
|
161
|
+
- Minimizes cognitive load
|
|
162
|
+
|
|
163
|
+
When in doubt, prefer clarity and simplicity over cleverness.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
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
|
+
globs:
|
|
4
|
+
alwaysApply: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Mallard Bay: Outfitter Management System Overview
|
|
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.
|
|
10
|
+
|
|
11
|
+
# Built for Outfitters, with Outfitters in Mind
|
|
12
|
+
|
|
13
|
+
At Mallard Bay, we’re not just building software — we’re solving real problems for real people in the outfitting industry. Every feature we ship is grounded in one simple principle: if it doesn’t make an outfitter’s life easier or their business better, it doesn’t belong in our product.
|
|
14
|
+
|
|
15
|
+
We work closely with outfitters of all sizes to understand their workflows, pain points, and growth challenges. From there, we prioritize meaningful features that drive efficiency, boost bookings, and enhance the guest experience.
|
|
16
|
+
|
|
17
|
+
Whether it’s reducing no-shows with smart reminders, saving time through automated group booking tools, or enabling instant rebooking with dynamic availability, we’re laser-focused on delivering value — not fluff.
|
|
18
|
+
|
|
19
|
+
We’re building tools that fit into the way outfitters actually work — not the way a generic booking platform thinks they should.
|
|
20
|
+
|
|
21
|
+
# Vision
|
|
22
|
+
|
|
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.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
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
|
+
alwaysApply: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Performance Standards
|
|
7
|
+
|
|
8
|
+
## React Optimization
|
|
9
|
+
|
|
10
|
+
Optimize React components for better performance:
|
|
11
|
+
|
|
12
|
+
### Component Optimization
|
|
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
|
|
18
|
+
|
|
19
|
+
## Rendering Optimization
|
|
20
|
+
|
|
21
|
+
Prevent unnecessary re-renders:
|
|
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
|
|
27
|
+
|
|
28
|
+
### Dependencies
|
|
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
|
|
34
|
+
|
|
35
|
+
## Best Practices
|
|
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
|
|
42
|
+
|
|
43
|
+
## File Patterns
|
|
44
|
+
|
|
45
|
+
These rules apply to all TypeScript and TSX files in the project.
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
---
|
|
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
|
+
globs:
|
|
4
|
+
alwaysApply: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Testing Standards
|
|
8
|
+
|
|
9
|
+
## Test Coverage and Structure
|
|
10
|
+
|
|
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.
|
|
12
|
+
|
|
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.
|
|
14
|
+
|
|
15
|
+
Avoid e2e tests for UI. Favor unit tests.
|
|
16
|
+
|
|
17
|
+
### Coverage Requirements
|
|
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
|
|
23
|
+
|
|
24
|
+
### Test Organization
|
|
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)
|
|
30
|
+
|
|
31
|
+
### Required Scenarios
|
|
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
|
|
38
|
+
|
|
39
|
+
### Test Quality
|
|
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
|
|
46
|
+
|
|
47
|
+
### Component Testing
|
|
48
|
+
|
|
49
|
+
- Use `renderWithProviders` for component tests
|
|
50
|
+
- Use `renderHookWithProviders` for hook tests
|
|
51
|
+
- Avoid mocking dependent components
|
|
52
|
+
- Test component behavior, not implementation
|
|
53
|
+
|
|
54
|
+
### Mocking Guidelines
|
|
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
|
|
62
|
+
|
|
63
|
+
### Test Utilities
|
|
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
|
|
68
|
+
|
|
69
|
+
## File Patterns
|
|
70
|
+
|
|
71
|
+
These rules apply to all test files with `.spec.ts` or `.spec.tsx` extensions.
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
alwaysApply: true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# TypeScript Development Standards
|
|
6
|
+
|
|
7
|
+
## Type Safety
|
|
8
|
+
|
|
9
|
+
Enforce comprehensive type safety across the codebase:
|
|
10
|
+
|
|
11
|
+
### Strict Type Checking
|
|
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.
|
|
14
|
+
|
|
15
|
+
### File Organization
|
|
16
|
+
|
|
17
|
+
- Place types at the bottom of files
|
|
18
|
+
- Define PropTypes before component definitions
|
|
19
|
+
|
|
20
|
+
## Best Practices
|
|
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
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Defines best practices for building consistent, maintainable, and responsive UI in Mallard Bay projects
|
|
3
|
+
globs:
|
|
4
|
+
alwaysApply: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# UI Development Standards
|
|
8
|
+
|
|
9
|
+
## Theme Usage
|
|
10
|
+
|
|
11
|
+
Use theme values consistently across all components:
|
|
12
|
+
|
|
13
|
+
### Colors
|
|
14
|
+
|
|
15
|
+
- Use theme colors instead of hardcoded values
|
|
16
|
+
- Example: `theme.colors.primary` instead of `'#000000'`
|
|
17
|
+
|
|
18
|
+
### Spacing
|
|
19
|
+
|
|
20
|
+
- Use theme spacing values for margins and padding
|
|
21
|
+
- Example: `theme.space[4]` instead of `'16px'`
|
|
22
|
+
|
|
23
|
+
### Typography
|
|
24
|
+
|
|
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
|
|
32
|
+
|
|
33
|
+
## Component Structure
|
|
34
|
+
|
|
35
|
+
Maintain clean and consistent component structure:
|
|
36
|
+
|
|
37
|
+
### Nesting
|
|
38
|
+
|
|
39
|
+
- Limit component nesting to maximum depth of 3
|
|
40
|
+
- Keep component hierarchy readable and maintainable
|
|
41
|
+
|
|
42
|
+
### Inline Styles
|
|
43
|
+
|
|
44
|
+
- Limit inline styles to maximum of 2 per component
|
|
45
|
+
- Prefer theme-based styling
|
|
46
|
+
|
|
47
|
+
### Component Library
|
|
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
|
|
51
|
+
|
|
52
|
+
## Responsive Design
|
|
53
|
+
|
|
54
|
+
Ensure responsive and accessible design:
|
|
55
|
+
|
|
56
|
+
### Breakpoints
|
|
57
|
+
|
|
58
|
+
- Use theme breakpoints for responsive design
|
|
59
|
+
- Implement mobile-first approach
|
|
60
|
+
|
|
61
|
+
### Spacing
|
|
62
|
+
|
|
63
|
+
- Use responsive spacing values
|
|
64
|
+
- Adapt layouts for different screen sizes
|
|
65
|
+
|
|
66
|
+
### Animations
|
|
67
|
+
|
|
68
|
+
- Use theme transition values for animations
|
|
69
|
+
- Keep animations smooth and performant
|
|
70
|
+
|
|
71
|
+
### Rendering
|
|
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
|
|
82
|
+
|
|
83
|
+
## File Patterns
|
|
84
|
+
|
|
85
|
+
These rules apply to all TypeScript and TSX files in the project.
|
|
86
|
+
|
|
87
|
+
## Components
|
|
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
|
|
@@ -17,8 +17,6 @@ alwaysApply: false
|
|
|
17
17
|
- Types should be defined at the bottom of files
|
|
18
18
|
- PropTypes should be defined before component definitions
|
|
19
19
|
- Prefer using alias for importing components. Only use relative for tests or when there's a direct sibling
|
|
20
|
-
- Exported functions should be at the top of the file, with helpers organized by knowledge domain under.
|
|
21
|
-
- React component prop types should be above the component definition.
|
|
22
20
|
|
|
23
21
|
## Code Reuse
|
|
24
22
|
|