Why is an 8px grid system used?

An 8px grid ensures that all spacing (padding, margin, gaps) is predictable and scales perfectly across different screen resolutions and zoom levels.

How does this skill handle animations?

It allows only functional animations, such as 150ms color transitions for hovers or 200ms fades for visibility. Decorative animations like bounces or particles are prohibited.

What is the 'decoration-free' design principle?

It is a philosophy where every UI element is evaluated by its functional necessity. If an element exists only for decoration, it is excluded to minimize distraction and maximize productivity.

Is this skill compatible with existing CSS frameworks?

It is specifically optimized for Tailwind CSS and shadcn/ui, using semantic tokens and standard utility classes to maintain design consistency.

Does this skill support custom fonts like Inter or Roboto?

No, the skill strictly enforces system font stacks to ensure zero layout shift, maximum performance, and a native OS feel.

Dayopt Frontend Design

Name: Dayopt Frontend Design
Author: Dayopt

byDayopt

デザインツール

Enforces a minimalist, decoration-free UI design system focused on high-density productivity and functional feedback.

概要

The Dayopt Frontend Design skill provides Claude with a specialized framework for creating 'decoration-free' user interfaces. Modeled after high-efficiency tools like Google Calendar and Toggl, this skill prioritizes functional clarity over aesthetic flourishes. It guides the implementation of a strict 8px grid system, system font stacks, and semantic color tokens while restricting animations to strictly functional state changes. It is ideal for developers building productivity-focused applications where speed, density, and focus are paramount.

主な機能

Standardizes functional animations with defined durations for hover and state transitions.
0 GitHub stars
Implements a strict 8px grid system for consistent and predictable spacing.
Provides specific CSS and Tailwind patterns for system fonts and semantic colors.
Restricts UI elements to those that serve a clear functional purpose.
Enforces a 'decoration-free' philosophy to eliminate visual noise in productivity apps.

ユースケース

Maintaining design consistency across a large frontend codebase using shadcn/ui.
Building high-density data interfaces like calendars, task lists, and dashboards.
Refactoring cluttered user interfaces to improve user focus and application performance.

概要

主な機能

Standardizes functional animations with defined durations for hover and state transitions.
0 GitHub stars
Implements a strict 8px grid system for consistent and predictable spacing.
Provides specific CSS and Tailwind patterns for system fonts and semantic colors.
Restricts UI elements to those that serve a clear functional purpose.
Enforces a 'decoration-free' philosophy to eliminate visual noise in productivity apps.

ユースケース

Maintaining design consistency across a large frontend codebase using shadcn/ui.
Building high-density data interfaces like calendars, task lists, and dashboards.
Refactoring cluttered user interfaces to improve user focus and application performance.