web-design-guidelines

What it does

This skill provides a structured framework for AI agents to generate high-quality, professional web designs. It ensures outputs align with modern best practices regarding layout, typography, and visual hierarchy.

When to use it

• Generating complete HTML/CSS codebases for landing pages or dashboards.
• Refactoring existing UI components to improve accessibility and responsiveness.
• Creating design system documentation or style guides for development teams.
• Prototyping new features with consistent styling before full implementation.

Key capabilities

• Enforces modern web standards (HTML5, CSS3).
• Applies responsive design principles for various screen sizes.
• Maintains consistent color palettes and typography across elements.
• Structures code for readability and maintainability.

Example prompts

• "Build a responsive landing page using the web-design-guidelines skill that includes a hero section, features grid, and footer."
• "Refactor this existing HTML component to adhere strictly to the defined design guidelines and improve its mobile layout."
• "Generate a complete dashboard UI with sidebar navigation and data tables following the established style system."

Tips & gotchas

Ensure your AI agent has access to the specific template repository (kimny1143/claude-code-template) where these guidelines are defined. For complex applications, explicitly request adherence to the color variables and spacing units outlined in the guide to maintain visual consistency.