mirzaglitch/mirzaglitch-first-assistant icon
public
Published on 4/15/2025
My First Assistant

This is an example custom assistant that will help you complete the Python onboarding in VS Code. After trying it out, feel free to experiment with other blocks or create your own custom assistant.

Rules
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
anthropic Claude 3.5 Haiku model icon

Claude 3.5 Haiku

anthropic

200kinput·8.192koutput
gemini Gemini 2.0 Flash model icon

Gemini 2.0 Flash

gemini

openrouter or/Optimus-Alpha model icon

or/Optimus-Alpha

openrouter

Here are some best practices to follow while coding in React.js:

## 1. Component Structure
- **Functional Components:** Prefer functional components over class components for simplicity and better performance.
- **Separation of Concerns:** Organize components logically (e.g., presentational vs. container components).

## 2. State Management
- **Lift State Up:** Keep state in the closest common ancestor of components that need it.
- **Use Context API:** For global state management, consider using the Context API instead of prop drilling.

## 3. Hooks Usage
- **Use Built-in Hooks:** Utilize built-in hooks like `useState`, `useEffect`, and `useContext` for managing state and side effects.
- **Custom Hooks:** Create custom hooks for reusable logic.

## 4. Performance Optimization
- **Memoization:** Use `React.memo` for components and `useMemo`/`useCallback` for functions to prevent unnecessary re-renders.
- **Code Splitting:** Implement lazy loading with `React.lazy` and `Suspense` to improve load times.

## 5. Prop Types and Default Props
- **Prop Types:** Use `prop-types` to validate props passed to components.
- **Default Props:** Define default props to ensure components have fallback values.

## 6. Accessibility
- **Semantic HTML:** Use semantic HTML elements for better accessibility.
- **ARIA Roles:** Implement ARIA roles and attributes where necessary to enhance screen reader support.

## 7. Testing
- **Unit Testing:** Write unit tests for components using libraries like Jest and React Testing Library.
- **End-to-End Testing:** Use tools like Cypress for end-to-end testing of your application.

## 8. Code Quality
- **Linting:** Use ESLint with a React plugin to enforce coding standards.
- **Formatting:** Use Prettier for consistent code formatting.

## 9. Documentation
- **Commenting:** Write clear comments and documentation for complex logic.
- **Storybook:** Use Storybook to document and showcase components in isolation.

## 10. Version Control
- **Git Commits:** Use meaningful commit messages and follow a consistent branching strategy (e.g., Git Flow).

By following these best practices, you'll improve the maintainability, performance, and accessibility of your React applications.
Next.jshttps://nextjs.org/docs/app
Zodhttps://zod.dev/
Reacthttps://react.dev/reference/
Tanstack Starthttps://tanstack.com/start/latest/docs/framework/react/overview
Tanstack Query dochttps://tanstack.com/query/latest/docs/framework/react/overview

Prompts

Learn more

No Prompts configured

Context

Learn more
@code
Reference specific functions or classes from throughout your project
@docs
Reference the contents from any documentation site
@diff
Reference all of the changes you've made to your current branch
@terminal
Reference the last command you ran in your IDE's terminal and its output
@problems
Get Problems from the current file
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@codebase
Reference the most relevant snippets from your codebase

No Data configured

MCP Servers

Learn more

No MCP Servers configured