ui-engineering

Define reusable UI patterns with design tokens, glassmorphism, and Tailwind v4.

Updated Jan 26, 2026

Search Tags:#tailwind #tokens #glassmorphism #ui-design #shadcn-ui #design-systems #aceternity-ui

Ready to run

npx skills add https://github.com/theofernandezz/ai-library --skill ui-engineering-theofernandezz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-engineering
Source: https://github.com/theofernandezz/ai-library/tree/main/.opencode/skills/ui-engineering
Command: npx skills add https://github.com/theofernandezz/ai-library --skill ui-engineering-theofernandezz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI development often suffers from inconsistent visuals and duplicated patterns. This skill provides a reusable framework for premium interfaces, ensuring cohesive design across products.

Core Features & Use Cases

Practical guidance for combining Shadcn UI primitives with Aceternity UI effects to deliver accessible, polished interfaces.
Design-token driven theming, glassmorphism techniques, responsive layout strategies, and a scalable file organization suitable for design systems.
Real-world scenarios include building marketing pages with animated hero sections, component libraries, and pattern-driven UI architectures.

Quick Start

Follow the Linear Style guidelines to scaffold a new UI component using Shadcn UI primitives and Aceternity animations.

Frequently Asked Questions about ui-engineering

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

FAQPage Schema

How do I build a design system using Tailwind and Shadcn UI?▼

Build a design system using Tailwind and Shadcn UI by applying design-token driven theming, glassmorphism techniques, and the cn() utility. This enforces cohesive visuals, responsive grids, and accessible interactions across component libraries.

What's the best way to combine Aceternity UI animations with Shadcn UI components?▼

Combine Aceternity UI animations with Shadcn UI components by integrating Aceternity effects into Shadcn primitives. This delivers accessible, polished interfaces suitable for marketing pages with animated hero sections.

How does glassmorphism work with design tokens in Tailwind v4?▼

Glassmorphism works with design tokens in Tailwind v4 by centralizing visual properties into reusable tokens. This ensures consistent premium UI patterns and cohesive theming across responsive layouts.

Can I use this Linear style approach for marketing pages?▼

You can use this Linear style approach for marketing pages to ensure consistent visuals and responsive behavior. It provides scalable file organization and pattern-driven UI architectures suitable for cohesive designs.

Do I need specific architecture requirements to maintain accessible interactions in a component library?▼

Maintaining accessible interactions in a component library requires specific architecture guardrails, including the cn() utility, design tokens, and responsive grids. These enforce consistent visual and functional standards.