skills.rest
b0nsu
b0nsuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Convert design mockups into modular React or Vue components with design tokens.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#frontend#ux#design-system#pixel-perfect#design-to-code
One-click install
npx skills add https://github.com/b0nsu/oh-my-shit-memory --skill frontend-ui-ux-b0nsu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/b0nsu/oh-my-shit-memory/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/b0nsu/oh-my-shit-memory --skill frontend-ui-ux-b0nsu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers-turned-developers bridge the gap between mockups and code, ensuring UI concepts are realized as cohesive, accessible, and visually polished interfaces even when design assets are incomplete.

Core Features & Use Cases

  • Translate design intent into production-ready UI components and styles that align with a design system.
  • Produce pixel-perfect layouts, animations, and interactions that feel handcrafted yet maintainable.
  • Use case: convert a designer concept into a responsive, accessible component library ready for deployment.

Quick Start

Create a pixel-perfect UI component using the project’s design system.

Frequently Asked Questions about frontend-ui-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert design mockups into React or Vue components?▼

To convert design mockups into React or Vue components, you translate designer intent into modular UI components and styles. This approach applies component-driven architecture to ensure responsive, accessible frontend artifacts.

What is the best way to maintain a shared design system in frontend code?▼

Maintaining a shared design system in frontend code requires consistent design tokens and component-driven architecture. This ensures UI concepts are realized as cohesive, visually polished interfaces within modern frontend stacks.

Can I build pixel-perfect layouts when design assets are incomplete?▼

Yes, you can build pixel-perfect layouts with incomplete design assets by translating design insight into frontend artifacts. This bridges the gap between mockups and code to produce handcrafted yet maintainable interactions.

Does converting design to code support accessibility and responsiveness?▼

Converting design to code supports accessibility and responsiveness by generating production-ready UI components. It ensures frontend artifacts meet requirements for consistent design tokens and adherence to a shared design system.

How do I create a responsive component library ready for deployment?▼

You create a responsive component library by converting designer concepts into modular UI components and styles. This process aligns outputs with a design system to ensure accessibility and visual polish for deployment.

Related Skills

Explore More Design & Creative Skills→
olehsvyrydovolehsvyrydov
13

ui-designer

Architect design systems and component libraries from discovery to developer handoff.

Community
Advanced
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
wukangcheng2944wukangcheng2944

frontend-design

Design frontend interfaces with consistent aesthetics for React, Vue, or HTML/CSS.

Community
Advanced
JZKK720JZKK720

gpt-taste

Generate frontend UI layouts with Python-driven randomization and GSAP ScrollTrigger motion.

Community
Advanced