Web Design Methodology
This is a solid foundation for building HTML/CSS prototypes with consistent patterns rather than reinventing structure every time. You get semantic CSS custom properties, BEM naming conventions, mobile-first responsive layouts, and accessible markup out of the box. It also includes optional three-state dark mode if you need it. The methodology focus means this handles how you structure your code, while the separate web-design-patterns skill covers actual component designs. Worth grabbing if you're tired of inconsistent CSS architectures across projects or want Claude to follow production-ready conventions from the start.
- skills.sh installs
- 311
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add jezweb/claude-skills --skill web-design-methodology --agent claude-codeInstalls into .claude/skills of the current project.
Files
This is a solid foundation for building HTML/CSS prototypes with consistent patterns rather than reinventing structure every time. You get semantic CSS custom properties, BEM naming conventions, mobile-first responsive layouts, and accessible markup out of the box. It also includes optional three-state dark mode if you need it. The methodology focus means this handles how you structure your code, while the separate web-design-patterns skill covers actual component designs. Worth grabbing if you're tired of inconsistent CSS architectures across projects or want Claude to follow production-ready conventions from the start.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/jezweb/claude-skills
- Categories
- Frontend Development, Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
More from jezweb/claude-skills
All 166- Clerk Auth310
- Open Source Contributions309
- Tinacms304
- Sveltia Cms302
- Google Spaces Updates301
- Firebase Storage296
- Django Cloud Sql Postgres272
- Electron Base263
- Google App Engine249
- Jquery 4232
- Claude Capabilities230
- Testing Library203
- Gemini Peer Review200
- Gemini Image Gen197
- Deep Debug162
- Dependency Audit160
- Gemini Guide149
- Context Mate142
- MCP OAuth Cloudflare
- OpenAI Apps MCP
- Shadcn Ui3.6K
- Color Palette3.4K
- Tailwind Theme Builder3.3K
- Wordpress Elementor3K
Recommended
More Frontend Development
clerk-authjezweb/claude-skillsClerk auth with API Keys beta (Dec 2025), Next.js 16 proxy.ts (March 2025 CVE context), API version 2025-11-10 breaking changes, clerkMiddleware() options, webh310skills.sh installs
streamlitsilvainfm/claude-skillsFast Python framework for building interactive web apps, dashboards, and data visualizations without HTML/CSS/JavaScript. Use when user wants to create data app308skills.sh installstinacmsjezweb/claude-skillsBuild content-heavy sites with Git-backed TinaCMS. Provides visual editing for blogs, documentation, and marketing sites. Supports Next.js, Vite+React, and Astr304skills.sh installs
setting-up-tauri-projectsdchuk/claude-code-tauri-skillsHelps users create and initialize new Tauri v2 projects for building cross-platform desktop and mobile applications. Covers system prerequisites and setup requi302skills.sh installs
tailwindcss-accessibilityjosiahsiegel/claude-plugin-marketplaceTailwind CSS accessibility patterns including WCAG 2.2 compliance, touch targets, focus management, and ARIA. PROACTIVELY activate for: (1) building accessible 299skills.sh installs