skills.rest
NachoOsella
NachoOsellaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-designer

Generate production-grade frontend interfaces from user briefs across HTML/CSS/JS, React, or Vue.

6|Updated Jan 6, 2026
Search Tags:#design#ui#frontend#react#css#components#aesthetics
One-click install
npx skills add https://github.com/NachoOsella/DotFiles-V4 --skill frontend-designer-nachoosella
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-designer
Source: https://github.com/NachoOsella/DotFiles-V4/tree/main/pi/.pi/agent/skills/frontend-designer
Command: npx skills add https://github.com/NachoOsella/DotFiles-V4 --skill frontend-designer-nachoosella

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the design and implementation of distinctive, production-grade frontend interfaces with high aesthetic quality, translating user requests for web components, pages, dashboards, or applications into polished UI outputs.

Core Features & Use Cases

  • Production-grade frontend code with a deliberate aesthetic direction
  • Framework-appropriate implementations (HTML/CSS/JS, React, Vue) with accessibility and responsive behavior
  • Use Case: Given a brief for a dashboard or landing page, generate a cohesive UI kit including components, layouts, and styles

Quick Start

Provide a detailed frontend brief (palette, typography, components, and layout) and I will generate production-ready code and styles.

Frequently Asked Questions about frontend-designer

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

FAQPage Schema
How do I generate production-ready React components from a design brief?▼

To generate production-ready React components from a design brief, provide palette, typography, component, and layout details to receive framework-appropriate code with accessibility and responsive behavior built in.

Can I generate a complete UI kit for a dashboard in HTML, CSS, and JS?▼

Yes, you can generate a complete UI kit for a dashboard in HTML, CSS, and JS by supplying a detailed frontend brief to receive cohesive UI components, layouts, and styles with a deliberate aesthetic direction.

What's the best way to build a distinctive frontend interface with Vue?▼

The best way to build a distinctive frontend interface with Vue is to translate user requests for web pages or applications into polished UI outputs by supplying a detailed frontend brief for framework-appropriate implementation.

Does this frontend design approach support responsive behavior and accessibility?▼

Yes, this frontend design approach supports responsive behavior and accessibility by generating production-grade frontend interfaces that satisfy requirements for a clear aesthetic direction alongside accessible and responsive code.

What do I need to provide to get a production-grade landing page layout?▼

To get a production-grade landing page layout, you need to provide a detailed frontend brief including palette, typography, components, and layout preferences to generate cohesive and polished UI outputs.

Related Skills

Explore More Design & Creative Skills→
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
szeyuszeyu
5

frontend-design

Create production-grade frontend interfaces with defined aesthetic direction.

Community
Advanced
SOLEROMSOLEROM

frontend-design

Translate user requirements into ready-to-run HTML/CSS/JS or React/Vue UI code.

Community
Advanced
Sir-chawakornSir-chawakorn
9

implement-from-design

Translate Figma designs into React and Tailwind CSS components with visual-diff verification.

Community
Advanced