skills.rest
Dzakiamriz22
Dzakiamriz22COMMUNITY
Explore all skills by this author →
GitHub

design

Generate accessible, responsive user interfaces with Next.js and TailwindCSS.

1|Updated Jul 15, 2026
Search Tags:#design#ui#accessibility#frontend#tailwind#shadcn
One-click install
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill design-dzakiamriz22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/design
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill design-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of creating high-quality, consistent, and accessible user interfaces that meet the standards of top-tier tech companies without manual coding overhead.

Core Features & Use Cases

  • Premium UI Generation: Creates components and pages using shadcn/ui, TailwindCSS, and Framer Motion that mirror the design quality of Apple, Linear, and Vercel.
  • Design System Enforcement: Automatically applies strict rules for spacing, typography, color tokens, and accessibility to ensure professional results.
  • Use Case: Quickly generate a fully functional, dark-mode-ready checkout page with Zod validation and skeleton loaders by simply describing the requirements.

Quick Start

Use the design skill to generate a responsive admin dashboard with a sidebar and analytics charts.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate accessible UI components with TailwindCSS and Next.js?▼

To generate accessible UI components, this skill applies semantic HTML, keyboard accessibility, and dark mode support within a Next.js and TailwindCSS ecosystem. It automatically enforces strict rules for spacing, typography, and color tokens to ensure professional results.

What is the best way to build a responsive admin dashboard with shadcn/ui?▼

The best way to build a responsive admin dashboard is by describing your requirements to this skill, which then generates complex pages and interactive layouts using shadcn/ui, TailwindCSS, and Framer Motion with consistent visual hierarchy.

Can I use Framer Motion for interactive layouts in a Next.js design system?▼

Yes, you can use Framer Motion for interactive layouts. This skill creates high-fidelity user interfaces using modern web standards, integrating Framer Motion alongside shadcn/ui and TailwindCSS to mirror top-tier tech company design quality.

Does this UI generation approach support dark mode and Zod validation?▼

Yes, this UI generation approach fully supports dark mode and Zod validation. It can quickly generate a fully functional, dark-mode-ready checkout page with Zod validation and skeleton loaders by simply describing the requirements.

Why does my generated frontend UI lack consistent visual hierarchy?▼

Generated frontend UI lacks consistent visual hierarchy when design system principles are not enforced. This skill solves this by automatically applying strict rules for spacing, typography, color tokens, and accessibility to ensure professional results.

Related Skills

Explore More Design & Creative Skills→
BumpyClockBumpyClock
1

shadcn-install-and-configure

Install and configure shadcn/ui across Next.js, Vite, Remix, and Astro.

Community
Intermediate
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced
kvnwolfkvnwolf
4

tanstack-form

Build type-safe forms with TanStack Form, Base UI Field, and Zod validation.

Community
Intermediate
jasonkneenjasonkneen
471

frontend-design

Construct frontend UIs with HTML, CSS, and JavaScript for responsive layouts.

Community
Intermediate