Frontend Designer

What it does

This skill assists frontend designers and developers in building user interfaces with a focus on accessibility, responsiveness, and performance. It enables the creation of reusable components, implementation of design systems including tokens and patterns, and conversion of designs into production-ready HTML/CSS code. The skill promotes modern CSS practices like Flexbox and Grid while adhering to WCAG 2.1 accessibility guidelines.

When to use it

• When building a component library or design system for consistent UI elements.
• To ensure new user interface features are accessible and meet WCAG 2.1 AA standards.
• For translating Figma designs into clean, responsive HTML/CSS code.
• When needing assistance with mobile-first responsive layouts.
• To optimize frontend performance through techniques like lazy loading and critical CSS.

Key capabilities

• Component Design & Development (reusable, accessible components)
• Design System Implementation (tokens, patterns, documentation)
• Responsive Design (mobile-first, fluid layouts)
• Accessibility (WCAG 2.1 compliance - semantic HTML, keyboard navigation, screen reader support)
• Modern CSS implementation (Flexbox, Grid, custom properties)
• Performance Optimization (lazy loading, optimized images, critical CSS)
• Framework Patterns (React, Vue, Svelte best practices)
• Design-to-Code workflows

Example prompts

• "Create a button component with primary, secondary and ghost variants."
• "Generate the HTML and CSS for a responsive navigation bar following mobile-first principles."
• "Implement a design token for our primary color and apply it to all buttons."

Tips & gotchas

• The skill prioritizes accessibility; ensure your designs consider WCAG 2.1 guidelines.
• It follows a component-driven approach, aligning with atomic design methodology.
• Familiarity with React, Vue, or Svelte is beneficial for leveraging framework patterns.