feat: Add complete Agentic Compaction & Pipeline System
- Context Compaction System with token counting and summarization - Deterministic State Machine for flow control (no LLM decisions) - Parallel Execution Engine (up to 12 concurrent sessions) - Event-Driven Coordination via Event Bus - Agent Workspace Isolation (tools, memory, identity, files) - YAML Workflow Integration (OpenClaw/Lobster compatible) - Claude Code integration layer - Complete demo UI with real-time visualization - Comprehensive documentation and README Components: - agent-system/: Context management, token counting, subagent spawning - pipeline-system/: State machine, parallel executor, event bus, workflows - skills/: AI capabilities (LLM, ASR, TTS, VLM, image generation, etc.) - src/app/: Next.js demo application Total: ~100KB of production-ready TypeScript code
This commit is contained in:
Z User
263
skills/frontend-design/templates/tailwind.config.js
Executable file
263
skills/frontend-design/templates/tailwind.config.js
Executable file
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* Tailwind CSS Configuration
|
||||
*
|
||||
* This configuration integrates the design token system with Tailwind CSS.
|
||||
* It provides custom colors, spacing, typography, and more.
|
||||
*
|
||||
* Location: {project_path}/skills/frontend-design/templates/tailwind.config.js
|
||||
*
|
||||
* Installation:
|
||||
* 1. npm install -D tailwindcss postcss autoprefixer
|
||||
* 2. Copy this file to your project root as tailwind.config.js
|
||||
* 3. Update content paths to match your project structure
|
||||
* 4. Import globals.css in your main entry file
|
||||
*/
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// Specify which files Tailwind should scan for class names
|
||||
content: [
|
||||
'./src/**/*.{js,jsx,ts,tsx}',
|
||||
'./pages/**/*.{js,jsx,ts,tsx}',
|
||||
'./components/**/*.{js,jsx,ts,tsx}',
|
||||
'./app/**/*.{js,jsx,ts,tsx}',
|
||||
],
|
||||
|
||||
// Enable dark mode via class strategy
|
||||
darkMode: ['class'],
|
||||
|
||||
theme: {
|
||||
// Extend default theme (preserves Tailwind defaults)
|
||||
extend: {
|
||||
// Custom colors using CSS variables for theme support
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
|
||||
// Border radius scale
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
|
||||
// Custom font families
|
||||
fontFamily: {
|
||||
sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
|
||||
serif: ['var(--font-serif)', 'Georgia', 'serif'],
|
||||
mono: ['var(--font-mono)', 'monospace'],
|
||||
},
|
||||
|
||||
// Typography scale using fluid sizing
|
||||
fontSize: {
|
||||
xs: ['clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)', { lineHeight: '1.4' }],
|
||||
sm: ['clamp(0.875rem, 0.8rem + 0.2vw, 1rem)', { lineHeight: '1.5' }],
|
||||
base: ['clamp(1rem, 0.95rem + 0.25vw, 1.125rem)', { lineHeight: '1.6' }],
|
||||
lg: ['clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)', { lineHeight: '1.5' }],
|
||||
xl: ['clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)', { lineHeight: '1.4' }],
|
||||
'2xl': ['clamp(1.5rem, 1.35rem + 0.6vw, 2rem)', { lineHeight: '1.3' }],
|
||||
'3xl': ['clamp(1.875rem, 1.65rem + 0.9vw, 2.5rem)', { lineHeight: '1.2' }],
|
||||
'4xl': ['clamp(2.25rem, 1.95rem + 1.2vw, 3.5rem)', { lineHeight: '1.1' }],
|
||||
'5xl': ['clamp(3rem, 2.5rem + 2vw, 4.5rem)', { lineHeight: '1' }],
|
||||
},
|
||||
|
||||
// Spacing scale (8px base system)
|
||||
spacing: {
|
||||
0.5: '0.125rem', // 2px
|
||||
1.5: '0.375rem', // 6px
|
||||
2.5: '0.625rem', // 10px
|
||||
3.5: '0.875rem', // 14px
|
||||
4.5: '1.125rem', // 18px
|
||||
5.5: '1.375rem', // 22px
|
||||
6.5: '1.625rem', // 26px
|
||||
7.5: '1.875rem', // 30px
|
||||
8.5: '2.125rem', // 34px
|
||||
9.5: '2.375rem', // 38px
|
||||
13: '3.25rem', // 52px
|
||||
15: '3.75rem', // 60px
|
||||
17: '4.25rem', // 68px
|
||||
18: '4.5rem', // 72px
|
||||
19: '4.75rem', // 76px
|
||||
21: '5.25rem', // 84px
|
||||
22: '5.5rem', // 88px
|
||||
23: '5.75rem', // 92px
|
||||
25: '6.25rem', // 100px
|
||||
},
|
||||
|
||||
// Custom shadows
|
||||
boxShadow: {
|
||||
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
||||
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
||||
},
|
||||
|
||||
// Animation durations
|
||||
transitionDuration: {
|
||||
DEFAULT: '220ms',
|
||||
fast: '150ms',
|
||||
slow: '300ms',
|
||||
},
|
||||
|
||||
// Keyframe animations
|
||||
keyframes: {
|
||||
// Fade in animation
|
||||
'fade-in': {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
// Fade out animation
|
||||
'fade-out': {
|
||||
'0%': { opacity: '1' },
|
||||
'100%': { opacity: '0' },
|
||||
},
|
||||
// Slide in from top
|
||||
'slide-in-top': {
|
||||
'0%': { transform: 'translateY(-100%)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
// Slide in from bottom
|
||||
'slide-in-bottom': {
|
||||
'0%': { transform: 'translateY(100%)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
// Slide in from left
|
||||
'slide-in-left': {
|
||||
'0%': { transform: 'translateX(-100%)' },
|
||||
'100%': { transform: 'translateX(0)' },
|
||||
},
|
||||
// Slide in from right
|
||||
'slide-in-right': {
|
||||
'0%': { transform: 'translateX(100%)' },
|
||||
'100%': { transform: 'translateX(0)' },
|
||||
},
|
||||
// Scale in
|
||||
'scale-in': {
|
||||
'0%': { transform: 'scale(0.95)', opacity: '0' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
// Spin animation
|
||||
spin: {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
// Shimmer animation (for skeletons)
|
||||
shimmer: {
|
||||
'0%': { backgroundPosition: '200% 0' },
|
||||
'100%': { backgroundPosition: '-200% 0' },
|
||||
},
|
||||
// Pulse animation
|
||||
pulse: {
|
||||
'0%, 100%': { opacity: '1' },
|
||||
'50%': { opacity: '0.5' },
|
||||
},
|
||||
// Bounce animation
|
||||
bounce: {
|
||||
'0%, 100%': { transform: 'translateY(-25%)', animationTimingFunction: 'cubic-bezier(0.8,0,1,1)' },
|
||||
'50%': { transform: 'translateY(0)', animationTimingFunction: 'cubic-bezier(0,0,0.2,1)' },
|
||||
},
|
||||
},
|
||||
|
||||
// Animation utilities
|
||||
animation: {
|
||||
'fade-in': 'fade-in 0.2s ease-out',
|
||||
'fade-out': 'fade-out 0.2s ease-out',
|
||||
'slide-in-top': 'slide-in-top 0.3s ease-out',
|
||||
'slide-in-bottom': 'slide-in-bottom 0.3s ease-out',
|
||||
'slide-in-left': 'slide-in-left 0.3s ease-out',
|
||||
'slide-in-right': 'slide-in-right 0.3s ease-out',
|
||||
'scale-in': 'scale-in 0.2s ease-out',
|
||||
spin: 'spin 0.6s linear infinite',
|
||||
shimmer: 'shimmer 1.5s ease-in-out infinite',
|
||||
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
bounce: 'bounce 1s infinite',
|
||||
},
|
||||
|
||||
// Custom z-index scale
|
||||
zIndex: {
|
||||
dropdown: '1000',
|
||||
sticky: '1100',
|
||||
fixed: '1200',
|
||||
'modal-backdrop': '1300',
|
||||
modal: '1400',
|
||||
popover: '1500',
|
||||
tooltip: '1600',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Plugins
|
||||
plugins: [
|
||||
// Typography plugin for prose styling
|
||||
require('@tailwindcss/typography'),
|
||||
|
||||
// Forms plugin for better form styling
|
||||
require('@tailwindcss/forms'),
|
||||
|
||||
// Custom plugin for component utilities
|
||||
function ({ addComponents, theme }) {
|
||||
addComponents({
|
||||
// Container utility
|
||||
'.container': {
|
||||
width: '100%',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
paddingLeft: theme('spacing.4'),
|
||||
paddingRight: theme('spacing.4'),
|
||||
'@screen sm': {
|
||||
maxWidth: '640px',
|
||||
},
|
||||
'@screen md': {
|
||||
maxWidth: '768px',
|
||||
},
|
||||
'@screen lg': {
|
||||
maxWidth: '1024px',
|
||||
paddingLeft: theme('spacing.6'),
|
||||
paddingRight: theme('spacing.6'),
|
||||
},
|
||||
'@screen xl': {
|
||||
maxWidth: '1280px',
|
||||
},
|
||||
'@screen 2xl': {
|
||||
maxWidth: '1536px',
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user