Frontend Prime

What it does

This skill generates clean, responsive HTML/CSS/JavaScript code snippets tailored to specific design aesthetics and user prompts. It focuses on producing intentionally crafted frontend code that avoids common AI-generated patterns ("AI slop") by emphasizing deliberate design choices and adhering to best practices for color theming, SEO, and accessibility. The goal is to create unique and memorable user interfaces.

When to use it

• You need a starting point for a custom frontend component or page.
• You want code that avoids generic AI-generated patterns and feels intentionally designed.
• You're looking for assistance in implementing specific design aesthetics (e.g., Brutalist, Art Deco, Lo-fi).
• You require help with setting up SEO best practices within your frontend code.

Key capabilities

• Generates HTML/CSS/JavaScript code snippets.
• Supports a range of pre-defined aesthetic directions (Brutally minimal, Maximalist editorial, Retro-futuristic, etc.).
• Enforces rules to avoid common "AI slop" patterns in generated code.
• Promotes the use of distinctive Google Fonts and CSS custom properties for theming.
• Includes SEO best practices such as meta tags, JSON-LD structured data, and URL optimization.

Example prompts

• “Generate a card component with a Brutalist aesthetic using Instrument Serif font.”
• "Create a landing page section in Neo-glassmorphic style, including a scroll animation."
• "Give me the HTML for a product listing with an Art Deco feel and semantic color variables for light and dark mode."

Tips & gotchas

• Design First: The quality of the output heavily relies on clear aesthetic direction. Vague prompts will lead to generic results.
• Avoid "AI Slop": Be mindful of the listed patterns to avoid; actively steer away from them in your requests.
• SEO is Key: The skill incorporates SEO best practices, but you may need to adapt and expand upon these for full optimization.