skills.rest
Fandry96
Fandry96COMMUNITY
Explore all skills by this author →
GitHub

design-editorial

Implement editorial design system blueprints for Next.js 15 projects.

27|5|Updated Apr 3, 2026
Search Tags:#typography#design#ui#accessibility#nextjs#tailwind#design-system
One-click install
npx skills add https://github.com/Fandry96/k3-agentic-skills --skill design-editorial
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-editorial
Source: https://github.com/Fandry96/k3-agentic-skills/tree/main/skills/design-editorial
Command: npx skills add https://github.com/Fandry96/k3-agentic-skills --skill design-editorial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editorial design-system blueprint codifies typography, layout, and accessibility standards to ensure consistent, production-ready editorial apps.

Core Features & Use Cases

  • Font implantation for Next.js apps (Gelasio, Inter, Ubuntu Mono)
  • Tailwind v4 theme overrides to enforce design tokens
  • UI implementation mandates for typography, separators, and image captions
  • Use Case: teams building Next.js 15 apps can adopt the blueprint to achieve consistent editorial layouts and typography.

Quick Start

Apply this blueprint to your Next.js project and implement the fonts, tokens, and UI rules as shown.

Frequently Asked Questions about design-editorial

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

FAQPage Schema
How do I implement an editorial design system with serif typography in Next.js?▼

Apply an editorial design blueprint to your Next.js project using Tailwind v4 theme overrides and Shadcn UI to govern design tokens. It mandates specific fonts, separators, and image captions to ensure accessible and consistent layouts.

What fonts do I need for an accessible editorial UI layout?▼

Accessible editorial UI layouts require Gelasio, Inter, and Ubuntu Mono fonts to establish visual hierarchy. Configured via Next.js font setup, these fonts enforce typographic fidelity and consistent design-token governance across components.

Can I use Tailwind v4 to enforce design tokens for editorial grids?▼

Yes, Tailwind v4 theme overrides enforce design tokens for editorial grids. The blueprint applies token governance to maintain typographic consistency and layout standards across all pages and UI components in Next.js.

Does the editorial UI blueprint work with Shadcn UI components?▼

Yes, the editorial UI blueprint integrates Shadcn UI components within Next.js 15. It applies typographic mandates and design-token governance to these components to ensure production-ready and accessible editorial layouts.

What is the best way to standardize typography and image captions in a Next.js app?▼

Standardize typography and image captions by implementing a design-system blueprint with Tailwind v4. It codifies UI implementation mandates for typography, separators, and captions to deliver consistent editorial apps.

Do I need Next.js 15 to apply this editorial design system blueprint?▼

Yes, applying this editorial design system blueprint requires Next.js 15. The framework version ensures compatibility with the Tailwind v4 theme overrides and font setup needed for typographic fidelity.

Related Skills

Explore More Design & Creative Skills→
Fandry96Fandry96
27

design-luxury

Implement a luxury design system blueprint for Next.js 15 apps with Tailwind v4 and Shadcn UI.

Community
Advanced
Akhil-Naik-9Akhil-Naik-9
1

design-work

Codify Wix Vibe UI guidelines for layouts, typography, color, and components.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
Fandry96Fandry96
27

design-premium

Define and enforce a premium design system blueprint for Next.js 15 apps.

Community
Advanced