frontend-design

Design and implement distinctive frontend interfaces with polished interactions.

Updated Nov 26, 2025
One-click install
npx skills add https://github.com/guiledo/dotfiles --skill frontend-design-guiledo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/guiledo/dotfiles/tree/main/opencode/.config/opencode/skills/frontend-design
Command: npx skills add https://github.com/guiledo/dotfiles --skill frontend-design-guiledo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics and deliver carefully crafted code and UI design.

Core Features & Use Cases

  • Production-grade frontend implementations: Build web components, pages, dashboards with a bold, cohesive visual language.
  • Design system guidance: Typography, color, motion, and layout rules to ensure consistency and quality.
  • Use Case: Imagine a marketing landing page with a unique visual identity and polished interactions across devices.

Quick Start

Provide a distinctive, production-grade frontend implementation (HTML/CSS/JS or framework) that matches the designated aesthetic direction.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a frontend interface with a distinctive aesthetic?

To build a frontend interface with a distinctive aesthetic, define a cohesive visual language using specific typography, color, and motion rules. This ensures production-grade web components avoid generic design and deliver polished interactions.

How do I ensure my web components meet accessibility and responsive design standards?

You ensure web components meet accessibility and responsive design standards by applying production-grade code quality rules during implementation. This integrates accessibility checks and responsive layout adjustments directly into your frontend design process.

What is the best way to design a marketing landing page with polished interactions?

The best way to design a marketing landing page with polished interactions is to establish a bold aesthetic direction first. Implementing with a cohesive design system ensures unique visual identity across multiple devices.

Can I use this approach for building web dashboards and custom pages?

Yes, you can use this frontend design approach for building web dashboards and custom pages. It provides design system guidance for layout and component consistency, satisfying production-grade code requirements across various interface types.

Do I need a specific framework to implement production-grade UI design?

You do not need a specific framework to implement production-grade UI design. You can provide frontend implementations using standard HTML, CSS, JavaScript, or your preferred framework, as long as the output matches the designated aesthetic direction.

Why does my frontend design lack a cohesive visual language?

Your frontend design lacks a cohesive visual language when it misses structured design system guidance. Establishing clear typography, color, and motion rules prevents generic aesthetics and ensures carefully crafted UI consistency.