Frontend Dev Guidelines

What it does

This skill provides a comprehensive guide to modern React frontend development, focusing on best practices for building user interfaces and experiences. It emphasizes techniques like Suspense-based data fetching, lazy loading components, proper file organization, and performance optimization within a React project. The guidelines cover component creation, feature implementation, and code structure using tools like TanStack Query, TanStack Router, and MUI v7.

When to use it

• Creating new React components or pages.
• Developing new features for your frontend application.
• Implementing data fetching logic with TanStack Query.
• Setting up routing within the application using TanStack Router.
• Styling components using MUI v7.
• Optimizing the performance of your frontend code.

Key capabilities

• Component Creation Checklist: Provides a structured approach to creating new React components, including TypeScript usage (React.FC<Props>), lazy loading with React.lazy(), and utilizing SuspenseLoader for loading states.
• New Feature Structure: Defines a standardized directory structure for organizing features within the project (e.g., /features/{feature-name}/api/, /components/, /hooks/).
• Import Alias Reference: Offers a quick reference guide to commonly used import aliases (@/, ~types, ~components, ~features) and their corresponding file paths.
• Code Snippets & Examples: Includes common imports for React, MUI components, TanStack Query, TanStack Router, project components, hooks, and types.

Example prompts

• "Show me the checklist for creating a new component."
• "What is the recommended directory structure for a new feature?"
• "How do I lazy load a heavy React component?"
• "Remind me of the import alias for project components."

Tips & gotchas

• The skill assumes familiarity with React, TypeScript, and related tools like TanStack Query/Router and MUI v7.
• Pay attention to the recommended file organization structure when creating new features to maintain consistency across your project.
• Follow the component creation checklist to ensure type safety and optimized loading states.