html-css

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

Repository: G1Joshi/Agent-Skills
Last source activity: February 9, 2026 at 16:49
Detected SKILL.md language: English
Stars: 12
Forks: 3

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/G1Joshi/Agent-Skills --skill html-css

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

<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>

: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);
}

/* 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;
}

/* 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;
}

/* 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;
  }
}

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

html-css

Install options

Review the source files

HTML & CSS

When to Use

Quick Start

HTML & CSS

When to Use

Quick Start

Core Concepts

Semantic HTML

CSS Custom Properties

Common Patterns

Flexbox Layout

CSS Grid

Responsive Design

Best Practices

Troubleshooting

References

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

html-css

Source facts

Install options

Review the source files

More from this repository

HTML & CSS

When to Use

Quick Start

HTML & CSS

When to Use

Quick Start

Core Concepts

Semantic HTML

CSS Custom Properties

Common Patterns

Flexbox Layout

CSS Grid

Responsive Design

Best Practices

Troubleshooting

References

More from this repository