Frontend Design Skill

Capabilities

This skill handles:

• Page Design - Layouts, hero sections, navigation, footers

• Component Design - Buttons, cards, modals, forms, tables

• Responsive Design - Mobile-first, breakpoints, fluid layouts

• Animations - Transitions, micro-interactions, loading states

• Accessibility - WCAG compliance, keyboard navigation, screen readers

• Brand Alignment - Color systems, typography, visual consistency

Activation Triggers

• "Design a new page/component"

• "Update the UI/UX"

• "Make this responsive"

• "Improve the visual design"

• "Add animations/transitions"

• "Fix the mobile layout"

• "Style this component"

• "Match our brand guidelines"

Process

1. Discovery

• Identify what needs designing (page, component, feature)

• Take screenshot of current state (if updating existing)

• Ask clarifying questions about requirements

• Check for existing design patterns in the project

2. Design Planning

• Reference brand guidelines: ~/.claude/RAZORVISION_DOCS.md

• Run through Design Checklist below

• Propose design approach with rationale

• Consider responsive breakpoints

• Plan accessibility requirements

• Get user approval before implementing

Design Checklist (Safe Rules)

Based on Anthony Hobday's Visual Design Rules.

Colors

• Near-black/near-white - No pure #000000 or #ffffff . Use #0a0a0a and #f5f5f5 or similar

• Saturate neutrals - Add slight color tint (<5% saturation) to greys for cohesion

• Distinct brightness levels - Each color in palette should have noticeably different brightness

• Warm OR cool - Pick one temperature for neutrals, don't mix

Contrast & Hierarchy

• High contrast for important elements - Buttons, CTAs, key content stand out

• Lower icon contrast - Icons paired with text should be slightly dimmer (0.8 opacity)

• Border contrast - Borders must contrast with BOTH container and background

• Container brightness - Keep within 12% of background (dark UI) or 7% (light UI)

Spacing & Layout

• 8px spacing scale - Use multiples: 8, 16, 24, 32, 48, 64, 96

• Outer padding >= inner padding - Container edges need equal or more space than interior gaps

• Optical alignment - Align visually, not mathematically (especially icons, shapes)

• 12-column grid - Flexible for 1, 2, 3, 4-column layouts

Typography

• Max 2 typefaces - One for headings, one for body

• 16px minimum body text - Never smaller for readability

• ~70 character line length - Use max-width to constrain (60-80 chars ideal)

• Adjust letter-spacing - Tighter for large text, looser for small text

Buttons & Components

• Button padding 2:1 - Horizontal padding should be double vertical

• Nested corner radius - Inner radius = outer radius - gap distance

Dark UI Specific

• No shadows - Use borders instead; shadows don't make sense in dark UIs

• Closer = lighter - Elements appearing nearer should have lighter values

• Consistent depth technique - Pick one approach (borders, subtle bg changes) and stick with it

Avoid

• No adjacent hard divides - Don't place multiple edges/borders directly next to each other

• No complex on complex - Simple elements on complex backgrounds, or vice versa

3. Implementation

Default Brand Standards (RazorVision):

• Colors: Light Blue (#43B6E7), Dark Grey (#393939), Light Grey (#F5F5F5)

• Typography: Raleway (Bold headings, Regular body)

• Principles: Clean, professional, generous whitespace

CSS Approach:

• Use CSS variables for theming

• Mobile-first responsive design

• Prefer Tailwind classes if project uses Tailwind

• Fallback to CSS modules or styled-components

Accessibility Checklist:

• Semantic HTML elements

• ARIA labels where needed

• Keyboard navigable

• Sufficient color contrast (4.5:1 minimum)

• Focus states visible

4. Verification

• Take after screenshot

• Test responsive at: 320px, 768px, 1024px, 1440px

• Verify accessibility with browser tools

• Check animations don't cause motion sickness (prefers-reduced-motion)

• Compare against design requirements

Reference Files

• Brand guide: ~/.claude/RAZORVISION_DOCS.md

• Logo assets: ~/.claude/rv-assets/

Common Patterns

Responsive Breakpoints

/* Mobile first / @media (min-width: 640px) { / sm / } @media (min-width: 768px) { / md / } @media (min-width: 1024px) { / lg / } @media (min-width: 1280px) { / xl */ }

CSS Variables Setup

:root { --color-primary: #43B6E7; --color-text: #393939; --color-bg: #F5F5F5; --font-family: 'Raleway', sans-serif; }

Animation Best Practices

.element { transition: transform 0.2s ease, opacity 0.2s ease; } @media (prefers-reduced-motion: reduce) { .element { transition: none; } }