skills.rest
jorgeochipinti97
jorgeochipinti97COMMUNITY
Explore all skills by this author →
GitHub

frontend-foundation

Establish design tokens, dual themes, and a spacing scale for React/Next.js projects.

Updated Jan 22, 2026
Search Tags:#architecture#frontend#mobile-first#dark-mode#design-tokens#component-system
One-click install
npx skills add https://github.com/jorgeochipinti97/dublin-skills --skill frontend-foundation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-foundation
Source: https://github.com/jorgeochipinti97/dublin-skills/tree/main/skills/frontend/frontend-foundation
Command: npx skills add https://github.com/jorgeochipinti97/dublin-skills --skill frontend-foundation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Day-0 frontend foundation ensures consistent spacing, accessible theming, and layout stability across React/Next.js apps. It tackles issues like inconsistent spacing, missing dark mode, mobile usability gaps, and CLS regressions by establishing a cohesive design system from the start.

Core Features & Use Cases

  • Design tokens, dual theme (dark + light), and a responsive spacing scale to create a cohesive visual language.
  • A mobile-first layout strategy and CLS Zero discipline to prevent layout shifts during load.
  • A reusable component system on headless primitives (Base UI, Radix, React Aria) that accelerates development while ensuring accessibility.
  • Works as the foundational layer invoked before premium-frontend-design, and pairs with a frontend-output-validator for post-implementation checks.
  • Use cases include starting a new frontend project, setting up a design system, or quickly fixing foundational issues like broken mobile layouts or icon budget violations.

Quick Start

Initialize frontend-foundation at project start to establish tokens, dual theme, and mobile-first layout before building UI components.

Frequently Asked Questions about frontend-foundation

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

FAQPage Schema
How do I set up a frontend design system with dark mode and consistent spacing in React?▼

Establish a frontend foundation by defining design tokens, a dual theme, and a responsive spacing scale before building UI. This ensures consistent spacing and accessible theming across React and Next.js applications from day zero.

What's the best way to prevent layout shift issues when starting a new Next.js project?▼

Prevent layout shift issues by applying mobile-first layout strategies and CLS Zero discipline at project initialization. Setting up a non-negotiable frontend foundation before building components ensures layout stability during page load.

How does a headless component system work with design tokens?▼

A headless component system integrates with design tokens by applying pre-defined spacing scales and dual themes to accessible primitives like Base UI, Radix, or React Aria. This accelerates development while maintaining visual consistency.

Can I fix broken mobile layouts and missing dark mode in an existing React project?▼

You can fix broken mobile layouts and missing dark mode by applying a frontend foundation to establish a cohesive design system. This process enforces a mobile-first layout strategy and configures dual themes to resolve foundational gaps.

Do I need to configure an icon budget when setting up a frontend architecture?▼

Configuring an icon budget is required when establishing a frontend architecture to prevent performance issues and layout shifts. The foundation setup explicitly satisfies icon budget requirements alongside design tokens and mobile-first layout constraints.

When should I not use a day-0 frontend foundation approach?▼

A day-0 frontend foundation is not suitable for static websites or prototypes that do not require a scalable design system. It is specifically designed for React and Next.js applications needing strict layout stability, dual themes, and component reusability.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
bughqbughq
2

stacks-imagegen-web

Generate horizontal website section reference images for frontend design workflows.

Official
Intermediate
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
inbharataiinbharatai
22

theme-factory

Generate UI themes with color tokens, spacing scales, and typography for CSS and Tailwind CSS.

Community
Intermediate