skills.rest
dsactivi-2
dsactivi-2COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Provide frontend design guidelines for layouts, theming, and animations.

Updated Feb 16, 2026
Search Tags:#frontend#design system#tailwind css#web design#ui design#ux
One-click install
npx skills add https://github.com/dsactivi-2/Mujo-Team --skill frontend-design-dsactivi-2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dsactivi-2/Mujo-Team/tree/main/skills/superdesign
Command: npx skills add https://github.com/dsactivi-2/Mujo-Team --skill frontend-design-dsactivi-2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidelines and patterns for creating visually appealing, modern, and user-friendly interfaces for web applications.

Core Features & Use Cases

  • Layout Design: Create structured wireframes using ASCII art.
  • Theme Design: Define color palettes, font choices, spacing, and shadows with modern best practices.
  • Animation Design: Plan micro-interactions and transitions for a polished user experience.
  • Implementation Guidance: Offers examples for Tailwind CSS, Flowbite, and icon libraries.
  • Use Case: When starting a new project or redesigning an existing one, use this skill to establish a consistent and modern design language.

Quick Start

Use the frontend-design skill to generate a modern dark mode color theme using oklch() values.

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 dark mode UI theme using Tailwind CSS?▼

To create a modern dark mode UI theme using Tailwind CSS, define color palettes using oklch() values and apply modern best practices for spacing, fonts, and shadows to ensure visual consistency and accessibility.

What are the best practices for implementing glassmorphism and neo-brutalism in web design?▼

Implementing glassmorphism and neo-brutalism in web design involves applying specific UI patterns for theming, shadows, and layout, combined with responsive design and accessibility guidelines to achieve a polished user experience.

How do I plan layout wireframes and micro-interaction animations for a web app?▼

Plan layout wireframes using structured ASCII art and design micro-interaction animations by defining transitions and interactions that provide a polished, modern user experience for your web application.

Can I use Flowbite and Lucide icons alongside Tailwind CSS for UI implementation?▼

Yes, you can use Flowbite and Lucide icons alongside Tailwind CSS for UI implementation; the skill provides specific expert guidelines and examples for integrating these libraries to build modern interfaces.

How do I establish a consistent design language for a new frontend project?▼

Establish a consistent design language for a new frontend project by defining color palettes, font choices, spacing, and shadows, while utilizing Tailwind CSS, Flowbite, and Lucide icons for implementation.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
dseirz-rgbdseirz-rgb

frontend-design

Generate production-ready frontend components with responsive layouts and accessible theming.

Community
Basic
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced
zli5460zli5460
2

claude-design

Generate self-contained HTML prototypes with embedded CSS and JS.

Community
Intermediate