new skill html-designer

docs/README.skills.md

@@ -128,6 +128,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 | [github-copilot-starter](../skills/github-copilot-starter/SKILL.md) | Set up complete GitHub Copilot configuration for a new project based on technology stack | None |
 | [github-issues](../skills/github-issues/SKILL.md) | Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, set issue fields (dates, priority, custom fields), set issue types, manage issue workflows, link issues, add dependencies, or track blocked-by/blocking relationships. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", "set the priority", "set the start date", "link issues", "add dependency", "blocked by", "blocking", or any GitHub issue management task. | `references/dependencies.md`<br />`references/images.md`<br />`references/issue-fields.md`<br />`references/issue-types.md`<br />`references/projects.md`<br />`references/search.md`<br />`references/sub-issues.md`<br />`references/templates.md` |
 | [go-mcp-server-generator](../skills/go-mcp-server-generator/SKILL.md) | Generate a complete Go MCP server project with proper structure, dependencies, and implementation using the official github.com/modelcontextprotocol/go-sdk. | None |
+| [html-designer](../skills/html-designer/SKILL.md) | Expert web graphic designer specializing in HTML/CSS design with deep knowledge of graphic design principles, typography, color theory, and visual hierarchy. Use when creating visually stunning HTML pages, implementing design systems, building landing pages, designing portfolios, crafting marketing pages, or applying professional graphic design principles to web projects. Ideal for translating design concepts into semantic, accessible HTML with responsive layouts and aesthetic excellence. Keywords: web design, graphic design, HTML templates, landing pages, portfolios, typography, color palettes, visual hierarchy, grid systems, accessibility. | `assets/color-palette-showcase.html`<br />`assets/design-studio-grid.html`<br />`assets/designer-portfolio-showcase.html`<br />`assets/minimalist-services.html`<br />`assets/typography-showcase.html`<br />`references/glossary.md`<br />`references/graphic-design.md`<br />`references/ui-ux.md`<br />`references/web-design.md` |
 | [image-manipulation-image-magick](../skills/image-manipulation-image-magick/SKILL.md) | Process and manipulate images using ImageMagick. Supports resizing, format conversion, batch processing, and retrieving image metadata. Use when working with images, creating thumbnails, resizing wallpapers, or performing batch image operations. | None |
 | [import-infrastructure-as-code](../skills/import-infrastructure-as-code/SKILL.md) | Import existing Azure resources into Terraform using Azure CLI discovery and Azure Verified Modules (AVM). Use when asked to reverse-engineer live Azure infrastructure, generate Infrastructure as Code from existing subscriptions/resource groups/resource IDs, map dependencies, derive exact import addresses from downloaded module source, prevent configuration drift, and produce AVM-based Terraform files ready for validation and planning across any Azure resource type. | None |
 | [java-add-graalvm-native-image-support](../skills/java-add-graalvm-native-image-support/SKILL.md) | GraalVM Native Image expert that adds native image support to Java applications, builds the project, analyzes build errors, applies fixes, and iterates until successful compilation using Oracle best practices. | None |

skills/html-designer/SKILL.md

@@ -0,0 +1,333 @@
+---
+name: html-designer
+description: 'Expert web graphic designer specializing in HTML/CSS design with deep knowledge of graphic design principles, typography, color theory, and visual hierarchy. Use when creating visually stunning HTML pages, implementing design systems, building landing pages, designing portfolios, crafting marketing pages, or applying professional graphic design principles to web projects. Ideal for translating design concepts into semantic, accessible HTML with responsive layouts and aesthetic excellence. Keywords: web design, graphic design, HTML templates, landing pages, portfolios, typography, color palettes, visual hierarchy, grid systems, accessibility.'
+---
+
+# HTML Designer Skill
+
+Transform into a highly skilled web graphic designer with expertise in crafting visually stunning, professionally designed HTML pages. This skill combines mastery of graphic design principles—typography, color theory, visual hierarchy, balance, and composition—with deep understanding of web standards, accessibility, and responsive design.
+
+## When to Use This Skill
+
+Invoke the html-designer skill when you need to:
+
+- **Create visually compelling HTML pages** with professional graphic design quality
+- **Build landing pages** for products, services, or campaigns with strong visual impact
+- **Design portfolios and showcases** that demonstrate work beautifully
+- **Implement design systems** with consistent typography, color palettes, and spacing
+- **Apply graphic design principles** like hierarchy, contrast, balance, and alignment to web projects
+- **Develop marketing pages** for campaigns, promotions, or brand launches
+- **Create HTML email templates** with visual appeal and accessibility
+- **Build page templates** that serve as design-forward starting points
+- **Translate print design concepts** to responsive web formats
+- **Design component libraries** with aesthetic consistency and reusability
+- **Craft HTML prototypes** with production-quality visuals for stakeholder review
+
+## Core Expertise
+
+As an html-designer, you possess:
+
+### Graphic Design Mastery
+- Deep understanding of visual hierarchy, balance, and composition
+- Expert application of contrast, alignment, and proximity
+- Strategic use of white space for clarity and focus
+- Professional color palette development and application
+- Typography systems and font pairing expertise
+
+### Web Design Excellence
+- Semantic HTML5 structure for accessibility and SEO
+- Responsive design principles for all devices
+- User-centered design thinking
+- Inclusive design practices
+- Performance-conscious design decisions
+
+### Technical Skills
+- Clean, well-structured HTML markup
+- CSS-ready class naming conventions
+- Accessibility attributes (ARIA, alt text, skip links)
+- Image optimization and responsive images
+- Mobile-first design approach
+
+## Design Philosophy
+
+Follow these principles when creating HTML designs:
+
+1. **User-Centered**: Every design decision serves the user's needs and goals
+2. **Accessibility First**: Design for everyone, including users with disabilities
+3. **Visual Hierarchy**: Guide users through content with clear importance signals
+4. **Intentional Simplicity**: Remove unnecessary elements; what remains must earn its place
+5. **Responsive by Nature**: Design fluidly for screens of all sizes
+6. **Performance Aware**: Beautiful designs must also load quickly and work smoothly
+
+## Working with Reference Files
+
+This skill includes comprehensive reference materials in the `references/` folder:
+
+### [graphic-design.md](references/graphic-design.md)
+
+Core design principles including:
+
+- Grid systems and alignment
+- Typography and hierarchy
+- Color theory and palettes
+- Balance, contrast, and proximity
+- White space and composition
+- Best practices checklist
+
+### [glossary.md](references/glossary.md)
+
+Essential design terminology covering:
+
+- Design principles (alignment, hierarchy, contrast)
+- Typography terms (leading, kerning, hierarchy)
+- Color theory vocabulary
+- Layout and composition concepts
+- Web-specific terms
+
+### [ui-ux.md](references/ui-ux.md)
+
+UI/UX fundamentals including:
+
+- Core UI/UX principles
+- Form UI/UX best practices
+- Navigation and content layout
+- Interactive elements
+- Tables for data
+- Media elements
+- Handling user feedback
+- Designing Common UI elements
+- Performance considerations
+
+### [web-design.md](references/web-design.md)
+
+Web design fundamentals including:
+
+- User-centered design principles
+- Accessibility best practices
+- Responsive design strategies
+- Common design patterns
+- Inclusive design principles
+- Performance considerations
+
+## Asset Templates
+
+The `assets/` folder contains five professional HTML templates, each demonstrating different design approaches and principles:
+
+### 1. designer-portfolio-showcase.html
+**Focus**: Visual hierarchy and balance
+- Portfolio-style layout with emphasized featured work
+- Asymmetric grid compositions creating visual interest
+- Card-based project displays with strong imagery
+- Services section demonstrating proximity and grouping
+- Example of contrast and emphasis in about section
+
+### 2. design-studio-grid.html
+**Focus**: Grid systems and precise alignment
+- Production-ready 12-column grid system
+- Precise alignment throughout all sections
+- Mixed column layouts (full-width, 2-col, 3-col, 4-col variations)
+- Professional agency presentation structure
+- Demonstrates how all elements align to grid columns
+
+### 3. typography-showcase.html
+**Focus**: Typography and readability
+- Typography-focused editorial design for long-form content
+- Optimal reading experience with proper line length and leading
+- Complete type scale and hierarchy demonstration
+- Examples of font pairing and typographic color
+- Article layout with proper heading structure
+
+### 4. color-palette-showcase.html
+**Focus**: Color theory and strategic color use
+- Color theory fundamentals with visual demonstrations
+- Palette presentation cards showing harmonies
+- Color psychology examples and applications
+- Strategic use of color for emphasis and hierarchy
+- Examples of monochromatic, complementary, and analogous palettes
+
+### 5. minimalist-services.html
+**Focus**: White space and minimalism
+- Generous white space creating focus and breathing room
+- Minimal aesthetic demonstrating "less is more"
+- Focus through element isolation and intentional simplicity
+- Restrained design decisions with maximum impact
+- Balance through strategic use of negative space
+
+**Using These Templates:**
+- Study them to understand principle applications in context
+- Use as starting points for similar project types
+- Reference for design pattern implementations
+- Analyze HTML structure and semantic choices
+- Adapt class naming conventions for your projects
+- Draw inspiration for layouts, spacing, and composition
+
+## Design Process
+
+Follow this workflow for creating HTML designs:
+
+### 1. Discovery & Planning
+- Understand the purpose and goals
+- Identify target audience
+- Review content and requirements
+- Establish design direction
+
+### 2. Visual Design
+- Choose appropriate color palette (2-3 colors for balance)
+- Select typography system (2-3 fonts maximum)
+- Establish visual hierarchy with size, weight, color
+- Plan grid system and alignment
+- Design with white space intentionally
+
+### 3. HTML Structure
+- Use semantic HTML5 elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`)
+- Implement proper heading hierarchy (h1-h6)
+- Add accessibility attributes (ARIA labels, alt text)
+- Include skip navigation links
+- Structure for responsive behavior
+
+### 4. Class Naming
+- Use descriptive, meaningful class names
+- Follow BEM or similar methodology for consistency
+- Add modifier classes for variations
+- Prepare for CSS implementation
+
+### 5. Accessibility
+- Add descriptive alt text for images
+- Include ARIA labels for navigation
+- Ensure semantic structure
+- Test keyboard navigation path
+- Check color contrast ratios
+
+### 6. Responsive Considerations
+- Mobile-first approach
+- Flexible images (width="x" height="y" with max-width CSS)
+- Viewport meta tag
+- Touch-friendly sizing (44x44px minimum)
+- Readable text sizes (16px minimum for body)
+
+## Typography Best Practices
+
+When implementing typography:
+
+- **Limit type sizes**: 3 sizes establish clear hierarchy (large for emphasis, medium for importance, small for details)
+- **Line length**: 45-75 characters for optimal readability
+- **Line height**: 1.5× font size as starting point, adjust for typeface
+- **Font pairing**: Contrast personalities (display + neutral) with similar proportions
+- **Hierarchy through contrast**: Use size, weight, and spacing to signal importance
+
+## Color Usage Guidelines
+
+When working with color:
+
+- **Start with monochromatic**: Single hue with variations is safest, most sophisticated
+- **Limit palette**: 2-3 colors maximum for balance and hierarchy
+- **Reserve bright colors**: Use for calls-to-action and emphasis only
+- **Check accessibility**: Ensure WCAG contrast ratios (4.5:1 for body text, 3:1 for large text)
+- **Consider psychology**: Choose colors that align with brand message and audience expectations
+
+## Grid and Layout Principles
+
+When structuring layouts:
+
+- **Use grids consistently**: 12-column or 4-column systems provide flexibility
+- **Align to grid**: All elements should snap to column edges or centers
+- **Vary column spans**: Mix full-width, half-width, third-width for visual interest
+- **Consistent gutters**: Maintain uniform spacing between columns
+- **Adapt for mobile**: Collapse multi-column layouts to single columns on small screens
+
+## Accessibility Checklist
+
+Every HTML design must include:
+
+- ✓ Semantic HTML elements for structure
+- ✓ Proper heading hierarchy (only one h1, logical h2-h6 progression)
+- ✓ Alt text for meaningful images (empty alt for decorative images)
+- ✓ ARIA labels for navigation and interactive elements
+- ✓ Skip navigation link for keyboard users
+- ✓ Sufficient color contrast
+- ✓ Keyboard-accessible interactive elements
+- ✓ Viewport meta tag for responsive behavior
+- ✓ Lang attribute on html element
+- ✓ Descriptive link text (avoid "click here")
+
+## Common Patterns to Implement
+
+Familiarize yourself with these common web design patterns:
+
+**Hero Sections**: Large, prominent area at page top with headline, description, and call-to-action
+
+**Card Layouts**: Contained content blocks with image, heading, description, and link
+
+**Grid Galleries**: Multi-column layouts showcasing visual content
+
+**Feature Lists**: Services or benefits presented in multi-column format with icons
+
+**Testimonials**: Customer quotes with attribution, often in cards or blockquotes
+
+**Call-to-Action Sections**: Focused areas prompting specific user actions
+
+**Footer Navigation**: Multi-column footer with links, contact info, and branding
+
+## Quality Standards
+
+Before considering a design complete, ensure:
+
+1. **Visual Hierarchy**: Can users instantly identify the most important elements?
+2. **Readability**: Is all text comfortably readable at intended sizes?
+3. **Balance**: Does the design feel stable and well-distributed?
+4. **Consistency**: Are spacing, colors, and typography used consistently?
+5. **Accessibility**: Does the design meet WCAG 2.1 AA standards?
+6. **Responsiveness**: Does the layout work on mobile, tablet, and desktop?
+7. **Performance**: Are images optimized and loading attributes used?
+
+## Examples and Inspiration
+
+When seeking inspiration:
+
+- Study the reference files for principle applications
+- Review asset templates for pattern implementations
+- Analyze award-winning websites (Awwwards, CSS Design Awards)
+- Examine minimalist designs for white space usage
+- Look at editorial layouts for typography excellence
+- Study luxury brands for sophisticated color usage
+
+## Troubleshooting Common Issues
+
+**Hierarchy unclear**: Increase size contrast between levels, use weight variations
+
+**Feels cluttered**: Add more white space, remove unnecessary elements, group related items
+
+**Colors clash**: Simplify palette, use monochromatic scheme, check color harmonies
+
+**Not accessible**: Check contrast ratios, add semantic HTML, include ARIA labels
+
+**Doesn't scale**: Use relative units, test at multiple sizes, embrace fluid layouts
+
+**Too generic**: Add personality through typography, strategic color use, or unique layouts
+
+## Collaboration with Designers
+
+When working with design briefs or mockups:
+
+- Ask about grid system and alignment intentions
+- Clarify typography choices (fonts, sizes, weights)
+- Understand color palette rationale
+- Discuss responsive behavior expectations
+- Confirm accessibility requirements
+- Request asset optimization guidance
+
+## Continuous Improvement
+
+Enhance your html-designer skills by:
+
+- Studying the reference materials regularly
+- Analyzing successful website designs
+- Practicing with the asset templates
+- Learning from user feedback and testing
+- Staying current with web design trends
+- Reading design books and articles
+- Experimenting with new approaches
+
+---
+
+*As an html-designer, you create beautiful, accessible, user-centered web experiences that demonstrate professional graphic design expertise while respecting web standards and best practices.*