qte77/researching-website-design
plugins/website-audit/skills/researching-website-design/SKILL.md
Analyzes industry websites for design patterns, layout, typography, and content strategies using first-principles thinking. Use when researching website design, UI patterns, or competitive design analysis.
$ install --global
skillsauthnpx skillsauth add qte77/claude-code-utils-plugin researching-website-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 18, 2026, 2:51 AM30.7s1 file scanned
SKILL.md
- name:
- researching-website-design
- description:
- Analyzes industry websites for design patterns, layout, typography, and content strategies using first-principles thinking. Use when researching website design, UI patterns, or competitive design analysis.
- compatibility:
- Designed for Claude Code
- allowed-tools:
- Read, Write, Glob, Grep, WebSearch, WebFetch
- argument-hint:
- [industry-or-topic]
- stability:
- stable
- content-hash:
- sha256:4829bf30cb564e0e86956a55ee9423aa335eb7f774ca12b1d1ffca9b364b415b
- last-verified-cc-version:
- 1.0.34
Website Design Research
Target: $ARGUMENTS
Analyzes industry websites for design patterns through first-principles
thinking. Focus on layout, typography, color, and content presentation.
Pair with auditing-website-accessibility and auditing-website-usability
for implementation.
Core Question
"How would users naturally expect this information organized if they had never seen a website?"
Workflow
- Find websites - Search "[industry] companies/platforms", target 6-8 sites
- Extract design elements - Colors (hex), typography, layout hierarchy, CTAs
- Track sources - URL, authority level (H/M/L), cited research, cross-references
- Identify anomalies - Who breaks conventions with better UX results?
- Synthesize findings - Breakthroughs, patterns, contrarian insights, quick wins
Output Format
Source Index
1. [Company] - [URL] - Authority: [H/M/L]
Cites: [Studies/sources referenced]
Cross-refs: [Shared sources with other sites]
Design Breakthroughs (Max 3)
BREAKTHROUGH #N (Impact: N/100)
Pattern: [Specific design element]
Principle: [Why it works for users]
Opportunity: [How to apply]
Sources: [URLs and cited research]
Visual and Content Patterns
COLORS: Primary #HEX [effect], Accent #HEX [effect]
TYPOGRAPHY: Headers [font/weight], Body [font/size]
HEADLINES: "[Pattern]" - [User psychology]
CTAS: "[Button text]" - [Action driver]
Contrarian Insights
Everyone: [Common practice]
Reality: [What creates better UX]
Evidence: [Sources]
Quick Wins
ELIMINATE: [Element hurting UX]
SIMPLIFY: [Over-complex pattern]
ADOPT: [Underused effective pattern]
Rules
- Focus exclusively on visual design, layout, typography, and content
- Question every design assumption with first-principles thinking
- Extract exact values: hex codes, font names, button text
- Track cross-references between sites to identify authoritative sources
- Keep insights concise and actionable for design implementation
Further Reading
- Awwwards — Website Design Trends
- Google Fonts
- Dribbble — Design Inspiration
- Smashing Magazine — Web Design
Related Skills
qte77/auditing-website-usability
development
VerifiedTrustedCommunity
Audits website usability for UX optimization, covering forms, navigation, validation, and microcopy. Use when reviewing user experience, task completion flows, or interface friction points.
1SKILL.mdUpdated Apr 19, 2026
qte77/auditing-website-accessibility
development
VerifiedTrustedCommunity
Audits website accessibility for WCAG 2.1 AA compliance, generating findings and code fixes. Use when reviewing accessibility, keyboard navigation, screen reader compatibility, or inclusive design.
1SKILL.mdUpdated Apr 19, 2026
qte77/testing-typescript
development
VerifiedTrustedCommunity
Writes tests following TDD (using vitest and @testing-library/react) best practices. Use when writing unit tests, integration tests, or component tests in TypeScript.
1SKILL.mdUpdated Apr 19, 2026
qte77/reviewing-typescript
development
VerifiedTrustedCommunity
Provides concise, focused TypeScript/React code reviews matching exact task complexity requirements. Use when reviewing TypeScript code quality, type safety, or when the user asks for code review.
1SKILL.mdUpdated Apr 19, 2026