skills.rest
gyarra
gyarraCOMMUNITY
Explore all skills by this author →
GitHub

s-pacine-design

Apply Tailwind CSS design tokens and typography rules to Next.js UI pages.

Updated Aug 27, 2026
Search Tags:#typography#design#tailwind#design-system#ui-development#component-patterns#pa-cine
One-click install
npx skills add https://github.com/gyarra/cine_medallo_2 --skill s-pacine-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: s-pacine-design
Source: https://github.com/gyarra/cine_medallo_2/tree/main/.claude/skills/s-pacine-design
Command: npx skills add https://github.com/gyarra/cine_medallo_2 --skill s-pacine-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pa' Cine design system provides a single source of truth for colors, typography, spacing, and component patterns to ensure visual consistency across pages and components.

Core Features & Use Cases

  • Color tokens, typography scales, spacing rules, and reusable component patterns
  • Tokens-driven design across new pages, components, and layouts
  • Use Case: when creating a new Pa' Cine page, apply the system to match existing styles and behavior

Quick Start

Apply Pa' Cine's design system to build new pages and components with consistent colors, typography, spacing, and patterns.

Frequently Asked Questions about s-pacine-design

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

FAQPage Schema
How do I standardize UI typography and spacing in a Next.js app?▼

You can standardize UI typography and spacing by applying a tokens-driven design system using Tailwind CSS, enforcing consistent color tokens, typography scales, and layout rules across all Next.js pages and components.

What is a tokens-driven design system for Tailwind CSS?▼

A tokens-driven design system uses predefined Tailwind CSS tokens like red-500 and zinc-900 as a single source of truth for colors, typography, and spacing, ensuring visual consistency across all components and layouts.

How do I ensure visual consistency when creating new UI components?▼

You ensure visual consistency by applying reusable component patterns and predefined spacing rules from a unified design system, matching new pages and components to existing styles and behavior automatically.

Does this design system approach support responsive and accessible UI?▼

Yes, the tokens-driven approach enforces layout rules and typography scales using Tailwind CSS to support responsive layouts and accessible UI components across the Next.js application.

Can I use Tailwind CSS color tokens to build a unified design system?▼

Yes, you can use Tailwind CSS color tokens like red-500 and zinc-900 as foundational design tokens to build a unified system that standardizes color usage across new pages and components.

Related Skills

Explore More Design & Creative Skills→
JaivishChauhanJaivishChauhan
6

tailwind-mastery

Configure Tailwind CSS v4 design systems with CSS variables in Next.js projects.

Community
Advanced
imehrimehr

frontend-dev-guidelines

Enforces design-system quality rules for React/Next.js projects with Tailwind, MUI, and Radin.

Community
Advanced
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced