Html css

Skill G1Joshi/Agent-Skills/skills/languages/html-css

A comprehensive skill catalog for AI agents

Install

npx -y skills add G1Joshi/Agent-Skills --skill html-css

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

10 stars10 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

HTML5 and CSS3 for web structure, styling, flexbox, grid, and responsive layouts. Use for .html and .css files.

SKILL.md

3.6 KB, as published. Nobody here has run it

HTML & CSS

Modern HTML5 and CSS3 for semantic web structure and responsive styling.

When to Use

Working with .html and .css files
Building responsive web layouts
Creating accessible web interfaces
Styling web components

Quick Start

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="container">
      <h1>Hello World</h1>
    </main>
  </body>
</html>

Core Concepts

Semantic HTML

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Article Title</h1>
      <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Content...</p>
  </article>
</main>

<footer>
  <p>&copy; 2024 Company</p>
</footer>

CSS Custom Properties

:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --spacing-md: 1rem;
  --radius-md: 0.5rem;
  --font-sans: system-ui, sans-serif;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}

Common Patterns

Flexbox Layout

/* Center content */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Card grid with wrap */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}

CSS Grid

/* Responsive grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Page layout */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Responsive Design

/* Mobile-first approach */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Container queries */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

Best Practices

Do:

Use semantic HTML elements
Mobile-first responsive design
Use CSS custom properties for theming
Include proper accessibility attributes

Don't:

Use <div> for everything (use semantic tags)
Use inline styles for complex styling
Forget viewport meta tag
Ignore color contrast requirements

Troubleshooting

Issue	Cause	Solution
Layout overflow	Fixed widths	Use percentage or min/max
Flex items not wrapping	Missing `flex-wrap`	Add `flex-wrap: wrap`
Grid gaps not showing	Old browser	Check browser support