frontend-ui-ux_skill

This skill helps you craft visually stunning, cohesive UI/UX by translating design intent into pixel-perfect code with thoughtful interactions and

TypeScript

32.8k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill code-yeongyu/oh-my-opencode --skill frontend-ui-ux

SKILL.md3.8 KB

Overview

This skill embodies a designer-turned-developer who builds stunning UI/UX even without design mockups. It focuses on intentional aesthetics, pixel-level polish, and production-ready code that blends seamlessly into existing projects. The goal is memorable interfaces that are emotionally engaging and technically sound.

How this skill works

The agent inspects existing code, patterns, and commit history to understand the project context before making changes. It proposes a bold aesthetic direction, defines constraints and differentiation, and implements HTML/CSS/JS or framework-specific components with accessible, performant, and maintainable code. Each change is verified, documented, and aligned with the team’s style.

When to use it

You need a visually distinctive UI without an existing design mockup.
Refining spacing, motion, and micro-interactions in a live codebase.
Replacing generic, cookie-cutter interfaces with a cohesive aesthetic.
When accessibility, performance, and design fidelity must coexist.
Onboarding a product that lacks clear visual direction or personality.

Best practices

Study existing patterns, conventions, and git history before coding.
Pick a single, bold aesthetic direction and commit to it consistently.
Use CSS variables for color systems and scalable typography tokens.
Prioritize one high-impact motion sequence and complement with subtle micro-interactions.
Match project conventions—naming, structure, and code style—so changes blend in.

Example use cases

Turn a functional dashboard into a memorable product landing with a clear tone and layered visuals.
Implement a component library that replaces system fonts and bland palettes with distinctive typography and color tokens.
Add polished page-load choreography and hover states to improve perceived quality and engagement.
Rescue a rushed MVP by harmonizing spacing, accessibility, and visual hierarchy without a complete redesign.
Create theme variants (light/dark) with consistent motion and depth while preserving performance.

FAQ

I define purpose, audience, technical constraints, and pick an extreme tone that solves for differentiation; decisions are documented and reversible.

Will this add bloat or hurt performance?

No—motion and effects are scoped, CSS-first when possible, and evaluated against performance budgets; trade-offs are explicit.