📖 About HTML/CSS
HTML5 and CSS3 are the foundation of modern web development. HTML provides semantic structure, while CSS enables powerful styling, animations, and responsive layouts. Together, they create accessible, performant, and visually stunning web experiences.
🎯 Best For
- Semantic web structure and accessibility
- Responsive web design
- Modern UI/UX implementation
- Progressive web apps (PWA)
- Cross-browser compatible interfaces
🔧 Key Features
- Semantic HTML5 elements (header, nav, main, article, section)
- CSS Grid and Flexbox for layouts
- CSS Custom Properties (variables)
- Media queries for responsive design
- CSS animations and transitions
- Modern selectors and pseudo-classes
🛠️ Development Tools
Build
npm run build
Test
npm run test
Lint
stylelint **/*.css && htmlhint **/*.html
Format
prettier --write **/*.{html,css}
📄 Package Contents (7 files)
AGENTS_RULES.md
Complete AI agent rules (universal)
- HTMLCSS-specific best practices
- TDD workflow (Red-Green-Refactor)
- DDD principles and patterns
- Git workflow and commit format
- Code quality principles
.cursorrules
Quick reference for Cursor IDE
- Essential rules summary
- Links to full documentation
- Optimized for quick loading
.gitignore
Git exclusions
- HTMLCSS-specific patterns
- Build artifacts
- IDE configuration files
- Dependency directories
AGENTS.md
Quick reference guide
- Common patterns
- Best practices summary
- Quick troubleshooting
README.md
Project template with examples
- Setup instructions
- Sample code and structure
- Testing examples
- Build and run commands
CODE_QUALITY_PRINCIPLES.md
Quality principles and best practices
- Avoid default values (fail-fast)
- Consistency across code paths
- Extract reusable functions
- HTMLCSS-specific examples
CONTRIBUTING.md
Contribution guidelines
- TDD workflow (Red-Green-Refactor)
- Git commit format
- Code review process
- Testing requirements (90% coverage)
💻 Code Examples
Semantic HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Page</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content here...</p>
</article>
</main>
<footer>
<p>© 2025 Company</p>
</footer>
</body>
</html>
CSS Grid Layout
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px);
}
CSS Custom Properties
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--spacing-unit: 8px;
--border-radius: 4px;
}
.button {
background: var(--primary-color);
color: white;
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: background 0.2s;
}
.button:hover {
background: var(--secondary-color);
}