skills.rest
darblex
darblexCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Provide frontend design guidelines for layouts, theming, and animations using Tailwind CSS and Flowbite.

Updated Mar 10, 2026
Search Tags:#accessibility#frontend#design system#css#ui design#tailwind
One-click install
npx skills add https://github.com/darblex/price-compare-israel --skill frontend-design-darblex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/darblex/price-compare-israel/tree/main/workspace/skills/superdesign
Command: npx skills add https://github.com/darblex/price-compare-israel --skill frontend-design-darblex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and patterns for creating beautiful, modern, and accessible user interfaces, streamlining the frontend design process.

Core Features & Use Cases

  • Layout Design: Create wireframes and structure components effectively.
  • Theme Design: Define modern color palettes, typography, spacing, and shadows.
  • Animation Design: Plan engaging micro-interactions and transitions.
  • Implementation Guidance: Offers best practices for using Tailwind CSS, Flowbite, and icons.
  • Use Case: When starting a new web application, use this skill to establish a consistent and modern design system from the ground up, ensuring a professional and user-friendly experience.

Quick Start

Use the frontend-design skill to generate a modern dark mode theme using oklch colors and Inter font.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a modern UI design system from scratch?▼

To create a modern UI design system, define consistent rules for layout, theming, typography, and spacing. This skill provides expert guidelines to build responsive and accessible interfaces using modern CSS features like oklch().

How do I design an accessible dark mode theme using Tailwind CSS?▼

Design an accessible dark mode theme by defining color palettes with oklch() for perceptual uniformity and integrating Tailwind CSS for utility-based styling. This skill offers theming guidelines to ensure professional, accessible interfaces.

What's the best way to plan micro-interactions and UI animations?▼

The best way to plan micro-interactions is to define engaging transitions that enhance user experience without compromising accessibility. This skill provides animation design guidelines to structure interactive user interfaces effectively.

Can I use Flowbite component libraries with my existing frontend design workflow?▼

Yes, you can use Flowbite component libraries within your workflow. This skill provides implementation guidance and best practices for integrating Flowbite alongside Tailwind CSS to build modern dashboards and landing pages.

When do I need oklch() colors for frontend UI design?▼

You need oklch() colors when defining modern, perceptually uniform color palettes for theming your web application. This skill utilizes oklch() to help establish consistent and accessible light and dark mode themes.

Related Skills

Explore More Design & Creative Skills→
Cumulocity-IoTCumulocity-IoT
5

c8y-ui

Scaffolds Cumulocity UI projects and implements HTML layouts using Codex design system classes.

Official
Intermediate
rokkayrokkay
1

tailwindcss-development

Applies Tailwind CSS v4 utilities for spacing, color, typography, layout, responsive design, and dark mode across components and layouts.

Community
Intermediate
L-LesterYuL-LesterYu
51

frontend-design-zh

Design frontend UI layouts, themes, and animations with Tailwind CSS and Flowbite.

Community
Intermediate
ladinglogichqladinglogichq

web-design-guidelines

Audit web UI assets for compliance with Web Interface Guidelines.

Official
Intermediate