skills.rest
ErickAguilar95
ErickAguilar95COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate frontend interfaces from design specs with semantic HTML and ARIA labels.

Updated Feb 7, 2026
Search Tags:#design#ui#accessibility#frontend#component#html-css
One-click install
npx skills add https://github.com/ErickAguilar95/full_wordpress_figma_creator --skill frontend-design-erickaguilar95
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ErickAguilar95/full_wordpress_figma_creator/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/ErickAguilar95/full_wordpress_figma_creator --skill frontend-design-erickaguilar95

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces with high design quality. It ensures code adheres to design systems and accessibility standards, avoiding generic AI aesthetics.

Core Features & Use Cases

  • Generates polished UI components, pages, dashboards, and layouts that align with design guidelines and Figma designs.
  • Applies to teams building customer-facing interfaces, admin panels, or marketing pages requiring strong visual polish and consistency.
  • Supports strict constraints like Gob.mx v3, semantic HTML, and accessible ARIA labeling while leveraging design tokens and existing utilities.

Quick Start

Create a production-grade frontend component or page that strictly follows the provided design guidelines and accessibility requirements.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade frontend UI components from design specs?▼

Generate production-grade frontend UI by automating the creation of distinctive interfaces directly from design specifications. This ensures high visual polish and strict adherence to design systems, avoiding generic AI aesthetics for polished web components and pages.

What is the best way to build accessible HTML components with ARIA labels?▼

Build accessible HTML components by leveraging semantic HTML and applying accessible ARIA labels throughout the UI generation process. This ensures your frontend interfaces meet strict accessibility standards and satisfy constraints for high design quality.

Can I use this to build dashboards and pages that align with Figma designs?▼

Yes, you can build web components, pages, and dashboards that strictly align with provided Figma designs and design guidelines. It supports teams building customer-facing interfaces, admin panels, or marketing pages requiring strong visual consistency.

Does this frontend design approach support Gob.mx v3 integration and design tokens?▼

Yes, this approach supports strict constraints like Gob.mx v3 integration and semantic HTML while leveraging existing utilities and design tokens. It ensures componentization and adherence to established design systems without extra configuration.

How do I avoid generic AI aesthetics when creating frontend interfaces?▼

Avoid generic AI aesthetics by guiding the creation of distinctive, production-grade frontend interfaces with high design quality. The process enforces adherence to design systems and accessibility standards, ensuring distinctive visual polish rather than generic outputs.

Related Skills

Explore More Design & Creative Skills→
PremModhaOfficialPremModhaOfficial
1

figma-to-code

Convert Figma design data into frontend templates and semantic design tokens.

Community
Advanced
arvindandarvindand
16

ui-ux-design

Translate design concepts into semantic HTML with responsive, accessible styling.

Community
Advanced
KrismithReddy12KrismithReddy12

design-review

Audit web interfaces for visual inconsistencies, spacing issues, and hierarchy problems.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced