skills.rest
PracticalSwan
PracticalSwanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend UI/UX design with WCAG accessibility and Tailwind CSS patterns.

7|2|Updated Feb 20, 2026
Search Tags:#accessibility#responsive design#tailwind css#ux design#color theory#ui design
One-click install
npx skills add https://github.com/PracticalSwan/agent-skills --skill frontend-design-practicalswan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/PracticalSwan/agent-skills/tree/main/frontend-design
Command: npx skills add https://github.com/PracticalSwan/agent-skills --skill frontend-design-practicalswan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and examples (resource) components.

What problem does it solve?

This Skill helps you design and implement user interfaces that are visually appealing, accessible, and responsive, ensuring a great user experience across all devices.

Core Features & Use Cases

  • Color Theory: Apply the 60-30-10 rule and ensure WCAG contrast compliance.
  • Responsive Layouts: Build interfaces that adapt seamlessly from mobile to desktop.
  • Component Design: Create reusable UI components using modern patterns and accessibility best practices.
  • Use Case: When designing a new dashboard, use this Skill to select an accessible color palette and structure the layout for optimal viewing on both mobile phones and large monitors.

Quick Start

Use the frontend-design skill to create a responsive card component using Tailwind CSS.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I ensure my UI design meets WCAG accessibility standards?▼

Ensuring UI design meets WCAG accessibility standards involves verifying color contrast ratios and applying color theory rules like 60-30-10. This Skill provides comprehensive guidance on implementing these standards for responsive layouts.

What is the best way to build a responsive card component with Tailwind CSS?▼

The best way to build a responsive Tailwind CSS card component is by applying modern CSS patterns to ensure seamless adaptation across mobile and desktop devices. This Skill facilitates creating accessible, reusable UI components using these techniques.

How do I apply color theory to create an accessible color palette?▼

Apply color theory to create accessible color palettes by using the 60-30-10 rule and checking WCAG contrast compliance. This Skill guides you through selecting visually appealing, accessible colors for user interfaces.

Can I use this guidance to structure layouts for both mobile phones and large monitors?▼

Yes, you can use this guidance to structure layouts for both mobile phones and large monitors. It provides comprehensive responsive design principles that help build interfaces adapting seamlessly across all device sizes.

Does this Skill require any specific frontend frameworks to function?▼

No, this Skill does not require any specific frontend frameworks to function as it has no dependencies. While it offers examples using Tailwind CSS, the core UI/UX design principles and accessibility standards apply broadly.

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
JongsixJongsix

moai-design-tools

Translate Figma metadata and .pen designs into React/Tailwind components.

Community
Advanced
galangryandanagalangryandana
20

ui-ux-pro-max

Search UI styles, color palettes, font pairings, and UX guidelines by domain.

Community
Basic
shynlee04shynlee04

Frontend CSS

Enforce consistent CSS styling with Tailwind, BEM, and CSS Modules.

Community
Intermediate