Frontend Design

This skill enables the agent to design and implement frontend interfaces that are visually polished, responsive, accessible, and maintainable. The agent works with design systems — component libraries, spacing scales, color tokens, and typography scales — to produce consistent UI code. It outputs production-ready HTML, CSS (including Tailwind CSS), and framework components (React, Vue, Svelte) with WCAG-compliant accessibility and dark mode support built in.

Workflow

1. Analyze Requirements and Constraints: Identify the target platforms (desktop, tablet, mobile), the framework in use (React, Vue, plain HTML), the styling approach (Tailwind, CSS Modules, styled-components), and any existing design tokens or brand guidelines. Determine the key pages or components needed and their priority order.

2. Establish the Design System Foundation: Define the core tokens before writing any component code. This includes a spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64), a type scale (xs through 4xl with corresponding line-heights), a color palette with semantic tokens (primary, secondary, success, warning, error, neutral) in both light and dark variants, and border-radius and shadow tokens. These tokens ensure every component is visually consistent.

3. Build Components with Variants: Implement each component with clearly defined variants (size, color, state). Use props or CSS classes to control variants rather than duplicating markup. Include all interactive states: default, hover, focus-visible, active, disabled. Ensure every interactive element has a visible focus ring for keyboard navigation.

4. Implement Responsive Layouts: Use CSS Grid for two-dimensional page layouts and Flexbox for one-dimensional component alignment. Define breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px) and design mobile-first, layering complexity at larger breakpoints. Test that no horizontal scrolling occurs and that tap targets meet the 44x44px minimum on touch devices.

5. Integrate Accessibility from the Start: Apply semantic HTML elements (nav, main, article, section, aside) before adding ARIA attributes. Ensure color contrast meets WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text). Add aria-label, aria-describedby, and role attributes only where semantic HTML is insufficient. Test keyboard navigation order with Tab and Shift+Tab.

6. Add Dark Mode Support: Implement dark mode using a CSS custom property strategy or Tailwind's dark: variant. Swap background, text, and border tokens while preserving sufficient contrast ratios. Avoid pure black (#000) backgrounds — use a dark gray (#0f172a or #1e293b) for reduced eye strain. Ensure images, shadows, and elevation levels adapt appropriately.

Usage