skills.rest
1thirteeng3
1thirteeng3COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Translate designer intent into production UI code with YAML frontmatter.

Updated Mar 24, 2026
Search Tags:#typography#aesthetics#motion#frontend-ui#design-process#uiux-design
One-click install
npx skills add https://github.com/1thirteeng3/greenmoire --skill frontend-ui-ux-1thirteeng3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/1thirteeng3/greenmoire/tree/main/integrations/oh-my-openagent/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/1thirteeng3/greenmoire --skill frontend-ui-ux-1thirteeng3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers-turned-developers need a clear process to translate visual ideas into production UI code, ensuring pixel-perfect interfaces even without mockups.

Core Features & Use Cases

  • Establish a bold aesthetic direction and translate it into production UI code (HTML/CSS/JS) while aligning with existing patterns.
  • Provide design-process guidance, typography and color guidance, motion and spatial composition, and best practices for accessibility.
  • Use cases: prototyping UI components, implementing UI guidelines for a web app, mapping design principles to implementable code.

Quick Start

Define a bold aesthetic direction and implement a production-ready frontend UI that matches it across components.

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 intent into production-ready frontend UI code?▼

To translate design intent into production-ready frontend UI, establish a bold aesthetic direction and implement it in HTML, CSS, and JavaScript while aligning with existing patterns. This ensures pixel-perfect interfaces even without mockups.

What is the best way to implement typography and color guidelines in frontend code?▼

Implementing typography and color guidelines in frontend code requires mapping design principles to HTML and CSS. The process provides specific guidance on spatial composition, motion, and best practices for accessibility to ensure accurate realization.

Can I prototype UI components without a complete mockup?▼

Yes, you can prototype UI components without complete mockups by defining a bold aesthetic direction. The workflow translates visual ideas into production UI code, ensuring pixel-perfect interfaces align with your established design patterns.

Does this frontend UI workflow enforce specific file structures?▼

Yes, the frontend UI workflow enforces a YAML frontmatter with name and description in SKILL.md. It also supports optional scripts, references, and assets directories consumed by the skill to manage design assets and processes.

How do I incorporate motion and spatial composition into web app UI guidelines?▼

To incorporate motion and spatial composition into web app UI guidelines, map the design principles directly to implementable code. The workflow provides specific guidance on translating these visual ideas into production-ready frontend implementations.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
per-simmonsper-simmons
224

clone-app-pat-pro

Analyze source code and rendered styles to generate HTML, CSS, and JavaScript clones.

Community
Advanced
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
markwang2658markwang2658
31

popular-web-designs

Render design-system templates into production-ready HTML and CSS artifacts.

Community
Advanced