Skills
.Work. You
Rest

frontend-ui-ux

Community

Turn design vision into pixel-perfect UI.

Design & Creative#accessibility#frontend#ui-design#ux#aesthetics#design-system
AuthorFuzen2478
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers translate design intent into production-ready UI implementations when design mockups are unavailable.

Core Features & Use Cases

  • Translate design intent into production-ready UI code across HTML/CSS/JS frameworks.
  • Establish and apply a cohesive design system including typography, color, spacing, and motion.
  • Use case: Refactor an existing interface to align with a bold aesthetic direction when mockups are missing.

Quick Start

Use the design-first approach to craft a cohesive frontend UI when design assets are unavailable. Define typography, color, motion, and layout guidelines, then implement components that align with the chosen aesthetic direction. Iterate with accessible, production-ready code.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-ui-ux
Download link: https://github.com/Fuzen2478/only-my-opencode/archive/main.zip#frontend-ui-ux

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.