skills.rest
Stack-and-Flow
Stack-and-FlowOFFICIAL
Explore all skills by this author →
GitHub

bootstrapping

Install Stack-and-Flow, import its CSS, and wire Tailwind v4 token overrides.

23|4|Updated May 7, 2025
Search Tags:#theming#react#design system#css-first#tailwind v4#white-label#token customization
One-click install
npx skills add https://github.com/Stack-and-Flow/design-system --skill bootstrapping-stack-and-flow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bootstrapping
Source: https://github.com/Stack-and-Flow/design-system/tree/main/.atl/skills/bootstrapping
Command: npx skills add https://github.com/Stack-and-Flow/design-system --skill bootstrapping-stack-and-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides external teams to adopt Stack-and-Flow quickly by customizing their brand tokens, so the design system looks like their product without changing component structure.

Core Features & Use Cases

  • Install and integrate the package: Add the design system as an npm dependency and import its global styles in the correct entry file for Next.js, Vite, or Remix.
  • Configure Tailwind v4 compatibility: Use Tailwind v4’s CSS-first workflow so the theme tokens are applied correctly and consistently.
  • Customize tokens safely (scope-limited): Override only brand-related CSS theme variables (colors, typography, spacing, radii) to keep all components inheriting the design system architecture.

Quick Start

Tell the skill to help you install @stack-and-flow/design-system, import its styles once, confirm you’re using Tailwind v4, and create your brand token override file to match your brand colors and font.

Frequently Asked Questions about bootstrapping

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

FAQPage Schema
How do I white-label a React design system without changing component architecture?▼

To white-label a React design system, you override only brand-related CSS theme variables like colors, typography, spacing, and radii. This approach keeps the component architecture unchanged while ensuring your product inherits the design system styling.

How do I configure Tailwind v4 to consume a CSS-first design system token theme layer?▼

You configure Tailwind v4 by wiring it to consume the token theme layer using its CSS-first workflow. You must validate the CSS import order to ensure cascade correctness and define your consumer override layer after the base styles.

Do I need React 18 and Tailwind v4 to adopt a CSS-first design system?▼

Yes, adopting this design system requires React version 18 or higher and Tailwind CSS version 4 or higher. These dependencies ensure the token theme layer and CSS-first workflow integrate correctly with your project.

How do I import global styles from an npm design system package in Next.js or Vite?▼

You import global styles by installing the design system as an npm dependency and adding its CSS import to your project's correct entry file. This applies whether you are using Next.js, Vite, or Remix.

Why does my design system theming break after overriding CSS tokens?▼

Design system theming breaks when the CSS import order lacks cascade correctness. You must ensure your consumer override layer defines theme variables after the base styles are imported so the tokens apply consistently.

Related Skills

Explore More Design & Creative Skills→
otoshekotoshek
2

tailwind-setup

Configure Tailwind CSS and shadcn/ui for React frontends with Django backends.

Community
Advanced
semaes111semaes111

design-mirror

Extract visual design tokens from a reference site and apply them across a codebase.

Community
Advanced
ag47-ptag47-pt
1

tailwind-patterns

Guide Tailwind CSS v4 architecture and responsive styling patterns.

Community
Intermediate
EdgeAppEdgeApp
1

coinhub

Rebases the Coinhub branch and regenerates Jest snapshots for the edge-react-gui repository.

Official
Advanced