web-design
Web Design
A practitioner-sourced reference for building web interfaces well. Synthesized from Refactoring UI, Tailwind CSS, shadcn/ui, Laws of UX, animations.dev, detail.design, Every Layout, Web Interface Guidelines, jakub.kr, userinterface.wiki (Raphael Salaja), and other authoritative sources.
Use this skill whenever you are building, reviewing, or improving a web interface.
Implementation Priority
When building or reviewing a UI, work through these tiers in order. Each tier depends on the ones above it — fixing a shadow detail is wasted effort if the layout is broken.
Tier 1: Structure (get this right first)
- Semantic HTML. Correct elements (
<button>,<nav>,<main>, headings in order). Everything else builds on this. - Layout. Grid/flex structure, spacing scale, content width constraints (
max-w-prose, 12-col grid). Does the page hold together at every viewport? - Responsive behavior. Mobile-first, intrinsic sizing (
auto-fillgrids,clamp(),flex-wrap). No content hidden on small screens without reason. - Typography fundamentals. Type scale, line height (1.5 body, 1.1-1.25 headings), line length (
max-width: 65ch),remunits for font sizes.
Tier 2: Visual System (the design backbone)
More from pascalorg/skills
image-to-text
Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.
413image-compare
Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.
50image-analysis
Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette".
46contrast-check
Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility.
36agent-collaboration
Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review. Use when tasks are complex enough to benefit from different models' strengths, when you want adversarial review to catch blind spots, or when coordinating multi-step workflows across agent roles. Triggers on complex projects, multi-step tasks, architecture decisions, or when explicitly requested.
13