skills.rest
julianoczkowski
julianoczkowskiCOMMUNITY
Explore all skills by this author →
GitHub

modus-frontend

Design Modus 2.0 compliant frontend interfaces with Tailwind CSS and web components.

3|2|Updated Oct 3, 2025
Search Tags:#frontend#react#angular#design-system#web-components#tailwind-css#modus-2.0
One-click install
npx skills add https://github.com/julianoczkowski/create-trimble-app --skill modus-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modus-frontend
Source: https://github.com/julianoczkowski/create-trimble-app/tree/main/templates/angular/.cursor/skills/modus-frontend
Command: npx skills add https://github.com/julianoczkowski/create-trimble-app --skill modus-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? Produces production-grade frontend interfaces that adhere to the Modus 2.0 Design System, eliminating design drift across React, Angular, or any framework.

## Core Features & Use Cases

  • Enforces the 9-color semantic system, Tailwind CSS constraints, and Modus Web Components.
  • Generates framework-agnostic UI patterns (dashboards, pages, components) ready for production deployment.
  • Supports theming across the six Modus themes and accessible defaults.

### Quick Start Provide a frontend requirement such as a dashboard page with a responsive layout.

Frequently Asked Questions about modus-frontend

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

FAQPage Schema
How do I build frontend interfaces that comply with the Modus 2.0 design system?▼

To build Modus 2.0 compliant frontend interfaces, use Modus web components and Tailwind CSS. This ensures adherence to the 9-color semantic system and accessible defaults across your application screens.

Can I use Modus 2.0 web components with both React and Angular?▼

Yes, Modus 2.0 web components work with React, Angular, or any web framework. The system generates framework-agnostic UI patterns like dashboards and pages ready for production deployment.

What is the best way to prevent design drift in enterprise frontend applications?▼

The best way to prevent design drift is enforcing design-system compliance using Modus 2.0 tokens. It restricts HTML to div-based structures and Modus web components, ensuring consistent UI across frameworks.

Does Modus 2.0 support theming for enterprise dashboards and web components?▼

Yes, Modus 2.0 supports theming across six distinct themes. It applies accessible defaults and semantic color tokens to generate production-grade dashboard layouts and application screens.

Do I need Tailwind CSS to generate Modus 2.0 production-grade UI patterns?▼

Yes, Tailwind CSS usage is required to generate Modus 2.0 production-grade UI patterns. The design system enforces Tailwind CSS constraints alongside its 9-color semantic system for proper styling.

How do I start designing a responsive dashboard layout using Modus 2.0?▼

To start designing a responsive dashboard layout, provide a frontend requirement prompt. The system will output framework-agnostic UI patterns restricted to div-based HTML and Modus web components.

Related Skills

Explore More Software Engineering Skills→
julianoczkowskijulianoczkowski
3

style-modus-components-with-tailwind

Replace Tailwind border and opacity patterns with CSS-variable utilities for Modus components.

Community
Intermediate
GoosLabGoosLab

moai-library-shadcn

Integrate shadcn/ui components into React applications with theming and accessibility.

Community
Advanced
williamisnotdefinedwilliamisnotdefined
4

frontend-styling

Manage Tailwind CSS v4 styling with semantic classes and responsive grids.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

web-component-design

Guide design of reusable UI components across React, Vue, and Svelte.

Community
Basic