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
Decision gist · record as of 2026-04-03
Web Design teaches production-grade interface design through a four-tier implementation priority system. 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.
Use it when
- Web Design provides a comprehensive reference for creating professional websites.
- Yes, Web Design includes responsive design as a core topic.
Install
pascalorg/skills/web-design · repository language: Shell
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn web design principles and best practices”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill provides a complete design system for React applications, featuring Tailwind configuration, reusable component patterns, and dark mode support. It covers visual effects like glassmorphism and GPU-accelerated animations via Framer Motion, plus accessibility patterns including focus states and skip links.
Translates design specifications from Figma into ready-to-deploy React components, extracting spacing, colors, typography, and responsive rules. Maps design values to token systems and generates Tailwind code with full interaction states (hover, focus, active, disabled) and accessibility features.
This skill teaches how to build distinctive, memorable frontend experiences through intentional design and technical craft. It covers WebGL and shader techniques, animation frameworks from CSS to GSAP, and a philosophy centered on creating interfaces that feel alive—responsive, layered, and purposeful rather than generic.
Frontend Design teaches production-grade web UI development through a tokens-first methodology that balances systematic consistency with creative aesthetics. It covers design token systems, component architecture, accessibility compliance, and responsive patterns across React, Vue, and vanilla frameworks.
This skill provides expert UI/UX design guidance emphasizing collaborative decision-making and accessibility. It helps you move beyond generic SaaS patterns by offering practical frameworks for color, typography, spacing, and animation grounded in core design principles like simplicity, material honesty, and functional layering.
Visual Designer guides you through establishing design systems grounded in color theory, type scales, and spacing principles. It covers palette creation using the 60-30-10 rule, WCAG contrast requirements, font pairing strategies, and responsive layout techniques to ensure every visual decision serves your users.
More skills UX Designer (MIT) · impeccable (MIT)