html-css

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

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

html-css is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using html-css should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/html-css/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/languages/html-css/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/html-css/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How html-css Compares

Feature / Agent	html-css	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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

```html
<!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

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

```css
: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

```css
/* 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

```css
/* 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

```css
/* 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     |

## References

- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web)
- [CSS-Tricks](https://css-tricks.com/)