skills.rest
Pancake-Q
Pancake-QCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill antfu-design-pancake-q
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
xuyannan0321xuyannan0321

antfu-design

Apply UnoCSS semantic tokens and light/dark theme conventions to UI development.

Community
Advanced
234194027-cpu234194027-cpu

frontend-design

Creates production-grade frontend interfaces with cohesive typography, color, and motion.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
mgd34msumgd34msu
4

unocss

Generate atomic CSS on demand with UnoCSS utility classes and custom rules.

Community
Intermediate