skills.rest
theofernandezz
theofernandezzCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/theofernandezz/ai-library --skill ui-engineering-theofernandezz
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
luanzebaluanzeba

frontend-design

Convert design prompts into production-ready frontend interfaces with cohesive aesthetics.

Community
Advanced
JaylaelikeJaylaelike

tailwind-design-system

Build scalable Tailwind v4 design systems with tokens and responsive patterns.

Community
Intermediate
SensLiaoSensLiao

redesign-existing-projects

Redesign websites and applications while preserving existing functionality and CSS frameworks.

Community
Advanced