From f1e73f5ed843413be1481f3ef2a4533791ad171d Mon Sep 17 00:00:00 2001 From: jhauga Date: Mon, 9 Mar 2026 21:38:35 -0400 Subject: [PATCH 1/5] new skill html-designer --- docs/README.skills.md | 1 + skills/html-designer/SKILL.md | 333 +++++++ .../assets/color-palette-showcase.html | 453 +++++++++ .../assets/design-studio-grid.html | 389 ++++++++ .../assets/designer-portfolio-showcase.html | 256 ++++++ .../assets/minimalist-services.html | 260 ++++++ .../assets/typography-showcase.html | 254 ++++++ skills/html-designer/references/glossary.md | 179 ++++ .../references/graphic-design.md | 154 ++++ skills/html-designer/references/ui-ux.md | 856 ++++++++++++++++++ skills/html-designer/references/web-design.md | 298 ++++++ 11 files changed, 3433 insertions(+) create mode 100644 skills/html-designer/SKILL.md create mode 100644 skills/html-designer/assets/color-palette-showcase.html create mode 100644 skills/html-designer/assets/design-studio-grid.html create mode 100644 skills/html-designer/assets/designer-portfolio-showcase.html create mode 100644 skills/html-designer/assets/minimalist-services.html create mode 100644 skills/html-designer/assets/typography-showcase.html create mode 100644 skills/html-designer/references/glossary.md create mode 100644 skills/html-designer/references/graphic-design.md create mode 100644 skills/html-designer/references/ui-ux.md create mode 100644 skills/html-designer/references/web-design.md diff --git a/docs/README.skills.md b/docs/README.skills.md index 4af14033d..51734da39 100644 --- a/docs/README.skills.md +++ b/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`
`references/images.md`
`references/issue-fields.md`
`references/issue-types.md`
`references/projects.md`
`references/search.md`
`references/sub-issues.md`
`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`
`assets/design-studio-grid.html`
`assets/designer-portfolio-showcase.html`
`assets/minimalist-services.html`
`assets/typography-showcase.html`
`references/glossary.md`
`references/graphic-design.md`
`references/ui-ux.md`
`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 | diff --git a/skills/html-designer/SKILL.md b/skills/html-designer/SKILL.md new file mode 100644 index 000000000..36f814d4e --- /dev/null +++ b/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 (`
`, `