design-taste-frontend

To translate a design brief into a frontend landing page, this skill analyzes the brief to infer aesthetic directions and maps them to a unique design system. It applies anti-slop principles to ensure the final React or Next.js output avoids generic templates and placeholder content.

Anti-slop principles in frontend design ensure uniqueness by enforcing real design systems, strict pre-flight checks, and consistent typography and color schemes. Applying these principles to a portfolio prevents generic layouts and ensures high-quality, distinct visual directions.

To structure a Next.js project for a SaaS redesign, this skill provides default architecture and conventions tailored for Tailwind CSS and Motion. It defines layout guidelines and interactive UI states to ensure the redesign maintains consistency across loading, empty, and error states.

Yes, this frontend design approach handles interactive UI states by ensuring full UI state cycles. It provides specific guidelines for loading states, empty states, error states, and tactile feedback, ensuring the React interface remains accessible and usable during all user interactions.

Yes, you can use this skill to generate a design system for a React portfolio while avoiding placeholder images. It includes an image and visual asset strategy that encourages using real images and logos, discouraging generic placeholders to maintain visual quality.

Yes, you need Motion.js alongside React or Next.js and Tailwind CSS to implement the generated frontend designs. These dependencies are required to achieve the interactive UI states, tactile feedback, and design system mapping specified by the brief inference process.