skills.rest
MoisesAldas
MoisesAldasCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Define design systems and implement accessible frontend interfaces.

1|Updated Mar 17, 2026
Search Tags:#design#ui#accessibility#frontend#aesthetic#design-system
One-click install
npx skills add https://github.com/MoisesAldas/OficiosYA --skill frontend-design-moisesaldas
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mxyhimxyhi
467

frontend-design

Generate frontend interfaces with guidelines for typography, color, layout, and motion.

Community
Advanced
costiashcostiash
4

frontend-design

Generate production-grade HTML/CSS/JS frontend code with bold aesthetics.

Community
Advanced
reservelabreservelab
1

ReserveLabs

Detect design inconsistencies, component duplication, and accessibility gaps in front-end codebases.

Community
Intermediate
DanielV-94DanielV-94

frontend-design

Generate HTML, CSS, and JavaScript code with detailed aesthetic guidelines.

Community
Intermediate