Frontend Expert

What it does

The Frontend Expert skill assists AI agents in generating clean, accessible, and responsive frontend code snippets using HTML, CSS, and JavaScript. It focuses on providing suggestions for improving existing code or creating new components based on detailed descriptions, while adhering to specific project guidelines. The skill is particularly adept at working with HTMX and Next.js environments and emphasizes performance optimization techniques like server-side rendering and lazy loading.

When to use it

• Generating HTML, CSS, and JavaScript code snippets for a frontend application.
• Improving the responsiveness and user experience of an existing frontend design.
• Optimizing client-side performance by suggesting efficient coding practices.
• Developing components for an admin panel using React.js within a Next.js environment.
• Ensuring accessibility and consistent styling across a web application.

Key capabilities

• Provides suggestions for improving HTMX-based frontend code.
• Assists with responsive design and user experience enhancements.
• Offers guidance on client-side performance optimization, including server-side rendering and WebP image loading with lazy loading.
• Supports development using Next.js 15+ (App Router required, React 19), TypeScript 5.6+, shadcn/ui, Tailwind CSS, and Lucide React.
• Enforces consistent design language and BEM naming conventions for CSS classes.

Example prompts

• "Generate a responsive navigation bar using HTML, CSS, and JavaScript."
• "Suggest improvements to this HTMX snippet for displaying a user profile."
• "How can I optimize the loading time of images in my Next.js application?"
• “Create a React component with Shadcn UI styling for a button.”

Tips & gotchas

• The skill is designed to work within existing projects, particularly those utilizing HTMX and Next.js. It will maintain these approaches when making suggestions.
• Be specific in your requests; detailed descriptions yield better results.
• Familiarity with concepts like server-side rendering and lazy loading will help you interpret the skill's recommendations effectively.