skills.rest
kaikunnnn
kaikunnnnCOMMUNITY
Explore all skills by this author →
GitHub

BONO Design System

Centralize design tokens for UI consistency in Next.js applications.

Updated Mar 29, 2025
Search Tags:#frontend#design system#design tokens#nextjs#tailwind#ui consistency
One-click install
npx skills add https://github.com/kaikunnnn/bono-training --skill bono-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: BONO Design System
Source: https://github.com/kaikunnnn/bono-training/tree/main/.claude/design-system
Command: npx skills add https://github.com/kaikunnnn/bono-training --skill bono-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of design drift and inconsistent UI implementation by providing a centralized, token-based system for colors, typography, spacing, and component patterns.

Core Features & Use Cases

  • Token-Based Styling: Ensures all UI elements resolve to defined CSS variables, preventing hard-coded hex values.
  • Component Patterns: Provides canonical references for buttons, cards, and marketing surfaces to ensure visual uniformity.
  • Use Case: When building a new marketing page, use this Skill to reference the canonical button shapes and roadmap gradients, ensuring the new page matches the existing BONO aesthetic perfectly.

Quick Start

Use the BONO Design System skill to verify that all color and typography tokens in the current component are correctly mapped to the design system variables.

Frequently Asked Questions about BONO Design System

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

FAQPage Schema
How do I maintain UI consistency with design tokens in Next.js?▼

A design token system solves design drift by centralizing colors, typography, and spacing into standardized variables. It eliminates hard-coded hex values and provides canonical component patterns for rapid, visually uniform interface development.

How do I eliminate hard-coded color values in a Tailwind frontend?▼

To eliminate hard-coded color values in a Tailwind frontend, resolve all UI elements to defined CSS variables within a centralized token system. This enforces a canonical palette and prevents visual drift across application surfaces.

Does this design system skill provide component patterns for marketing UI?▼

Yes, this design system skill provides canonical component references for marketing UI, including buttons, cards, and roadmap gradients. These patterns ensure new pages match the existing visual aesthetic perfectly.

Can I use this design system skill to verify typography tokens in my current component?▼

Yes, you can use this design system skill to verify that all typography and color tokens in your current component are correctly mapped to the design system variables, ensuring full compliance with the standardized styling.

Related Skills

Explore More Design & Creative Skills→
abdulahad139abdulahad139

tailwind-css

Standardize UI styling with reusable Tailwind CSS patterns in React/Next.js apps.

Community
Intermediate
dylantarredylantarre
38

color-scale

Generate 11-step OKLCH color scales from a base hex color.

Community
Basic
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
Fantasia1999Fantasia1999

ui-design-system

Generate design tokens and export them as CSS variables.

Community
Advanced