skills.rest
baoxukang123
baoxukang123COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Provide frontend design guidelines for layouts, themes, animations, and CSS patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and patterns for designing modern, visually appealing, and user-friendly interfaces, streamlining the frontend development process.

Core Features & Use Cases

  • Layout Design: Create structured wireframes and component layouts.
  • Theme Design: Define color palettes, typography, spacing, and shadows for modern aesthetics.
  • Animation Design: Plan and implement engaging micro-interactions and transitions.
  • Implementation Guidance: Offers best practices and integration examples for popular tools like Tailwind CSS, Flowbite, and Lucide icons.
  • Use Case: When starting a new project or redesigning an existing one, use this Skill to establish a consistent and modern design system, ensuring a professional and cohesive user experience across all platforms.

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 for a new web project?▼

To create a modern UI design system, define color rules, typography, spacing, and shadows. This Skill provides expert frontend design guidelines to establish a cohesive visual language, covering layout, theme, and animation patterns.

What are the best practices for implementing dark mode using Tailwind CSS?▼

For implementing dark mode with Tailwind CSS, use oklch() colors and specific CSS patterns. This Skill details color rules and implementation guidance for modern aesthetics, ensuring smooth theme transitions and accessible contrast.

Can I use this to add neo-brutalism and glassmorphism CSS patterns to my frontend?▼

Yes, you can add neo-brutalism and glassmorphism CSS patterns to your frontend. This Skill provides specific styling rules for shadows, spacing, and colors to help you implement these modern visual aesthetics correctly.

Does this provide implementation rules for Flowbite and Lucide icons?▼

Yes, this provides implementation rules for Flowbite and Lucide icons. It offers best practices and integration examples for these tools alongside Tailwind CSS to ensure a professional and cohesive user experience.

What's the best way to ensure responsive design and accessibility in frontend development?▼

The best way to ensure responsive design and accessibility in frontend development is to follow established best practices. This Skill includes guidelines for responsive layouts and accessibility to maintain a professional user experience.

Related Skills

Explore More Design & Creative Skills→
penghang1223penghang1223
1

frontend-design

Define frontend design guidelines for theming, layout, responsiveness, and accessibility.

Community
Intermediate
vecearvecear

responsive-design-system

Define responsive design systems with Tailwind CSS breakpoints, fluid typography, and container queries.

Community
Advanced
CraftOS-devCraftOS-dev
375

superdesign

Provide frontend design guidelines for layout, theme, and animation with Tailwind CSS.

Community
Intermediate
roanbrasilroanbrasil
5

css-mastery

Refactor legacy CSS with modern layout, responsive, and performance techniques.

Community
Intermediate