Web Design

Description

A designer-focused skill for reviewing and improving user interfaces and user experience, with an emphasis on responsive design and visual polish.

Guide

1. Check design-system consistency. Verify consistent use of the design system or CSS framework (e.g., Bulma, Tailwind) — colors, spacing, typography, and components should align with existing tokens.
2. Check responsive design. Review mobile compatibility across breakpoints: layout, navigation, touch targets, and readability.
3. Review animations & transitions. Confirm they run smoothly and don’t hurt performance; avoid jank and unnecessary motion.
4. Report clearly. Leave clear, actionable comments, suggest improvements, and ask for clarification when a requirement is ambiguous.

Example

Reviewing a landing page:

• Consistency: two sections use #FA892D and one uses a hardcoded #ff8811 — switch to the design token.
• Responsive: the hero heading wraps poorly below 768px and the nav links aren’t reachable on mobile — adjust the breakpoint and add a mobile menu.
• Animation: a hover transition animates box-shadow — switch to transform and opacity, which the browser can animate more cheaply.

Explanation

Key Concepts

1. Consistency — one source of truth for colors, spacing, and type.
2. Responsive first — layouts must work from small mobile to large desktop.
3. Performance-aware animation — prefer compositor-friendly properties (transform, opacity).

Best Use Cases

• Reviewing UI/UX of a page or feature
• Ensuring responsive, mobile-friendly layouts
• Auditing visual consistency against a design system
• Polishing animations and transitions

Tips to Get the Best Results

• Always suggest an alternative, not just a problem.
• Use the project’s existing design tokens instead of inventing new colors.
• Test at multiple viewport sizes before proposing a fix.
• Keep feedback constructive and actionable.

Ready-to-use skill

Save the following as SKILL.md to use it as an OpenCode skill:

---
name: web-design
description:
  Expert in web design, focus UI/UX + responsive view. Use when user asks to "design", "review UI/UX", or "responsive".
---

# Instructions

Expert web designer, UI/UX + responsive.

## Web Design Checklist

- Consistent use of design system or CSS framework (e.g., Bulma, Tailwind).
- Check responsive design + mobile compatibility.
- Review animations + transitions for smoothness + performance.

## Review Process

1. Leave clear, actionable comments for issues found.
2. Suggest improvements, not just point out problems.
3. Approve code only when meets criteria + project standards.
4. If unsure, ask author for clarification.

---

**Note:** Be constructive + respectful in feedback. Goal: team delivers high-quality, maintainable code.