Claude MarketplacesSubmit
jezweb avatar

Web Design Patterns

jezweb/claude-skills

This is for when you're tired of Claude generating the same bland hero sections and card grids that scream "AI made this." Instead of templates, it gives you principle-based patterns that explain why and when to use different approaches for heroes, CTAs, trust signals, testimonials, and card layouts. The smart bit is the load-on-demand structure: you only read the reference file you need for whatever section you're building right now. It won't make you a designer overnight, but it should help you ship sections that look like a human actually thought about the business context instead of filling in a skeleton.

skills.sh installs
461
GitHub stars
1.1K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill web-design-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

This is for when you're tired of Claude generating the same bland hero sections and card grids that scream "AI made this." Instead of templates, it gives you principle-based patterns that explain why and when to use different approaches for heroes, CTAs, trust signals, testimonials, and card layouts. The smart bit is the load-on-demand structure: you only read the reference file you need for whatever section you're building right now. It won't make you a designer overnight, but it should help you ship sections that look like a human actually thought about the business context instead of filling in a skeleton.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/jezweb/claude-skills
Categories
AI & Agent Building, Design & UI/UX
First seen
Jun 3, 2026

More from jezweb/claude-skills

All 166

Recommended

More AI & Agent Building
1ythx-101 avatarx-tweet-fetcherythx-101/x-tweet-fetcherFetch tweets, replies, timelines, search results, X Lists, and X Articles from X/Twitter without login or API keys. Single tweets: zero dependencies (FxTwitter)455skills.sh installs
2manutej avatarlinear-dev-acceleratormanutej/luxor-claude-marketplaceAccelerate software development with Linear project management and MCP server integration. Master issue tracking, project workflows, and development automation 446skills.sh installs
3cacr92 avatarwechat-automationcacr92/wereply当用户要求"微信监听"、"消息提取"、"Agent 开发"、"wxauto"、"Accessibility API"、"UI 自动化"、"输入框控制"、"Platform Agent"，或者提到"微信自动化"、"消息监控"、"WeChat monitoring"时使用此技能。用于开发 WeReply 的 Platfor445skills.sh installs
4majesteitbart avatarshadcn-ui-expertmajesteitbart/talentmatcherDevelop high-quality, accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Use when building forms, layouts, dialogs, tables, or any UI comp445skills.sh installs
5alirezarezvani avatarhandoffalirezarezvani/claude-skillsCompact the current conversation into a handoff document for another agent to pick up. References existing artifacts (PRDs, plans, ADRs, issues, commits, diffs)443skills.sh installs
6yeachan-heo avataromc-referenceyeachan-heo/oh-my-claudecodeOMC agent catalog, available tools, team pipeline routing, commit protocol, and skills registry. Auto-loads when delegating to agents, using OMC tools, orchestr439skills.sh installs