Frontend Expert

frontend development rules

When reviewing or writing code, apply these guidelines:

• Frontend Development

• Offer suggestions for improving the HTMX-based frontend

• Assist with responsive design and user experience enhancements

• Help with client-side performance optimization

Project-Specific Notes: The frontend uses HTMX for simplicity. Suggest improvements while maintaining this approach.

frontend performance optimization

When reviewing or writing code, apply these guidelines:

• Favor server-side rendering and avoid heavy client-side rendering where possible.

• Implement dynamic loading for non-critical components and optimize image loading using WebP format with lazy loading.

frontend react rule

When reviewing or writing code, apply these guidelines:

• Frontend: React.js (for admin panel, if required)

frontend stack rules

When reviewing or writing code, apply these guidelines:

• Framework: Next.js 15+ (App Router required, React 19)

• Language: TypeScript 5.6+

• UI Components: shadcn/ui (based on Radix UI primitives)

• Styling: Tailwind CSS

• Icons: Lucide React

frontend tech stack

When reviewing or writing code, apply these guidelines:

• Use React.js for the admin panel (if required).

ui and styling

When reviewing or writing code, apply these guidelines:

• Maintain a consistent design language across the application.

• Use CSS preprocessors (e.g., Sass, Less) for improved styling capabilities.

• Follow BEM (Block Element Modifier) naming conventions for CSS classes.

ui and styling rule

When reviewing or writing code, apply these guidelines:

• Utilize Tailwind CSS utility classes for styling components.

• Follow Shadcn UI component guidelines and best practices.

• Ensure UI is responsive and accessible.

ui and styling rules

When reviewing or writing code, apply these guidelines:

• Create responsive designs for popup and options pages

• Use CSS Grid or Flexbox for layouts

• Implement consistent stylin

ui components expert

chakra ui accessibility features

When reviewing or writing code, apply these guidelines:

• Utilize Chakra UI's built-in accessibility features

chakra ui best practices

When reviewing or writing code, apply these guidelines:

• Use ChakraProvider at the root of your app

• Utilize Chakra UI components for consistent design

• Implement custom theme for brand-specific styling

• Use responsive styles with the Chakra UI breakpoint system

• Leverage Chakra UI hooks for enhanced functionality

chakra ui component composition

When reviewing or writing code, apply these guidelines:

• Implement proper component composition using Chakra UI

chakra ui dark mode implementation

When reviewing or writing code, apply these guidelines:

• Implement dark mode using Chakra UI's color mode

chakra ui performance optimization

When reviewing or writing code, apply these guidelines:

• Follow Chakra UI best practices for performance optimization

chakra ui responsive design

When reviewing or writing code, apply these guidelines:

• Use Chakra UI's layout components for responsive design

chakra ui semantic html rendering

When reviewing or writing code, apply these guidelines:

• Use the 'as' prop for semantic HTML rendering

chakra ui theme directory rules

When reviewing or writing code, apply these guidelines:

• Create theme/index.js to export theme

• Place theme foundations in theme/foundations/

• Place component-specific theme overrides in theme/components/

material ui configuration

When reviewing or writing code, apply these guidelines:

• The project uses Material UI.

Consolidated Skills

This expert skill consolidates 2 individual skills:

• frontend-expert

• ui-components-expert

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.