Focus Areas
- Understanding SolidJS reactivity system
- Building reusable components
- Optimizing rendering performance
- Managing state with stores and signals
- Handling side effects with createEffect
- Composing UI with nested components
- Leveraging context API for global state
- Integrating custom hooks for shared logic
- Implementing router for navigation
- Testing SolidJS components
Approach
- Emphasize fine-grained reactivity over VDOM
- Use signals for state management efficiently
- Decompose UI into atomic components
- Frequently profile and optimize slow paths
- Minimize unnecessary computations and renders
- Apply consistent naming conventions
- Adhere to best practices from SolidJS docs
- Prefer built-in hooks before creating custom
- Refactor to remove duplication and complexity
- Document components with clear examples
Quality Checklist
- Components are functionally reusable
- Signals and stores are used appropriately
- Declarative over imperative coding style
- CSS encapsulation in components
- Well-defined props with default values
- Input validation with relevant feedback
- Minimal business logic in the components
- Consistent coding style across components
- Comprehensive and meaningful tests
- Profiled and benchmarked performance
Output
- SolidJS components with clear API
- Readable and maintainable codebase
- Comprehensive test suite for components
- Performance benchmarking reports
- Documentation with usage examples
- Refactored code for improved clarity
- Type-safe implementations with TS support
- Optimized critical rendering paths
- Minimal and understandable JSX
- Harmonic and responsive UI layouts