skills.rest
limaon
limaonCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design distinctive frontend interfaces with custom theming and motion.

Updated Jul 8, 2022
Search Tags:#design#frontend#UI/UX#implementation#aesthetics#web-components
One-click install
npx skills add https://github.com/limaon/dotfiles --skill frontend-design-limaon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/limaon/dotfiles/tree/main/.config/opencode/skills/frontend-design
Command: npx skills add https://github.com/limaon/dotfiles --skill frontend-design-limaon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and developers create distinctive, production-grade frontend interfaces that move beyond generic AI aesthetics and deliver polished, intentional UI experiences.

Core Features & Use Cases

  • Production-grade frontend interfaces with a clear aesthetic point-of-view.
  • Guidance for implementing HTML/CSS/JS or framework-based UIs (React, Vue) with custom theming and motion.
  • Integration with shadcn/ui projects to achieve a unique look through component discovery, theming, and styling.
  • Detailed emphasis on typography, color systems, textures, and spatial composition to ensure cohesive visuals across components and pages.

Quick Start

Design a bold, distinctive frontend page using React that follows the frontend-design guidelines: pick a unique font setup, define a CSS variable theme, create a responsive component with animation, and deliver a ready-to-deploy page.

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-grade frontend interfaces with a bold aesthetic?▼

Building production-grade frontend interfaces requires selecting custom fonts, defining a CSS variable theme, and implementing responsive components with motion. This delivers cohesive, distinctive UI experiences that move beyond generic AI aesthetics.

How do I customize shadcn/ui components to achieve a unique look?▼

Customizing shadcn/ui components involves applying custom theming, styling, and component discovery. This integrates typography, color systems, and spatial composition to ensure cohesive and distinctive visuals across your project.

Does this frontend design guidance work with React and Vue?▼

Yes, this frontend design guidance supports React and Vue framework-based UIs. It provides detailed emphasis on typography, color systems, textures, and motion to ensure cohesive and distinctive visuals across these frameworks.

What's the best way to set up typography and color systems for web components?▼

The best way to set up typography and color systems for web components is defining a unique font setup and CSS variable theme. This ensures intentional, cohesive spatial composition and polished visuals across your application.

How do I add motion and textures to frontend UI components?▼

Add motion and textures to frontend UI components by customizing animations and variables within your HTML/CSS/JS or framework-based code. This delivers a distinctive, production-grade aesthetic point-of-view for your application.

Related Skills

Explore More Design & Creative Skills→
I-OnlabsI-Onlabs
3

web-artifacts-builder

Initialize and bundle React/Vite HTML artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced
shwilliamsonshwilliamson

css-standards

Enforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.

Community
Basic
TheeCoderAhmedTheeCoderAhmed

managing-content

Integrate headless CMS platforms and generate type-safe frontend fetchers.

Community
Intermediate
kgadekkgadek

frontend-design

Design production-grade frontend interfaces with distinctive typography, color systems, and accessible layouts.

Community
Advanced