skills.rest
BrunoSantanaDeveloper
BrunoSantanaDeveloperCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate frontend design plans with decision trees, color scales, and accessibility checklists.

Updated Jan 27, 2026
Search Tags:#typography#design#ui#frontend#color#ux#system
One-click install
npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill frontend-design-brunosantanadeveloper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit/tree/main/skills/frontend-design
Command: npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill frontend-design-brunosantanadeveloper

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Frontend design decisions are often inconsistent across teams, leading to scattered UI and rework. This Skill codifies design thinking, principles, and decision frameworks to unify outcomes and accelerate product development.

Core Features & Use Cases

  • Clear principles for color, typography, UX psychology, layout, and accessibility.
  • Decision trees, reference patterns, and checklists to guide design and audits.
  • Real-world scenarios spanning component libraries, scalable layouts, dashboards, marketing sites, and product apps.

Quick Start

Provide a project context and goals, and I will generate a tailored frontend design plan aligned with a cohesive design system.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a consistent web UI design system for dashboards and product apps?▼

A web UI design system codifies typography, color, and layout principles into reusable rules. It provides decision trees and checklists to unify frontend outcomes across dashboards, marketing sites, and product apps, eliminating scattered UI and accelerating development.

What is the best way to choose color palettes and typography scales for frontend design?▼

Choosing color palettes and typography scales requires applying a modular design system approach. You generate reference rules and decision trees based on UX psychology and accessibility standards to ensure consistent visual hierarchy across all product app components.

Can I perform an accessibility audit on my component library using a design system?▼

Performing an accessibility audit with a design system involves applying actionable checklists to your components. The system codifies accessibility principles into reference rules, allowing you to check dashboards and marketing sites for compliance and iterative refinement.

Does this frontend design guidance work for both marketing sites and complex dashboards?▼

Frontend design guidance supports both marketing sites and complex dashboards by applying modular principles. It delivers tailored design plans, scalable layout patterns, and decision frameworks that adapt to diverse web UI tasks across various product app scenarios.

How do I start building a scalable layout and component library from scratch?▼

Building a scalable layout and component library starts by providing project context and goals. The system generates a tailored frontend design plan with modular reference patterns, typography scales, and color palettes to support rapid design decisions and iterative refinement.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
HafizFasihHafizFasih

robotics-theme-expert

Implement a robotics-themed design system for dark-mode industrial dashboards.

Community
Advanced
ToXMonToXMon

uiux-layout-advisor

Provide layout, spacing, hierarchy, and WCAG 2.1 AA accessibility recommendations for UI/UX designs.

Community
Intermediate
H2OSLabsH2OSLabs

canvas-design

Creates philosophy-driven visual artwork designs with PDF/PNG output.

Official
Advanced