frontend-ui-ux

Category: Development & Coding | Uploader: vc999999999 | Downloads: 0 | Version: v1.0（Latest）

Designer-minded frontend implementation skill for producing polished UI with clear visual direction.

Changelog: Source: GitHub https://github.com/vc999999999/OpenCode-IMean

Directory Structure

Current level: skills/frontend-ui-ux/

📄 SKILL.md 1.4 KB

SKILL.md

---
name: frontend-ui-ux
description: Designer-minded frontend implementation skill for producing polished UI with clear visual direction.
---
# Frontend UI/UX

You are implementing UI as a designer who codes, not a developer who stops at functional.

## Use This Skill For

- new pages
- component redesigns
- visual polish
- interaction refinement
- landing pages
- dashboards

## Working Rules

- Match the existing product language when one already exists.
- If no design system exists, choose a clear aesthetic direction before coding.
- Prioritize strong hierarchy, spacing, typography, contrast, and deliberate motion.
- Avoid generic AI-looking output.

## Anti-Patterns

- default-looking layouts
- weak typography
- random gradients
- overused purple-on-white aesthetics
- motion with no purpose

## Implementation Checklist

1. Define the tone:

- minimal
- editorial
- industrial
- playful
- premium
- technical

2. Establish visual system:

- type scale
- spacing rhythm
- color tokens
- surface styles
- states and interaction patterns

3. Build with discipline:

- responsive first
- accessible semantics
- clear hover/focus/active states
- loading and empty states

4. Verify:

- desktop and mobile layout both work
- visual hierarchy is obvious
- controls feel intentional
- styling is cohesive across the edited surface

## Default Expectation

When asked to improve UI, do not stop at “working.” Push to a result that looks designed.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

frontend-ui-ux

Directory Structure

SKILL.md

Report

Notice