Add custom Claude Code upgrades and restore all skills

Added 16 custom skills: - ralph (RalphLoop autonomous agent) - brainstorming (with Ralph integration) - dispatching-parallel-agents - autonomous-loop - multi-ai-brainstorm - cognitive-context, cognitive-core, cognitive-planner, cognitive-safety - tool-discovery-agent - ui-ux-pro-max (full design system) - wordpress-ai - agent-pipeline-builder - dev-browser - planning-with-files - playwright-skill Also organized remaining skills that were at root level into skills/ folder. Total: 272 skills from skills.sh + 16 custom upgrades Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-23 18:10:15 +00:00
parent b723e2bd7d
commit 7b42ebd2b0
100 changed files with 30094 additions and 0 deletions
--- a/skills/ui-ux-pro-max/zai-promo-implementation-guide.md
+++ b/skills/ui-ux-pro-max/zai-promo-implementation-guide.md
@@ -0,0 +1,211 @@
+# Z.AI Promo Section - Implementation Guide
+
+## Overview
+
+This redesigned promo section features a premium, eye-catching token/coin-style button that serves as the visual centerpiece. The design follows glassmorphism principles with smooth animations, professional gradients, and conversion-optimized layout.
+
+## Key Features
+
+### 1. Premium Token Button
+- **Coin/Token Design**: Circular, layered design with multiple rings
+- **Shimmer Effect**: Animated light reflection across the token surface
+- **Floating Animation**: Subtle vertical movement to attract attention
+- **Hover Effects**: Scale and shadow transitions for interactivity
+- **Discount Badge**: Prominent "10% OFF" badge on the token
+- **Glow Background**: Radial gradient glow behind the token
+
+### 2. Visual Enhancements
+- **Glass Card Container**: Frosted glass effect with backdrop blur
+- **Gradient Text**: Brand name and CTA with gradient fills
+- **Animated Badge**: "Limited Time Offer" badge with pulse animation
+- **Floating Particles**: Decorative particles around the token
+- **Trust Indicators**: Security and support badges
+
+### 3. Conversion Elements
+- **Clear Value Proposition**: "Unlock GLM 4.7" headline
+- **Feature Highlights**: Fast API, 40% Off, Global Coverage
+- **Secondary CTA**: GLM Suite integration link
+- **Social Proof**: Trust badges at the bottom
+- **Strong Color Contrast**: Meets WCAG AA accessibility standards
+
+## Installation
+
+### Option 1: WordPress Custom HTML Block
+
+1. **Edit the Post** (ID 112)
+2. **Find the existing promo section** between PRICING COMPARISON and FINAL CTA
+3. **Delete the existing section**
+4. **Add a Custom HTML block**
+5. **Paste the entire content** from `zai-promo-section.html`
+
+### Option 2: Theme Template File
+
+If you're using a custom theme or page template:
+
+1. **Locate the template file** for single posts (usually `single.php` or `template-parts/content.php`)
+2. **Find the promo section location**
+3. **Replace the existing section** with the new HTML/CSS
+4. **Save the file**
+
+### Option 3: Page Builder (Elementor, Divi, etc.)
+
+1. **Add a Custom HTML element** to your page builder
+2. **Paste the HTML/CSS code**
+3. **Position it** between pricing and final CTA sections
+
+## Customization Options
+
+### Colors
+
+The section uses CSS variables for easy customization:
+
+```css
+:root {
+    --zai-primary: #6366f1;        /* Main brand color */
+    --zai-primary-dark: #4f46e5;   /* Darker shade */
+    --zai-secondary: #8b5cf6;      /* Secondary accent */
+    --zai-accent: #10b981;         /* Success/accent color */
+    --zai-gold: #f59e0b;           /* Gold for offers */
+    --zai-gold-light: #fbbf24;     /* Light gold */
+}
+```
+
+To customize colors, simply change these variable values in the `<style>` section.
+
+### Sizing
+
+Adjust token size by modifying:
+
+```css
+.zai-token {
+    width: 200px;   /* Default size */
+    height: 200px;
+}
+```
+
+For smaller tokens, reduce both values proportionally (e.g., 160px, 140px).
+
+### Animations
+
+All animations can be disabled for users who prefer reduced motion:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+    /* Animations are automatically disabled */
+}
+```
+
+To customize animation speed, adjust the duration values:
+
+```css
+.zai-token {
+    animation: zai-token-float 4s ease-in-out infinite;  /* Change 4s */
+}
+```
+
+### Links
+
+Update the affiliate and integration links:
+
+```html
+<!-- Token Button Link -->
+<a href="https://z.ai/subscribe?ic=R0K78RJKNW" class="zai-token-button">
+
+<!-- Secondary CTA Link -->
+<a href="https://github.rommark.dev/admin/claude-code-glm-suite" class="zai-secondary-cta">
+```
+
+## Responsive Behavior
+
+The section is fully responsive with breakpoints at:
+
+- **Desktop (>968px)**: Two-column layout with token on the right
+- **Tablet (768px-968px)**: Stacked layout with reduced spacing
+- **Mobile (480px-768px)**: Single column, smaller token (160px)
+- **Small Mobile (<480px)**: Compact layout with minimal token (140px)
+
+## Accessibility Features
+
+- **Color Contrast**: All text meets WCAG AA (4.5:1 minimum)
+- **Focus States**: Visible focus rings on keyboard navigation
+- **Reduced Motion**: Respects `prefers-reduced-motion` preference
+- **Semantic HTML**: Proper heading hierarchy and link structure
+- **Screen Reader Friendly**: Descriptive text for all interactive elements
+
+## Performance Considerations
+
+- **CSS-Only Animations**: No JavaScript required
+- **Hardware Acceleration**: Uses `transform` and `opacity` for smooth 60fps animations
+- **Optimized Animations**: Subtle effects that don't impact page load
+- **No External Dependencies**: All styles inline, no additional HTTP requests
+
+## Browser Compatibility
+
+Tested and working on:
+- Chrome 90+ (Desktop & Mobile)
+- Firefox 88+ (Desktop & Mobile)
+- Safari 14+ (Desktop & Mobile)
+- Edge 90+ (Chromium)
+
+**Note**: Backdrop-filter requires modern browsers. Falls back gracefully on older browsers.
+
+## Troubleshooting
+
+### Issue: Token appears distorted
+**Solution**: Ensure the container has sufficient width. The token needs at least 220px width on mobile.
+
+### Issue: Animations not smooth
+**Solution**: Check if other CSS on the page is conflicting. Use browser DevTools to identify conflicting animations.
+
+### Issue: Links not working
+**Solution**: Verify that your theme doesn't have JavaScript intercepting link clicks. Check browser console for errors.
+
+### Issue: Colors don't match theme
+**Solution**: Update the CSS variables at the top of the style section to match your brand colors.
+
+## A/B Testing Suggestions
+
+Consider testing these variations:
+
+1. **Token Size**: Test 160px vs 200px vs 240px tokens
+2. **Badge Text**: "10% OFF" vs "SAVE 10%" vs "DISCOUNT"
+3. **CTA Text**: "Get Started" vs "Unlock Now" vs "Claim Offer"
+4. **Color Scheme**: Blue/Purple (default) vs Green/Teal vs Orange/Red
+5. **Layout**: Token left vs Token right (currently right)
+
+## Metrics to Track
+
+After implementation, monitor:
+
+- **Click-Through Rate (CTR)**: On the token button
+- **Conversion Rate**: From clicks to signups
+- **Bounce Rate**: Does the section engage users?
+- **Time on Page**: Does the section capture attention?
+- **Scroll Depth**: Do users reach this section?
+
+## File Locations
+
+- **HTML/CSS File**: `/home/uroma/.claude/skills/ui-ux-pro-max/zai-promo-section.html`
+- **This Guide**: `/home/uroma/.claude/skills/ui-ux-pro-max/zai-promo-implementation-guide.md`
+
+## Support
+
+For issues or questions:
+1. Check browser console for errors
+2. Verify CSS specificity isn't being overridden
+3. Test in incognito/private mode to rule out caching
+4. Validate HTML structure using W3C validator
+
+## Credits
+
+Designed using UI/UX Pro Max principles:
+- Glassmorphism design style
+- WCAG AA accessibility compliance
+- Mobile-first responsive approach
+- Conversion-optimized layout
+- Premium visual aesthetics
+
+---
+
+**Last Updated**: 2025-01-18
+**Version**: 1.0