Can I generate a full page with one command?

Yes, by using the /roastplus-ui command, you can select 'New Page' and Claude will guide you through choosing a layout type and generating the complete implementation code.

How does the Christmas mode work?

The skill provides specific color schemes and radial gradient background patterns that can be toggled via state hooks to transform the app's visual style instantly.

Does this skill support mobile-first design?

Yes, the system is built with a mobile-first approach, utilizing specific Tailwind breakpoints and enforcing 44px minimum touch targets for better usability on mobile devices.

What version of Tailwind CSS does this use?

This skill is optimized for Tailwind CSS v4, using its latest utility classes and configuration patterns for modern frontend development.

Are the components accessible?

Absolutely. The skill follows accessibility best practices, including proper ARIA labels, focus-visible rings, and keyboard navigation support for interactive elements like modals.

Roast Plus UI Design System

Name: Roast Plus UI Design System
Author: IKcoding-jp

byIKcoding-jp

0•

设计工具

Implements a coffee-inspired Tailwind CSS v4 design system with standardized layouts, accessible components, and seasonal themes.

The Roast Plus UI skill is a specialized frontend development tool designed to maintain design consistency and accessibility within the Roast Plus application. It leverages Tailwind CSS v4 to provide a premium 'coffee-themed' aesthetic using a palette of oranges and deep browns, while also supporting seasonal variations like Christmas mode. The skill streamlines the development process by offering pre-configured layout templates, high-quality component patterns with 44px minimum touch targets, and motion guidelines, ensuring that every new feature aligns with the core design philosophy of professionalism and warmth.

主要功能

01Dual-theme support for standard coffee branding and Christmas mode

02Standardized responsive layout templates for various page types

03Tailwind CSS v4 utility-first implementation for rapid styling

040 GitHub stars

05Accessible component library including buttons, inputs, and cards

06Built-in animation patterns for smooth, premium user transitions

使用场景

01Implementing seasonal UI updates and theme-swapping logic

02Auditing existing components for design consistency and accessibility compliance

03Scaffolding new application pages using pre-defined layout and auth templates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ikcoding-jp/roast-plus roastplus-ui

For use in Claude.ai and ChatGPT

主要功能

01Dual-theme support for standard coffee branding and Christmas mode

02Standardized responsive layout templates for various page types

03Tailwind CSS v4 utility-first implementation for rapid styling

040 GitHub stars

05Accessible component library including buttons, inputs, and cards

06Built-in animation patterns for smooth, premium user transitions

使用场景

01Implementing seasonal UI updates and theme-swapping logic

02Auditing existing components for design consistency and accessibility compliance

03Scaffolding new application pages using pre-defined layout and auth templates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ikcoding-jp/roast-plus roastplus-ui

For use in Claude.ai and ChatGPT