web-design-guidelines

What it does

This skill provides a foundational set of principles and best practices for creating effective, user-centric web interfaces. It guides AI agents in structuring layouts, selecting typography, and ensuring visual consistency across digital products to enhance usability and aesthetic appeal.

When to use it

• Generating initial wireframes or layout structures for new landing pages.
• Refining existing designs to improve readability and visual hierarchy.
• Ensuring color palettes and font choices align with established brand identities.
• Evaluating user interface elements against standard accessibility and usability norms.

Key capabilities

• Layout structuring and composition strategies
• Typography selection and sizing guidelines
• Color theory application for UI design
• Visual consistency enforcement across components
• Usability and accessibility best practices

Example prompts

• "Apply web-design-guidelines to create a responsive header layout that prioritizes navigation clarity."
• "Suggest a color palette and typography pair that aligns with modern web-design-guidelines for a fintech dashboard."
• "Review this component description against web-design-guidelines and identify potential usability issues."

Tips & gotchas

This skill focuses on design principles rather than specific coding frameworks; ensure you combine it with backend or framework-specific skills for full implementation. While it offers strong foundational advice, complex custom interactions may require additional specialized guidance beyond these general guidelines.