Modern Web Design

What it does

This skill enables AI agents to generate modern, responsive websites using design principles, Tailwind CSS, and contemporary UI patterns. It creates production-ready code incorporating animations, responsive layouts, and accessibility features. The tool focuses on building frontend UIs and user experiences by leveraging pre-defined style categories and component templates.

When to use it

• Creating landing pages and marketing websites.
• Building portfolio or personal brand sites.
• Developing interfaces for SaaS applications or e-commerce product pages.
• Constructing blog and content sites, as well as dashboard and admin interfaces.

Key capabilities

• Mobile-first responsive design with breakpoint optimization.
• Use of design tokens for consistent spacing, colors, and typography.
• Component-based architecture for maintainable code.
• Accessibility-first development with ARIA labels and semantic HTML.
• Performance optimization through minimal CSS and efficient animations.
• Predefined style categories: Minimalist Professional, Modern SaaS, Creative Portfolio, E-commerce Optimized.
• Reusable components available via assets/component-templates.html.

Example prompts

• "Create a landing page for my new bakery using the 'Minimalist Professional' design category."
• "Generate an e-commerce product page with conversion-optimized CTAs and trust signals."
• "Build a portfolio website showcasing my photography, utilizing the 'Creative Portfolio' style."

Tips & gotchas

• The skill utilizes Tailwind CSS; familiarity with its utility classes will enhance results.
• Refer to references/design-systems.md for complete style specifications before generating code.
• The generated code includes Vanilla JavaScript for lightweight interactions and animations.