skills.rest
Antony-Figueroa
Antony-FigueroaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-ready HTML/CSS/JS interfaces with cohesive design systems.

3|1|Updated Dec 25, 2025
Search Tags:#typography#design#accessibility#frontend#UI#aesthetics#design-systems
One-click install
npx skills add https://github.com/Antony-Figueroa/UNEFA_DASHBOARD --skill frontend-design-antony-figueroa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Antony-Figueroa/UNEFA_DASHBOARD/tree/main/.trae/skills/frontend-design
Command: npx skills add https://github.com/Antony-Figueroa/UNEFA_DASHBOARD --skill frontend-design-antony-figueroa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often rely on generic patterns that fail to convey a distinct visual identity. This skill provides a structured approach to create memorable, production-ready interfaces with intentional aesthetics that differentiate products.

Core Features & Use Cases

  • Intentional design direction and a cohesive design system that guides typography, color, spacing, and motion.
  • Production-ready HTML/CSS/JS code with accessible semantics and modular components.
  • Use Case: design dashboards, admin panels, or marketing pages that require a unique visual voice.

Quick Start

Provide a complete frontend design example that embodies the chosen aesthetic with production-ready HTML/CSS/JS.

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 frontend design system with cohesive typography and color tokens?▼

Build a distinctive frontend design by applying intentional design direction that guides typography, color, spacing, and motion. This approach replaces generic patterns with a structured visual identity, delivering production-ready interfaces that differentiate products and convey a memorable aesthetic voice.

How do I build accessible admin panels with semantic HTML and CSS variables?▼

Build accessible admin panels by generating production-ready HTML/CSS/JS code with strict semantic HTML and color tokens via CSS variables. This ensures accessible UX, modular components, and performance while maintaining a strong visual voice tailored for dashboard interfaces.

Does this frontend design approach work for marketing pages and consumer web apps?▼

Yes, this frontend design approach works for marketing pages and consumer web apps. It is applicable to any consumer web page where a strong visual voice, accessible UX, and cohesive design system are essential, delivering distinctive aesthetics that stand out.

Can I use this skill to design dashboards without an existing UI component library?▼

Yes, you can use this skill to design dashboards without an existing UI component library. It delivers production-ready code with modular components and a cohesive design system, providing the necessary structure for typography, spacing, and color without external dependencies.

What's the best way to ensure spacing rhythm and typography rules in frontend UI?▼

The best way to ensure spacing rhythm and typography rules in frontend UI is to enforce strict adherence to a predefined design system. This skill provides a structured approach that guides these elements intentionally, ensuring accessible and aesthetically distinct production-ready interfaces.

Related Skills

Explore More Design & Creative Skills→
GeneralViniGeneralVini
1

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible UI components.

Community
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
allthingslinuxallthingslinux
4

tailwind-design-system

Standardize Tailwind CSS design tokens and component variants for scalable UI.

Official
Intermediate
roach88roach88
3

frontend-design

Design responsive frontend interfaces with accessible color contrast and maintainable HTML/CSS/JS.

Community
Advanced