Web Design Guidelines

The web-design-guidelines skill provides AI agents with a comprehensive reference to modern frontend design principles, ensuring generated code aligns with current best practices. It acts as a knowledge base for creating consistent, accessible, and visually appealing user interfaces across various technologies.

When to use it

• Generating responsive layouts that adapt seamlessly to different screen sizes and devices.
• Creating accessible UI components that comply with WCAG standards for users with disabilities.
• Developing consistent styling systems using modern CSS methodologies like Flexbox or Grid.
• Refactoring legacy codebases to adhere to contemporary design patterns and usability heuristics.

Key capabilities

• Interpretation of modern frontend design principles and patterns.
• Guidance on creating visually cohesive and aesthetically pleasing interfaces.
• Recommendations for improving user experience (UX) and interface usability.
• Knowledge of current industry standards for web layout and typography.

Example prompts

• "Generate a responsive navigation bar using modern CSS that follows the latest web design guidelines."
• "Critique this existing landing page layout and suggest improvements based on current frontend best practices."
• "Create a card component grid that ensures accessibility and visual consistency across mobile and desktop views."

Tips & gotchas

This skill functions as a reference guide rather than an automated styling engine; it provides strategic advice but does not automatically apply specific CSS classes to your code. For optimal results, pair this skill with specific framework knowledge (e.g., React or Tailwind) to translate general design principles into executable code.