skills.rest
sabahattink
sabahattinkCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Codify design principles into reusable patterns for Next.js applications.

27|9|Updated Jan 20, 2026
Search Tags:#design#ui#react#component#nextjs#tailwind#design-system
One-click install
npx skills add https://github.com/sabahattink/antigravity-fullstack-hq --skill frontend-design-sabahattink
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sabahattink/antigravity-fullstack-hq/tree/main/skills/frontend-design
Command: npx skills add https://github.com/sabahattink/antigravity-fullstack-hq --skill frontend-design-sabahattink

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI component design principles and a cohesive visual language are often applied inconsistently across Next.js apps, leading to duplicated effort and fractured user experiences.

Core Features & Use Cases

  • Visual Hierarchy, Spacing System, Typography, Color System, and Component Patterns to establish a scalable design language.
  • Use Case: Build a cohesive design system for a Next.js admin dashboard with reusable Card, Button, and Form components that maintain typography, spacing, and color consistency across pages.

Quick Start

Start by defining a design token system and implement a reusable Card component with consistent typography and spacing.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a consistent UI design system for a Next.js application?▼

Build a consistent UI design system by codifying visual hierarchy, spacing, typography, and color into reusable token-based patterns for your Next.js application. This establishes a scalable design language across pages.

What's the best way to enforce component consistency in React and Tailwind at scale?▼

Enforce component consistency by applying token-based typography, spacing, and color rules directly to reusable React and Tailwind components. This prevents duplicated effort and fractured user experiences across interfaces.

Does this design pattern approach work for admin dashboards and marketing sites?▼

Yes, this design pattern approach works for admin dashboards and marketing sites. It applies scalable component patterns to maintain visual and functional consistency across varied Next.js interfaces.

How do I start implementing design tokens for typography and spacing in Next.js?▼

Start implementing design tokens by defining your typography, spacing, and color system foundations, then applying them to a reusable component. This ensures consistent styling across your Next.js app.

Why does my Next.js UI look inconsistent across different pages?▼

Your Next.js UI looks inconsistent because component design principles are applied inconsistently. Codifying these principles into reusable, token-based patterns eliminates duplicated effort and visual fractures.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
johnnyelwailerjohnnyelwailer

chakra-ui

Build accessible React interfaces with Chakra UI components and theming tokens.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced