ReddRadar
Agent skill
web-design
Principles and code snippets for designing responsive, accessible websites. Use this skill when building or refining web interfaces.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/web-design
Metadata
Additional technical details for this skill
- category
- design
SKILL.md
Web Design Handbook
Overview
This skill provides guidelines and examples for creating modern, user-friendly websites.
Core Principles
- User-centric design: Start with user needs; design navigation and layout accordingly.
- Responsive design: Ensure your site looks good on devices of all sizes.
- Accessibility: Follow WCAG guidelines; use semantic HTML; provide alternative text for images.
- Performance: Optimize images, minify CSS and JS, and use caching.
HTML & CSS Basics
HTML5 Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome</h1>
<p>This is a sample page.</p>
</main>
<footer>
<p>© 2025 Your Company</p>
</footer>
</body>
</html>
Responsive CSS with Flexbox
* {
box-sizing: border-box;
}
.nav {
display: flex;
list-style-type: none;
gap: 1rem;
}
.nav a {
text-decoration: none;
color: #333;
}
@media (max-width: 600px) {
.nav {
flex-direction: column;
}
}
CSS Frameworks
- Bootstrap: Provides a responsive grid system and ready-made UI components.
- Tailwind CSS: Utility-first framework for rapid customization.
Example using Tailwind:
<script src="https://cdn.tailwindcss.com"></script>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>
UI/UX Best Practices
- Keep navigation simple and consistent.
- Use whitespace to separate content.
- Maintain a clear visual hierarchy.
- Choose accessible color combinations (check contrast ratios).
- Use standard fonts for readability.
Performance Optimization
- Use
srcsetfor responsive images. - Compress images (JPEG/PNG/WebP).
- Minify and bundle CSS/JS.
- Enable browser caching and HTTP/2.
Additional Resources
- MDN Web Docs.
- W3C Web Accessibility Initiative (WAI).
- Google's Lighthouse performance tool.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?