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

0•

Design Tools

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.

Key Features

01Standardizes functional animations with defined durations for hover and state transitions.

020 GitHub stars

03Implements a strict 8px grid system for consistent and predictable spacing.

04Provides specific CSS and Tailwind patterns for system fonts and semantic colors.

05Restricts UI elements to those that serve a clear functional purpose.

06Enforces a 'decoration-free' philosophy to eliminate visual noise in productivity apps.

Use Cases

01Maintaining design consistency across a large frontend codebase using shadcn/ui.

02Building high-density data interfaces like calendars, task lists, and dashboards.

03Refactoring cluttered user interfaces to improve user focus and application performance.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dayopt/app frontend-design

For use in Claude.ai and ChatGPT

Download Skill