skills.rest
Xza85hrf
Xza85hrfCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-pro

Generate cinematic frontend design prompts with motion systems and component recipes.

Updated Feb 9, 2026
Search Tags:#design#accessibility#frontend#design-tokens#ui-patterns#motion-design#cinematic-ui
One-click install
npx skills add https://github.com/Xza85hrf/claude-code-agent-kit --skill frontend-design-pro-xza85hrf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-pro
Source: https://github.com/Xza85hrf/claude-code-agent-kit/tree/main/.claude/skills/engineering/frontend-design-pro
Command: npx skills add https://github.com/Xza85hrf/claude-code-agent-kit --skill frontend-design-pro-xza85hrf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Premium frontend design is hard: teams struggle to translate design intent into cinematic, motion-rich interfaces that scale across products. This skill provides a repeatable workflow to generate production-grade frontend prompts, patterns, and references that blend design thinking with AI-assisted UX.

Core Features & Use Cases

  • Cinematic UX guidelines: motion systems, glassmorphism, 3D depth, and scroll storytelling.
  • Component recipes: reusable patterns for hero sections, cards, navigation, dashboards, and SaaS components.
  • Design-token driven themes: CSS variables, color ramps, and typography scales for consistent UI across apps.
  • References and anti-vibe guardrails: distilled best practices and standards to ship with confidence.

Quick Start

Run this skill to bootstrap a cinema-grade frontend design prompt and generate production-ready UI patterns.

Frequently Asked Questions about frontend-design-pro

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

FAQPage Schema
What is cinematic UI design and how does motion design apply to frontend?▼

Cinematic UI design blends motion design systems, glassmorphism, and scroll storytelling to create premium, motion-rich interfaces. It translates design intent into scalable frontend patterns for landing pages, dashboards, and product showcases.

How do I create a design token system for React components?▼

Generate token-driven themes using CSS variables, color ramps, and typography scales to ensure consistent UI. This provides a repeatable workflow for building design token systems adaptable to React-based codebases.

Does this approach support accessible motion and GPU-friendly CSS patterns?▼

Yes, this approach satisfies requirements for accessible motion and GPU-friendly CSS and JS patterns. It includes distilled best practices and anti-vibe guardrails to ensure production-grade, accessible frontend implementations.

How do I build reusable component recipes for SaaS dashboards?▼

Build reusable component recipes by applying premium UI patterns for hero sections, cards, navigation, and SaaS components. These recipes combine motion systems with design-token driven themes to scale cinematic UX across products.

What are the limitations of using motion-rich interfaces in frontend development?▼

Motion-rich interfaces risk scaling issues without anti-vibe guardrails and GPU-friendly patterns. Limitations are mitigated by applying token-driven design systems, accessible motion standards, and distilled best practices.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
minhtri2710minhtri2710

frontend-design

Design production-grade frontend interfaces with reusable components and distinctive aesthetics.

Community
Basic
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
bughqbughq
2

stacks-design-soft

Engineer premium UI components with Crosswind utilities and custom CSS in Stacks.

Official
Advanced