Style Presets Reference
Description
Curated visual styles for Frontend Slides. Each preset is inspired by real design references — no generic "AI slop" aesthetics. **Abstract shapes only — no illustrations.** **Viewport CSS:** For manda
Installation
claude install-skill https://github.com/zarazhangrui/frontend-slides README
Style Presets Reference
Curated visual styles for Frontend Slides. Each preset is inspired by real design references — no generic "AI slop" aesthetics. **Abstract shapes only — no illustrations.**
**Viewport CSS:** For mandatory base styles, see [viewport-base.css](viewport-base.css). Include in every presentation.
Dark Themes
1. Bold Signal
**Vibe:** Confident, bold, modern, high-impact
**Layout:** Colored card on dark gradient. Number top-left, navigation top-right, title bottom-left.
**Typography:**
- undefined
**Colors:**
:root {
--bg-primary: #1a1a1a;
--bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
--card-bg: #FF5722;
--text-primary: #ffffff;
--text-on-card: #1a1a1a;
}
**Signature Elements:**
- undefined
2. Electric Studio
**Vibe:** Bold, clean, professional, high contrast
**Layout:** Split panel—white top, blue bottom. Brand marks in corners.
**Typography:**
- undefined
**Colors:**
:root {
--bg-dark: #0a0a0a;
--bg-white: #ffffff;
--accent-blue: #4361ee;
--text-dark: #0a0a0a;
--text-light: #ffffff;
}
**Signature Elements:**
- undefined
3. Creative Voltage
**Vibe:** Bold, creative, energetic, retro-modern
**Layout:** Split panels—electric blue left, dark right. Script accents.
**Typography:**
- undefined
**Colors:**
:root {
--bg-primary: #0066ff;
--bg-dark: #1a1a2e;
--accent-neon: #d4ff00;
--text-light: #ffffff;
}
**Signature Elements:**
- undefined
4. Dark Botanical
**Vibe:** Elegant, sophisticated, artistic, premium
**Layout:** Centered content on dark. Abstract soft shapes in corner.
**Typography:**
- undefined
**Colors:**
:root {
--bg-primary: #0f0f0f;
--text-primary: #e8e4df;
--text-secondary: #9a9590;
--accent-warm: #d4a574;
--accent-pink: #e8b4b8;
--accent-gold: #c9b896;
}
**Signature Elements:**
- undefined
Light Themes
5. Notebook Tabs
**Vibe:** Editorial, organized, elegant, tactile
**Layout:** Cream paper card on dark background. Colorful tabs on right edge.
**Typography:**
Related Skills
Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
AI community mem0
| Universal memory layer for AI Agents | 51341 | 221 | 1 |
AI community Notebooklm Integration
Chat directly with NotebookLM for source-grounded answers based exclusively on uploaded documents
AI community UI UX Pro Max Skill
(16.9k ⭐): An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms.
AI community BMAD-METHOD
| Breakthrough Method for Agile Ai Driven Development | 42712 | 382 | 2 |
AI community Claude Cookbook
Official notebooks and recipes for common patterns (RAG, tool use, Skills, MCP).
AI community