mcpbeat Sign in

Frontend UI Ux Agent Skill

Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use for any frontend implementation requiring visual design decisions, aesthetic direction, or pixel-perfect UI work.

811 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
141
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/ArabelaTso/Skills-4-SE --skill frontend-ui-ux

The instruction itself

12 sections, as written by the author

Frontend UI/UX Designer

You are a designer who learned to code. You see what pure developers miss — spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable.

When to Use This Skill

  • Implementing UI without design mockups
  • Making visual design decisions (typography, color, layout)
  • Creating visually striking, production-grade interfaces
  • Improving existing UI aesthetics and interactions

Design Process

Before coding, commit to a bold aesthetic direction:

  • Purpose: What problem does this solve? Who uses it?
  • Tone: Pick an extreme — brutally minimal, maximalist, retro-futuristic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
  • Constraints: Framework, performance, accessibility requirements
  • Differentiation: What's the ONE thing someone will remember?

Aesthetic Guidelines

Typography

Choose distinctive fonts. Avoid: Arial, Inter, Roboto, system fonts, Space Grotesk. Pair a characterful display font with a refined body font.

Color

Commit to a cohesive palette using CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Avoid: purple gradients on white (AI slop).

Motion

Focus on high-impact moments. One well-orchestrated page load with staggered reveals (animation-delay) beats scattered micro-interactions. Use scroll-triggering and surprising hover states. Prioritize CSS-only animations.

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Visual Details

Create atmosphere and depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays. Never default to solid colors.

Anti-Patterns (Never Do)

  • Generic fonts (Inter, Roboto, Arial, system fonts)
  • Cliched color schemes (purple gradients on white)
  • Predictable layouts and component patterns
  • Cookie-cutter design lacking context-specific character
  • Converging on common choices across generations

Execution

Match implementation complexity to aesthetic vision:

  • Maximalist — Elaborate code with extensive animations and effects
  • Minimalist — Restraint, precision, careful spacing and typography

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No two designs should be the same. Vary between light and dark themes, different fonts, different aesthetics.

Example

User: "Build a landing page for a developer tool"

Output: Chooses brutalist aesthetic with monospace display font, high-contrast dark theme, asymmetric grid layout, staggered reveal animations on scroll, and grain texture overlay. Production-ready React/HTML+CSS code with CSS variables for theming.

Inspired by: oh-my-opencode frontend-ui-ux skill

Other skills for the same job

different authors, same section of the catalogue
Mobile Design
by ComeOnOliver
×2

Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps.

72k tokens scripts
Experimental Design
by K-Dense-AI
×1

Design experiments and studies BEFORE data is collected — choosing a design, randomizing, blocking, and laying out treatment combinations so results are interpretable. Use whenever someone is planning a study, asks how to assign subjects/samples to groups, mentions randomization, blocking, stratification, controls, factorial or fractional-factorial designs, design of experiments (DOE), screening many factors, response-surface optimization, crossover or repeated-measures or split-plot designs, cluster/group randomization, Latin squares, plate layouts, batch/run-order effects, replication vs. pseudoreplication, or sequential/adaptive/group-sequential designs. Trigger even for informal phrasings like "how should I set up this experiment", "how do I avoid confounding", "what's the best way to test these 6 factors", or "assign these mice to conditions". For computing the sample size or power once the design is chosen, use statistical-power; for analyzing data already collected, use statistical-analysis.

14k tokens scripts
Architect
by ComeOnOliver
×1

Design systems, plan implementations, review architecture decisions - Use when you need to plan a complex feature, design system architecture, or make high-level technical decisions.

2k tokens
Analyze Feature Requests
by phuryn

Analyze and prioritize a list of feature requests by theme, strategic alignment, impact, effort, and risk. Use when reviewing customer feature requests, triaging a backlog, or making prioritization decisions.

568 tokens
Gke Networking
by google
vendor

>- Plans, configures, and manages core GKE cluster networking. Covers private clusters, VPC-native configurations, DNS, node egress, Dataplane V2, and IP planning. Use when designing GKE networking layouts, configuring private clusters, setting up Dataplane V2, planning GKE IP ranges, or managing VPC- native cluster modes. Don't use for application ingress, load balancing, or service networking (use gke-service-networking instead).

1k tokens
Azldev Add Component
by microsoft
vendor

Read this before adding or importing a component; follow the workflow instead of guessing. Explains how to add a new component to an azldev distro, covering inspecting the upstream spec, the inline-versus-dedicated-file decision, and validating with render, diff-sources, and build. Triggers include add component, new package, import package, create comp.toml, new component.

998 tokens
Open Knowledge Pack Plain Notes
by inkeep

How to work in a Plain Notes project (the `plain-notes` starter pack): a flat notes/ folder plus a daily/ journal. The 'I just want to write' layout. Read when the project has these folders, OR when asked to jot a note, capture a quick thought, or write today's journal entry. Carries the linking habit and daily-entry behavior so templates and folder descriptions stay minimal. Complements the platform `open-knowledge` skill; does not replace it.

498 tokens
Open Knowledge Pack Worldbuilding
by inkeep

How to work in a Worldbuilding project (the `worldbuilding` starter pack): a fiction encyclopedia of characters, settings, themes, factions, and lore. Read when the project has these folders, OR when asked to add a character, setting, faction, or piece of lore, or to check the world for internal consistency. Carries the auto-stub and consistency behaviors so that guidance does not live inside template bodies or folder descriptions. Complements the platform `open-knowledge` skill; does not replace it.

758 tokens

How to use it

Copy the folder

Take arabelatso/frontend-ui-ux from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.