skills.rest
artreimus
artreimusCOMMUNITY
Explore all skills by this author →
𝕏@artreimusGitHub

frontend-design

Generate production-grade HTML/CSS/JS interfaces with cohesive typography, color, and layout.

Updated Nov 1, 2024
Search Tags:#web development#frontend#ui design#react components#aesthetic direction#html css js#ui motion
One-click install
npx skills add https://github.com/artreimus/ylang-labs-blog --skill frontend-design-artreimus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/artreimus/ylang-labs-blog/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/artreimus/ylang-labs-blog --skill frontend-design-artreimus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of building web interfaces that look generic, feel unfinished, and don’t deliver a memorable visual experience—while still producing truly functional, production-grade UI code.

Core Features & Use Cases

  • Distinctive UI direction: Helps you define a clear, intentional aesthetic (minimalist, maximalist, editorial, brutalist, retro-futuristic, and more) so the result doesn’t drift into bland “AI slop.”
  • Production-grade implementation: Turns frontend requirements into working HTML/CSS/JS or framework components with cohesive typography, color systems, layout composition, and purposeful motion.
  • Delightful details, not defaults: Produces refined visual decisions (font pairing, textures, grain/noise overlays, micro-interactions, and spatial layout choices) that feel genuinely designed.

Use it when you want to build or style websites, landing pages, dashboards, React/Vue components, posters, or any UI where the visual quality and coherence matter.

Quick Start

Use the frontend-design skill to build a distinctive, production-grade landing page component that follows the aesthetic direction “editorial magazine with brutalist edges” and meets my exact layout, content, and accessibility requirements.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-ready web UIs that don't look like generic AI output?▼

To build production-ready web UIs that avoid generic output, define a clear aesthetic direction like editorial or brutalist before implementation. This ensures the final HTML, CSS, and JS components feature cohesive typography, intentional color systems, and refined motion rather than bland defaults.

Can I generate React components with specific aesthetic directions like brutalist or retro-futuristic?▼

Yes, you can generate React components with specific aesthetic directions like brutalist or retro-futuristic. The skill translates frontend requirements into framework components that implement cohesive visual decisions, including font pairing, textures, grain overlays, and spatial layout choices.

What's the best way to style web dashboards and landing pages with cohesive typography and color systems?▼

The best way to style web dashboards and landing pages with cohesive typography and color systems is to apply an intentional aesthetic direction. This process ensures functional, production-grade UI code delivers a memorable visual experience with purposeful micro-interactions and refined spatial layout.

Does this approach to frontend design work for both web pages and poster styling?▼

Yes, this frontend design approach works for both web pages and poster styling. It applies cohesive typography, color systems, layout composition, and refined motion to any web artifact where aesthetic intent and functionality must both be achieved.

Why does my generated HTML and CSS UI feel unfinished and lack visual coherence?▼

Your generated HTML and CSS UI feels unfinished and lacks visual coherence because it drifts into generic design patterns without a clear aesthetic intent. Defining a specific visual direction helps produce refined details like micro-interactions and texture overlays that feel genuinely designed.

Related Skills

Explore More Design & Creative Skills→
YouMingYehYouMingYeh
2

frontend-design

Define and implement frontend interfaces with cohesive typography, color, motion, and layout.

Community
Advanced
jokken79jokken79
1

yukyu-component-doctor

Detect and repair frontend component issues in React, Vue, and vanilla JavaScript projects.

Community
Advanced
sraloffsraloff
2

assets-icons-fonts

Optimize icons, fonts, and images for frontend performance.

Community
Basic
bomberoxenviosdosruedasbomberoxenviosdosruedas

agency-cms-developer

Develop custom themes, plugins, and modules for Drupal and WordPress CMS platforms.

Community
Advanced