antfu-design

Implement antfu-style design conventions for UnoCSS user interfaces.

1|Updated Mar 19, 2026

Search Tags:#accessibility #ux design #ui design #unocss #design conventions

Ready to run

npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill antfu-design-pancake-q

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: antfu-design
Source: https://github.com/Pancake-Q/claude-plugin-frontend/tree/main/skills/antfu-design
Command: npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill antfu-design-pancake-q

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of design conventions and best practices for building user interfaces with UnoCSS, focusing on consistency, accessibility, and usability.

Core Features & Use Cases

Semantic Tokens: Leverage predefined, semantic tokens for consistent styling across your application.
Light and Dark Mode: Ensure your design looks great in both light and dark modes.
Accessibility: Follow best practices for accessibility, including proper contrast ratios and semantic HTML.
Micro-Interactions: Add subtle animations and effects to enhance user engagement.
Use Case: Use this Skill when designing and building complex user interfaces that need a consistent look and feel, such as dashboards, applications, and websites.

Quick Start

To apply the antfu design conventions to your project, run the antfu-design skill.

Frequently Asked Questions about antfu-design

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

FAQPage Schema

How do I implement consistent UI design conventions with UnoCSS?▼

You can implement consistent UI design conventions with UnoCSS by applying predefined semantic tokens, ensuring consistent styling across your application. This approach provides a unified look and feel for complex interfaces like dashboards.

What are semantic tokens and how do they support light and dark mode?▼

Semantic tokens are predefined styling variables that abstract design decisions, supporting light and dark mode by automatically adjusting values. This ensures your design looks great in both modes without manual color switching.

Can I add micro-interactions and accessibility best practices to my UX design?▼

Yes, you can add micro-interactions and accessibility best practices to your UX design by utilizing subtle animations and following proper contrast ratios. This enhances user engagement while maintaining accessible interfaces.

Does this approach work for building complex dashboards and web applications?▼

Yes, this approach works for building complex dashboards and web applications by providing a comprehensive set of design conventions. It delivers consistent, accessible, and engaging user interfaces for scalable projects.

What is the best way to ensure proper contrast ratios in UnoCSS interfaces?▼

The best way to ensure proper contrast ratios in UnoCSS interfaces is to follow built-in accessibility best practices. The conventions enforce proper contrast ratios and semantic HTML to maintain usable designs.