skills.rest
eysenfalk
eysenfalkCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Transforms design briefs into accessible, reusable UI components with tokens and layouts.

Updated Feb 19, 2026
Search Tags:#ui#accessibility#frontend#responsive#ux#design-to-code#design-tokens
One-click install
npx skills add https://github.com/eysenfalk/cerebras --skill frontend-ui-ux-eysenfalk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/eysenfalk/cerebras/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/eysenfalk/cerebras --skill frontend-ui-ux-eysenfalk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer-turned-developer translates design intent into production-ready frontend UI, ensuring visuals align with implementation and reducing back-and-forth between design and engineering.

Core Features & Use Cases

  • Translate design principles into code-friendly components (typography, color, spacing, motion, and accessibility).
  • Define reusable UI patterns and design tokens to maintain consistency across pages and teams.
  • Use cases: rapid UI prototyping from design briefs; ensure pixel-perfect reproduction in production-ready interfaces; audits for alignment with design guidelines.

Quick Start

Translate a provided design brief into production-ready frontend UI components with accessible typography, color tokens, and responsive layouts.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I translate a design brief into production-ready frontend UI?▼

To translate a design brief into production-ready frontend UI, convert visual design principles like typography, color, and spacing into code-friendly components with accessible, responsive layouts.

What are design tokens and how do they maintain consistency across frontend components?▼

Design tokens are code-friendly variables that define reusable UI patterns for typography, color, and spacing, ensuring visual consistency across pages and teams while reducing design-to-code friction.

How do I ensure accessible and responsive behavior in frontend UI components?▼

Ensure accessible and responsive behavior in frontend UI by implementing proper typography, color contrast, motion controls, and flexible layouts that adapt to various screen sizes for production-ready interfaces.

Can I use this approach to audit existing frontend interfaces for design guideline alignment?▼

Yes, you can audit existing frontend interfaces for alignment with design guidelines by checking reusable components against defined design tokens for typography, color, spacing, and accessibility requirements.

What is the best way to reduce back-and-forth between design and engineering during frontend development?▼

The best way to reduce back-and-forth between design and engineering is to translate design intent directly into production-ready frontend UI using shared design tokens and reusable components.

Do I need predefined design tokens to generate code-friendly UI patterns?▼

No, you do not need predefined design tokens beforehand; this process can define reusable UI patterns and establish typography, color, and spacing tokens directly from your provided design brief.

Related Skills

Explore More Design & Creative Skills→
tuantiensiutuantiensiu
1

visual-analysis

Extract colors, typography, and layout data from images and UI mockups.

Community
Intermediate
eralvarezeralvarez

frontend-design

Generate frontend interfaces from user briefs using React, Vue, or Svelte.

Community
Advanced
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
Brite-NitesBrite-Nites

frontend-design

Build production-grade frontend interfaces with HTML, CSS, and JavaScript.

Official
Advanced