skills.rest
sigitpoerwo
sigitpoerwoCOMMUNITY
Explore all skills by this author →
GitHub

expert-frontend

Generate production-ready frontend UI architectures with Tailwind, Framer Motion, and accessible markup.

Updated Mar 29, 2026
Search Tags:#accessibility#frontend#animation#tailwind#glassmorphism#ui-ux#responsive-design
One-click install
npx skills add https://github.com/sigitpoerwo/repoworkspace_zahra --skill expert-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expert-frontend
Source: https://github.com/sigitpoerwo/repoworkspace_zahra/tree/main/skills/01-SIAP-PAKAI/coding/expert-frontend
Command: npx skills add https://github.com/sigitpoerwo/repoworkspace_zahra --skill expert-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds premium, production-ready frontend interfaces that avoid generic MVPs and elevate UI/UX, typography, motion, and responsiveness.

Core Features & Use Cases

  • Premium typography guidance and color systems that avoid default palettes.
  • Glassmorphism, depth, and micro-animation techniques for engaging interfaces.
  • Responsive design patterns and accessibility-first considerations for cross-device experiences.
  • Use Cases: SaaS landing pages, product pages, and admin dashboards with refined components.

Quick Start

Generate a production-ready premium frontend UI module that follows the design guidelines and accessibility best practices.

Frequently Asked Questions about expert-frontend

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

FAQPage Schema
How do I build a premium frontend UI for a SaaS landing page?▼

Build a premium frontend UI by applying refined typography, glassmorphism, and micro-animations. This approach generates production-grade web interfaces that elevate SaaS landing pages beyond generic MVPs using Tailwind and accessible markup.

How do I add glassmorphism and micro-animations to a responsive web interface?▼

Add glassmorphism and micro-animations to a responsive web interface using Framer Motion and Tailwind. This process applies depth techniques and motion design to create engaging cross-device experiences.

Can I use Tailwind and Framer Motion for accessible admin dashboards?▼

Yes, you can use Tailwind and Framer Motion for accessible admin dashboards. This approach applies accessibility-first considerations and responsive design patterns to generate refined dashboard components.

What is the best way to avoid generic MVP typography and color palettes in frontend design?▼

The best way to avoid generic MVP typography and color palettes is to implement premium typography guidance and custom color systems. This ensures production-ready frontend interfaces feature distinct, refined visual designs.

Does generating a production-ready UI module require manual accessibility markup?▼

Generating a production-ready UI module does not require manual accessibility markup. The process automatically satisfies accessibility-first considerations and cross-device responsive design requirements.

When should I not use glassmorphism for frontend UI components?▼

You should not use glassmorphism for frontend UI components when basic MVP interfaces suffice. This approach targets production-grade SaaS product pages and admin dashboards requiring advanced depth and motion techniques.

Related Skills

Explore More Design & Creative Skills→
mklozmkloz

animation-designer

Automate web animations, transitions, and motion designs with Framer Motion and CSS.

Community
Advanced
kqcoxnkqcoxn
369

frontend-design

Implement accessible frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
felvieirafelvieira
22

frontend-integration

Implement responsive React or Next.js interfaces with Zustand, React Query, and Tailwind.

Community
Intermediate
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced