frontend-design

Define design systems and implement accessible frontend interfaces.

1|Updated Mar 17, 2026

Search Tags:#design #ui #accessibility #frontend #aesthetic #design-system

Ready to run

npx skills add https://github.com/MoisesAldas/OficiosYA --skill frontend-design-moisesaldas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/MoisesAldas/OficiosYA/tree/main/.agents/frontend-design
Command: npx skills add https://github.com/MoisesAldas/OficiosYA --skill frontend-design-moisesaldas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design often blends into generic templates; this skill defines an intentional, production-grade aesthetic and a cohesive system to deliver memorable interfaces.

Core Features & Use Cases

Establishes a clear aesthetic direction and a design system that translates into code-ready components and layouts.
Guides the creation of web UIs, dashboards, and component libraries with strong emphasis on craft, accessibility, and performance.
Use Case: Design a unique admin dashboard that communicates hierarchy and brand identity while remaining fast and accessible.

Quick Start

Analyze the current UI brief, define a strong design direction, and outline the first 2-3 components to implement.

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 design system that avoids generic templates?▼

To build a frontend design system that avoids generic templates, define an intentional aesthetic direction and translate it into code-ready components. This approach ensures memorable interfaces through coherent execution, technical correctness, and explicit implementation standards.

What is the best way to design an accessible admin dashboard with strong visual hierarchy?▼

The best way to design an accessible admin dashboard is to apply a cohesive design system that communicates hierarchy and brand identity. This approach satisfies accessibility standards and performance requirements while delivering a distinctive, production-grade user interface.

How do I create a component library with a cohesive aesthetic and UI accessibility?▼

Create a component library by establishing a clear aesthetic direction that translates into code-ready layouts. This ensures UI accessibility and coherent execution across all components, satisfying both design intent and technical correctness.

Can I use this approach for web apps requiring strict design intent and technical correctness?▼

Yes, you can use this approach for web apps requiring strict design intent and technical correctness. It guides the creation of web UIs with strong emphasis on craft, accessibility, and performance through explicit principles and implementation standards.

How do I start defining a design direction for a new frontend interface?▼

To start defining a design direction for a new frontend interface, analyze the current UI brief and outline the first two to three components to implement. This establishes a strong, intentional aesthetic foundation for production-grade interfaces.