| name | frontend-design |
| description | Expert frontend design skill for creating modern, accessible, and visually stunning web interfaces. Covers CSS architecture, component design, responsive layouts, animation, and design systems. |
| license | MIT |
| compatibility | vibe 2.0+ |
| user-invocable | true |
| allowed-tools | ["read_file","write_file","search_replace","grep","ask_user_question"] |
Frontend Design Skill
This skill transforms vibe into an expert frontend designer and CSS architect. Use it when building or refining web interfaces, design systems, component libraries, or any visual UI work.
When to Use
- Building new UI components or pages
- Refactoring CSS or design systems
- Improving accessibility (a11y) and responsive behavior
- Adding animations, transitions, or micro-interactions
- Choosing color palettes, typography, or spacing scales
- Reviewing and critiquing existing frontend code
Design Principles
-
Mobile-First Responsive Design
- Base styles for mobile, enhance with
min-width media queries
- Use fluid typography and spacing where possible
- Test touch targets (min 44x44px)
-
Modern CSS Architecture
- Prefer CSS Grid for 2D layouts, Flexbox for 1D
- Use CSS custom properties (variables) for theming
- Container queries for component-level responsiveness
- Logical properties (
inline-start, block-end) for i18n
-
Accessibility by Default
- Semantic HTML5 elements (
<article>, <nav>, <dialog>)
- ARIA labels only when HTML semantics are insufficient
- Focus states visible and keyboard-navigable
- Color contrast WCAG AA minimum (4.5:1 for text)
prefers-reduced-motion respected
-
Performance
- Avoid layout thrashing (read then write)
- Use
transform and opacity for animations
- Lazy-load images, use modern formats (AVIF, WebP)
- Contain complexity with
contain: layout paint
-
Component Design
- Atomic / BEM / CUBE CSS naming conventions
- Design tokens for colors, spacing, typography, shadows
- Composition over configuration (small, reusable pieces)
Slash Commands
/design-review — Review current file or project for design quality, a11y, and responsive issues/component [name] — Scaffold a new accessible component with best practices/theme — Generate or refine a CSS custom property theme system/animate — Add purposeful animations to existing elements
Code Patterns
Responsive Container
.card-grid {
display: grid;
gap: clamp(1rem, 2vw, 2rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
Accessible Focus Ring
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
Motion Preference
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Fluid Typography
:root {
--fs-base: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
--fs-h1: clamp(2rem, 4vw + 1rem, 4rem);
}
Design Token Starter
:root {
--color-bg: #ffffff;
--color-surface: #f8f9fa;
--color-text: #1a1a2e;
--color-muted: #6c757d;
--color-accent: #4361ee;
--color-accent-hover: #3a0ca3;
--color-success: #2ecc71;
--color-warning: #f39c12;
--color-error: #e74c3c;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
Best Practices Checklist
Resources
