Frontend Design

What This Skill Does

The Frontend Design skill serves as a comprehensive architectural and aesthetic blueprint for building modern web interfaces using the React, Next.js, and Tailwind CSS ecosystem. It acts as an expert consultant that guides you through the process of building responsive, accessible, and high-performance user interfaces. Rather than just writing code, this skill enforces a strict design philosophy—focusing on mobile-first architecture, clear visual hierarchies, and production-grade interaction design to ensure your applications feel polished and professional.

Installation

To integrate this skill into your agentic workflow, execute the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/frontend

Use Cases

This skill is ideal for developers and product designers tasked with:

• Building landing pages that require a high 'wow' factor while maintaining fast load times.
• Structuring complex, data-heavy dashboards that must remain readable and functional across all screen sizes.
• Creating robust form libraries that prioritize user accessibility and data integrity.
• Developing component libraries that adhere to strict design systems, including defined typography, color strategies, and spacing rules.

Example Prompts

1. "Design a mobile-first hero section for a SaaS landing page using a 2x type scale and a bold aesthetic that avoids generic font stacks."
2. "Review my current dashboard layout: how can I improve the color contrast to meet 4.5:1 standards while ensuring keyboard navigation support?"
3. "Create a component specification for a multi-step form that implements optimistic UI updates and ensures input data is preserved during validation errors."

Tips & Limitations

To get the most out of this skill, strictly adhere to the mobile-first development rule—starting on a small screen prevents layout bloat. Pay close attention to the 'One Memorable Element' rule; timid designs often result in lower engagement. Remember that this skill provides guidance and design patterns; it does not perform network requests or touch your backend database. It is a read-only, high-level design consultancy tool that prioritizes performance metrics like LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) above all else. Use it to maintain consistency across your frontend stack.