skills.rest
leviathofnoesia
leviathofnoesiaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Translate design intent into production-ready HTML/CSS/JS UI components.

1|Updated Jan 24, 2026
Search Tags:#design#accessibility#frontend#UI/UX#component#aesthetic
One-click install
npx skills add https://github.com/leviathofnoesia/kraken --skill frontend-ui-ux-leviathofnoesia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/leviathofnoesia/kraken/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/leviathofnoesia/kraken --skill frontend-ui-ux-leviathofnoesia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers who code translate their aesthetic intuition into polished frontend UI/UX implementations, enabling developers to ship visually compelling interfaces without relying on mockups.

Core Features & Use Cases

  • Aesthetic translation: Convert design intent into production-ready HTML/CSS/JS patterns that align with the chosen visual direction.
  • Cohesive design system: Establish typography, color palette, spacing, and motion guidelines that ensure consistency across components.
  • Use Case: From a product brief, generate a reusable header, card, and form components that adhere to accessibility standards and branding.

Quick Start

Provide a prompt to generate a responsive UI component with a maximalist aesthetic, using CSS variables for color and typography, and including responsive states.

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 design intent into frontend UI components without mockups?▼

To translate design intent into frontend UI components without mockups, you can generate production-ready HTML, CSS, and JS patterns directly from a product brief while establishing a cohesive aesthetic direction.

What is the best way to build a cohesive design system for web dashboards?▼

Building a cohesive design system for web dashboards involves establishing consistent typography, color palettes, spacing, and motion guidelines. This skill generates maintainable code patterns ensuring visual consistency across interface components.

Can I generate accessible UI components for a landing page using CSS variables?▼

Yes, you can generate accessible UI components for landing pages using CSS variables. This skill creates responsive HTML and CSS patterns adhering to accessibility standards while maintaining flexible typography and color systems.

Does this approach support prototyping with maximalist aesthetics?▼

Yes, this approach supports prototyping with maximalist aesthetics. By providing a prompt, you generate responsive UI components applying specific visual directions while maintaining accessible typography and cohesive color systems.

How do I create reusable header and form components that meet branding guidelines?▼

To create reusable header and form components meeting branding guidelines, this skill converts product briefs into maintainable frontend code patterns. It ensures generated elements adhere to established accessibility standards and cohesive design systems.

Related Skills

Explore More Design & Creative Skills→
RuzenieRuzenie
2

ui-aesthetic-coach

Evaluate UI designs against aesthetic rubrics and generate design tokens.

Community
Advanced
kenlckkenlck
5

web-design-engineer

Guide front-end UI decisions with semantic HTML, responsive CSS, and JavaScript.

Community
Basic
pxlcrtivpxlcrtiv

huashu-design

Transforms text descriptions into interactive prototypes, presentations, and motion graphics using HTML, CSS, and JavaScript.

Community
Advanced
soo-kate-yeonsoo-kate-yeon

moai-design-tools

Fetch Figma design specs and export Pencil designs as React and Tailwind CSS code.

Community
Advanced