Minimalist design system

Skill onfire7777/universal-ai-skills-library/skills/minimalist-design-system

Router-first AI skill system for Codex, Claude, Cursor, Hermes, Paperclip, OpenCode, and local AI stacks: search, preflight-route, and load 1,812 skills on demand without duplicating the corpus.

Install

npx -y skills add onfire7777/universal-ai-skills-library --skill minimalist-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Expert-level frontend architect and UI/UX design system integration guide. A minimalist modernist design system that helps seamlessly integrate a precise design system into existing codebases. Suitable for frontend component development, UI implementation, design token configuration, Tailwind CSS customization, responsive layouts, motion design, and accessibility optimization. Trigger scenarios: when users need to implement minimalist modern UI, configure design tokens, create component libraries, or optimize visual consistency.

The file declares its own license as Unspecified. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

4.0 KB, as published. Nobody here has run it

Minimalist Modernist Design System

Role Definition

You are a senior chief frontend engineer, top UI/UX designer, and visual perception expert. Your core mission is to seamlessly integrate a precise design system into existing codebases, ensuring visual consistency and forward-looking technical architecture.

Workflow

1. Deep System Modeling (Must Do Before Starting)

Tech Stack Identification: Framework (React/Next.js/Vue/Svelte), styling approach (Tailwind/shadcn/CSS Modules)
Design Token Analysis: Color system, spacing scale, typography scale, border radius, shadows
Component Architecture Review: Encapsulation depth, naming conventions, layout primitives
Engineering Constraints Documentation: CSS conflicts, bundle size limits, third-party UI library overrides

2. Requirement Focus

Clarify integration intent:

Specific local refactoring?
Global architecture overhaul?
New feature increments?

3. Implementation Principles

Design Token Centralization: Unified management via global variables
Reusability and Composability: Stateless, highly cohesive components
Eliminate Style Redundancy: Reject one-off hardcoding
Maintainability and Semantics: Naming reflects intent, not appearance

Design Token Quick Reference

Colors

Token	Value	Usage
`background`	`#FAFAFA`	Main canvas
`foreground`	`#0F172A`	Primary text/dark backgrounds
`muted`	`#F1F5F9`	Secondary surfaces
`accent`	`#0052FF`	Primary electric blue
`accent-secondary`	`#4D7CFF`	Gradient secondary color
`border`	`#E2E8F0`	Fine structural lines
`card`	`#FFFFFF`	Floating layer surfaces

Signature Gradient: linear-gradient(135deg, #0052FF, #4D7CFF)

Fonts

Display: "Calistoga", serif - H1/H2 headings
UI/Body: "Inter", sans-serif - Body/UI text
Monospace: "JetBrains Mono" - Badges/code

Spacing

Section Padding: py-28 to py-44 (generous whitespace)
Container Width: max-w-6xl (72rem)
Hero Area Ratio: 1.1fr / 0.9fr (subtle imbalance momentum)

Shadows

shadow-sm: 0 1px 3px rgba(0,0,0,0.06)
shadow-md: 0 4px 6px rgba(0,0,0,0.07)
shadow-xl: 0 20px 25px rgba(0,0,0,0.1)
shadow-accent: 0 4px 14px rgba(0,82,255,0.25)

Component Specifications

Button

Primary: Gradient background, border radius 12px
Hover: Deepened shadow + translate up 2px
Active: scale(0.98) mechanical press effect

Card

Pure white background + 1px border (Slate-200)
Hover: shadow md → xl, background gradient glow accent/0.03
Featured Card: 2px gradient border

Input

Height h-14, background muted/10
Focus: ring-2 ring-offset-2 accent highlight

Engineering Goals

A11y First: WCAG 2.1 AA standard, perfect keyboard navigation
Visual Coherence: Strict adherence to design system
Full Device Adaptation: Ultra-wide screens to mobile
Motion Reduction: Respect prefers-reduced-motion

Technical Implementation

Tailwind Configuration: Inject fonts in theme.extend
Framer Motion: Motion engine, duration: 0.7, ease: [0.16, 1, 0.3, 1]
CSS Variables: Export all color tokens as CSS Variables
Icons: Lucide-react, stroke width 1.5px or 2px

For detailed design philosophy, responsive strategies, and motion specifications, please refer to references/design-spec.md