Web Design
A comprehensive design reference synthesized from industry sources like Refactoring UI and Tailwind CSS. Covers structure, visual systems, interaction, and polish across 16 topic areas—from semantic HTML and spacing scales to animations, component states, and defensive CSS. Use when building or reviewing any web interface.
Web Design teaches production-grade interface design through a four-tier implementation priority system.
AI-generated summary based on this skill's SKILL.md
Install
pascalorg/skills/web-design · repository language: Shell
git clone https://github.com/pascalorg/skills
cp -r skills ~/.claude/skills/web-designgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install pascalorg/skills/web-designFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What web design best practices does this skill cover?
Web Design covers 16 topic areas synthesized from industry sources like Refactoring UI and Tailwind CSS. It addresses structure, visual systems, interaction, and polish—including semantic HTML, spacing scales, animations, component states, and defensive CSS. Use it when building or reviewing any web interface to ensure your design follows proven principles.
How do I design a website using Web Design guidance?
Web Design provides a comprehensive reference for creating professional websites. Start with structural foundations like semantic HTML, then apply visual systems through spacing scales and typography. Layer in interaction patterns, component states, and animations. The skill guides you through the entire process from layout decisions to defensive CSS techniques that make designs robust.
Does Web Design cover responsive web design?
Yes, Web Design includes responsive design as a core topic. It teaches modern web design principles that adapt across devices, covering layout systems, flexible spacing, and interaction patterns that work on all screen sizes. The skill synthesizes best practices from industry leaders to help you build interfaces that respond intelligently to different contexts.
What web design tools and workflow guidance is included?
Web Design provides workflow guidance aligned with modern tools and processes. While focused on principles over specific software, it covers the design thinking needed across any tool—from semantic structure to visual systems to component management. This foundation works whether you're using Figma, Adobe XD, or code-first approaches.
Can Web Design help me learn from beginner to advanced level?
Web Design scales from fundamentals to advanced techniques. Beginners start with semantic HTML and basic spacing; intermediate learners explore visual systems and component states; advanced practitioners refine animations, defensive CSS, and polish. The 16-topic structure lets you progress systematically through structure, visuals, interaction, and refinement.
What makes Web Design different from a typical web design tutorial?
Web Design synthesizes industry sources like Refactoring UI and Tailwind CSS into a cohesive reference rather than linear tutorials. It emphasizes principles and systems—spacing scales, visual hierarchy, component patterns—that transfer across projects. Use it as a review checklist and decision guide when building interfaces, not just a one-time learning path.