Stats
Actions
Tags
Web design and UX guidance for visual systems, accessibility (WCAG 2.2), interaction patterns, and performance-aware interfaces. Provides testing workflows including visual regression and responsive design verification.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-skills-library:web-design-expertThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Type**: Design System & UX/UI Workflow
Type: Design System & UX/UI Workflow Version: 1.0.0 Last Updated: 2025-11-07
High-end web design team capabilities for creating exceptional user experiences. Combines visual design, UX research, accessibility, performance optimization, and rigorous testing protocols.
Purpose: Visual testing, screenshots, browser automation Usage:
// Capture baseline screenshots
await playwright.screenshot({
url: 'https://frankx.ai',
selector: '#hero',
viewport: { width: 1920, height: 1080 }
})
// Test responsive design
await playwright.screenshot({
url: 'https://frankx.ai',
viewport: { width: 375, height: 812 } // iPhone 13
})
// Visual regression testing
await playwright.compareScreenshots({
before: 'baseline.png',
after: 'current.png'
})
Purpose: Deployment, analytics, performance monitoring Usage:
// Check current deployment
vercel.getDeployment({ project: 'frankx-ai' })
// Get analytics data
vercel.getAnalytics({
project: 'frankx-ai',
metrics: ['bounceRate', 'timeOnPage', 'conversionRate']
})
// Trigger preview deployment
vercel.deploy({
branch: 'feature/hero-improvements',
environment: 'preview'
})
// Run Lighthouse audit
vercel.runLighthouse({ url: 'preview-url' })
Purpose: Proper PR workflow, code review, issue tracking Usage:
// Create feature branch
github.createBranch({
name: 'feature/2025-11-07-hero-improvements',
from: 'v3'
})
// Create PR with screenshots
github.createPR({
title: '✨ Improve homepage hero clarity',
body: markdown_with_screenshots,
reviewers: ['frankxai'],
labels: ['design', 'ux-improvement']
})
// Check existing issues
github.searchIssues({
repo: 'frankxai/frankx.ai-vercel-website',
labels: ['bug', 'ux']
})
Purpose: Design documentation, strategy tracking Usage:
Purpose: Task management, sprint planning Usage:
Purpose: Design file integration Usage:
Purpose: AI image generation Usage:
1. ✅ Capture Current State
- Use Playwright MCP to screenshot all key pages
- Organize screenshots: `/screenshots/baseline/YYYY-MM-DD/`
- Document viewport: Desktop (1920x1080), Tablet (768x1024), Mobile (375x812)
2. ✅ Establish Performance Baseline
- Run Lighthouse via Vercel MCP or direct
- Document scores:
* Performance: __/100
* Accessibility: __/100
* Best Practices: __/100
* SEO: __/100
- Check Core Web Vitals:
* LCP: __ seconds
* FID: __ ms
* CLS: __ score
3. ✅ Analyze Current Analytics
- Use Vercel MCP to get actual metrics:
* Bounce rate: __%
* Average time on page: __ seconds
* Conversion rate: __%
* Top exit pages: __
- Don't estimate - use real data!
4. ✅ Document User Flows
- Map current user journeys
- Identify friction points
- Note confusing elements
- List accessibility issues
1. ✅ Define Success Metrics
- Specific, measurable goals
- Example: "Reduce bounce rate from 80% to 60%"
- Example: "Increase assessment starts by 30%"
2. ✅ Create Design Mockups (if major changes)
- Use Figma or describe detailed changes
- Show before/after comparison
- Get stakeholder approval
3. ✅ Accessibility Check
- Color contrast: Use tool to verify 4.5:1 minimum
- Touch targets: Ensure 44x44px minimum
- Semantic HTML: Plan proper heading structure
- ARIA labels: Document where needed
4. ✅ Performance Budget
- Maximum bundle size increase: +50KB
- LCP target: <2.5 seconds
- CLS target: <0.1
- Lighthouse target: 95+ all categories
1. ✅ Create Feature Branch
- Use GitHub MCP or git commands
- Name: feature/YYYY-MM-DD-description
- Branch from: main or v3
2. ✅ Make Changes
- Edit components
- Follow design system patterns
- Use TypeScript strict mode
- Comment complex logic
3. ✅ Local Testing
- Test in development mode
- Verify responsive behavior
- Check console for errors
- Test keyboard navigation
1. ✅ Capture After Screenshots
- Use Playwright MCP for same viewports
- Save to: `/screenshots/after/YYYY-MM-DD/`
- Create comparison images
2. ✅ Cross-Browser Testing
- Chrome (latest)
- Safari (latest)
- Firefox (latest)
- Edge (latest)
- Document any browser-specific issues
3. ✅ Device Testing
- iOS (iPhone 13 Pro, iPad Pro)
- Android (Pixel 7, Galaxy S23)
- Desktop (1920x1080, 2560x1440)
4. ✅ Accessibility Audit
- Run axe DevTools or similar
- Test with keyboard only
- Test with screen reader (VoiceOver or NVDA)
- Verify ARIA labels
- Check color contrast
5. ✅ Performance Testing
- Run Lighthouse after changes
- Compare to baseline
- Check bundle size impact
- Test on throttled connection (3G)
1. ✅ Deploy to Preview
- Use Vercel MCP to trigger deployment
- Get preview URL
- Test preview thoroughly
2. ✅ Create PR with Evidence
- Use GitHub MCP to create PR
- Include before/after screenshots
- Include Lighthouse comparison
- List changes and impact
- Tag reviewers
3. ✅ Share for Review
- Preview URL
- Screenshot comparisons
- Performance metrics
- Expected impact on KPIs
4. ✅ Monitor After Deploy
- Watch analytics for 24-48 hours
- Compare actual vs expected metrics
- Document learnings
- Iterate if needed
/* Heading Scale */
h1: 3.5rem (56px) - Hero headlines
h2: 3rem (48px) - Section headings
h3: 2rem (32px) - Subsection headings
h4: 1.5rem (24px) - Card titles
h5: 1.25rem (20px) - Small headings
h6: 1rem (16px) - Overlines
/* Body Scale */
body-large: 1.25rem (20px) - Subheadlines
body: 1rem (16px) - Default text
body-small: 0.875rem (14px) - Captions
body-xs: 0.75rem (12px) - Labels
xs: 0.25rem (4px)
sm: 0.5rem (8px)
md: 1rem (16px)
lg: 1.5rem (24px)
xl: 2rem (32px)
2xl: 3rem (48px)
3xl: 4rem (64px)
4xl: 6rem (96px)
// Primary Actions: Cyan/Blue gradient
primary: { 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2' }
// Creative/Music: Purple gradient
secondary: { 400: '#c084fc', 500: '#a855f7', 600: '#9333ea' }
// Content/Warm: Amber gradient
accent: { 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706' }
// Backgrounds: Slate (dark mode first)
bg-primary: slate-950
bg-secondary: slate-900
bg-tertiary: slate-800
// Text: High contrast
text-primary: white (on dark)
text-secondary: slate-300
text-tertiary: slate-400
// Primary: Main action (cyan gradient)
<button className="bg-gradient-to-r from-cyan-500 to-blue-600
hover:from-cyan-400 hover:to-blue-500
text-white font-semibold px-8 py-4 rounded-2xl
shadow-[0_0_40px_rgba(6,182,212,0.3)]
transition-all hover:-translate-y-1">
Primary Action
</button>
// Secondary: Alternative action (outline)
<button className="border-2 border-white/20 bg-white/5
hover:bg-white/10 hover:border-white/30
text-white font-semibold px-8 py-4 rounded-2xl
transition-all hover:-translate-y-1">
Secondary Action
</button>
// Tertiary: Low emphasis (text only)
<button className="text-slate-300 hover:text-white
font-medium px-4 py-2 transition-colors">
Tertiary Action
</button>
// Glass card with subtle border
<div className="rounded-3xl border border-white/10
bg-white/5 backdrop-blur-sm p-8
hover:bg-white/10 hover:border-white/20
transition-all">
Card Content
</div>
// Elevated card with shadow
<div className="rounded-3xl bg-white/5 p-8
shadow-xl shadow-black/20
hover:shadow-2xl hover:shadow-cyan-500/10
transition-all">
Card Content
</div>
Performance: ≥95
Accessibility: 100
Best Practices: 100
SEO: ≥95
LCP (Largest Contentful Paint): <2.5s
FID (First Input Delay): <100ms
CLS (Cumulative Layout Shift): <0.1
Initial JS: <200KB (gzipped)
CSS: <50KB (gzipped)
Total Page Weight: <1MB
Format: WebP with fallback
Lazy loading: Below the fold
Responsive: srcset for multiple sizes
CDN: Use Vercel Image Optimization
| Browser | Desktop | Mobile | Notes |
|---|---|---|---|
| Chrome | ✅ Latest | ✅ Latest | Primary test browser |
| Safari | ✅ Latest | ✅ iOS 15+ | Test webkit-specific features |
| Firefox | ✅ Latest | ✅ Latest | Test gecko engine |
| Edge | ✅ Latest | - | Chromium-based |
| Device | Viewport | Test Focus |
|---|---|---|
| Desktop | 1920x1080 | Full feature set |
| Laptop | 1440x900 | Medium screens |
| iPad Pro | 1024x1366 | Tablet layout |
| iPhone 13 Pro | 390x844 | Mobile portrait |
| Galaxy S23 | 360x800 | Small mobile |
**Hypothesis**: [Change] will [increase/decrease] [metric] because [reason]
**Example**:
Reducing CTAs from 3 to 1 will increase assessment starts by 30%
because it eliminates decision paralysis and creates a clear next action.
**Metric**: Assessment starts per 100 visitors
**Baseline**: 5 starts per 100 visitors
**Target**: 6.5 starts per 100 visitors (30% increase)
**Duration**: 2 weeks
**Traffic Split**: 50/50
### [Feature Name] - YYYY-MM-DD
**Problem**:
[What user problem are we solving?]
**Solution**:
[What design change are we making?]
**Rationale**:
[Why this solution over alternatives?]
**Expected Impact**:
[Metrics we expect to improve]
**Actual Impact** (after deploy):
[Measured results]
**Learnings**:
[What we learned, what we'd do differently]
## ComponentName
**Purpose**: [What it does]
**Used in**: [Which pages]
**Props**: [TypeScript interface]
**Variants**: [Different visual states]
**Accessibility**: [ARIA labels, keyboard support]
**Performance**: [Bundle impact, load time]
**Usage**:
\`\`\`tsx
<ComponentName prop1="value" prop2="value" />
\`\`\`
Invoke this skill when:
This skill enhances the /frankx-website command by ensuring:
Skill Version: 1.0.0 Last Updated: 2025-11-07 Maintained By: FrankX Website Development Team Review Frequency: Monthly or after major changes
npx claudepluginhub frankxai/claude-skills-library --plugin claude-skills-libraryDesigns, builds, critiques, and polishes frontend interfaces with production-grade code. Covers UX research, accessibility, responsive design, animations, typography, and design systems.
Designs and iterates production-grade frontend interfaces through live browser iteration, UX audit, visual refinement, and design system work.
Designs, redesigns, critiques, audits, polishes frontend UIs for websites, dashboards, components, forms. Covers UX review, accessibility, performance, responsive design, theming, typography, layout, color, motion, micro-interactions.