skills.rest
eng-cc
eng-ccCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Translate design principles into HTML/CSS/JS components and style guidelines.

13|1|Updated Feb 3, 2026
Search Tags:#ui#accessibility#frontend#interaction#ux#aesthetics#design-system
One-click install
npx skills add https://github.com/eng-cc/agent-world --skill frontend-ui-ux-eng-cc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/eng-cc/agent-world/tree/main/.agents/skills/frontend-ui-ux
Command: npx skills add https://github.com/eng-cc/agent-world --skill frontend-ui-ux-eng-cc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers-turned-developers who translate aesthetic decisions into production-ready UI code, ensuring visual quality even when mockups are unavailable.

Core Features & Use Cases

  • Translate design intent into high-fidelity UI components and design systems.
  • Create pixel-perfect layouts, spacing, color harmony, and micro-interactions without pre-made mocks.
  • Use Case: rapid prototyping for dashboards, admin panels, and marketing sites by converting design directions into frontend code and guidelines.

Quick Start

Describe and implement a pixel-perfect UI concept based on an existing product brief.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I translate design principles into implementable frontend components without mockups?▼

To translate design principles into frontend components without mockups, apply a clear design language to generate HTML/CSS/JS snippets and style guidelines that ensure visual quality and usability.

How do I build pixel-perfect admin panels and dashboards with proper spacing and color harmony?▼

Build pixel-perfect admin panels by translating aesthetic decisions into frontend code, applying design system patterns for spacing, color harmony, and micro-interactions to ensure high-fidelity usability.

Can I create accessible micro-interactions for marketing sites using frontend code?▼

Yes, you can create accessible micro-interactions for marketing sites by translating design intent into implementable frontend code with accessibility considerations built into the HTML/CSS/JS snippets.

What is the best way to establish a design system for developer-focused user interfaces?▼

The best way to establish a design system for developer-focused interfaces is to translate design principles into component patterns and style guidelines that standardize spacing, color harmony, and interaction logic.

Do I need a pre-made design mockup to generate high-fidelity UI components?▼

No, you do not need a pre-made design mockup to generate high-fidelity UI components; you can convert design directions and product briefs directly into frontend code and style guidelines.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
Brite-NitesBrite-Nites

frontend-design

Build production-grade frontend interfaces with HTML, CSS, and JavaScript.

Official
Advanced
MattyMrozMattyMroz

ui-ux-design

Evaluate UI designs against 37 principles for color, typography, spacing, and interaction.

Community
Intermediate
speqqaispeqqai

figma-implement-design

Translate Figma design artifacts into production-ready React UI code.

Official
Advanced