mph-synthwave-theme
starsforks
How to install mph-synthwave-theme?
mphinance/alpha-skills/mph-synthwave-theme
$npx -y skills add mphinance/alpha-skills --skill mph-synthwave-themeGenerates UI components, dashboards, and pages using Michael's signature Synthwave / TraderDaddy / Bloomberg aesthetic.
SKILL.md
| 1 | # mph-synthwave-theme |
| 2 | |
| 3 | A core styling skill for generating web interfaces, dashboards, and UI components that perfectly match the "Momentum Phinance" (TraderDaddy) brand aesthetic. |
| 4 | |
| 5 | ## When to use this skill |
| 6 | Use this skill when the user asks to build or style a UI, dashboard, widget, or web app, OR whenever the user mentions "my style", "my theme", "synthwave", "traderdaddy", "bloomberg terminal", or "neon". |
| 7 | |
| 8 | ## The Aesthetic |
| 9 | The visual language is a fusion of a high-performance **Bloomberg Terminal** and a sleek **Cyberpunk/Synthwave** design. It relies on extremely dark backgrounds to reduce eye strain for traders, punctuated by intense, high-contrast neon accents to draw attention to critical data. |
| 10 | |
| 11 | ### 1. Typography |
| 12 | - **Primary Data / Numbers:** `JetBrains Mono` or `Fira Code`. Use monospace fonts for all tables, ticker symbols, prices, and metrics so columns align perfectly. |
| 13 | - **UI / Body Text:** `Inter`, `Roboto`, or `Outfit`. Clean, legible sans-serif for general text. |
| 14 | - *Never use browser default fonts.* |
| 15 | |
| 16 | ### 2. Color Palette |
| 17 | - **Background:** Very dark, slightly cool grays/blacks. |
| 18 | - Main Body: `#0a0a0c` |
| 19 | - Panels/Cards: `#121216` or `rgba(20, 20, 25, 0.7)` (Glassmorphism) |
| 20 | - **Primary Accents (Neon):** |
| 21 | - **Neon Cyan:** `#00f0ff` (Used for primary borders, active states, key branding) |
| 22 | - **Neon Pink:** `#ff003c` (Used for alerts, short positions, destructive actions) |
| 23 | - **Neon Green:** `#00ff88` (Used for long positions, positive PnL, "EXECUTE" actions) |
| 24 | - **Electric Purple:** `#b026ff` (Secondary accent) |
| 25 | - **Text:** |
| 26 | - Primary: `#ffffff` or `#eaeaea` |
| 27 | - Secondary/Muted: `#888899` |
| 28 | |
| 29 | ### 3. Glassmorphism & Depth |
| 30 | - Do not use flat, solid boxes for dashboard cards. |
| 31 | - Use semi-transparent backgrounds with a subtle backdrop filter. |
| 32 | ```css |
| 33 | background: rgba(20, 20, 25, 0.6); |
| 34 | backdrop-filter: blur(10px); |
| 35 | -webkit-backdrop-filter: blur(10px); |
| 36 | border: 1px solid rgba(255, 255, 255, 0.05); |
| 37 | box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); |
| 38 | ``` |
| 39 | |
| 40 | ### 4. Micro-animations & Glows (The "Pop") |
| 41 | - Interactive elements (buttons, active rows, hovered cards) must feature a distinct neon glow. |
| 42 | - **Buttons:** Give buttons a faint background tint of their neon color (e.g., `rgba(0, 255, 136, 0.1)`), a solid neon border, and on hover, intensify the background and add a `box-shadow` glow. |
| 43 | ```css |
| 44 | .btn-execute { |
| 45 | background: rgba(0, 255, 136, 0.1); |
| 46 | border: 1px solid #00ff88; |
| 47 | color: #00ff88; |
| 48 | box-shadow: 0 0 8px rgba(0, 255, 136, 0.2); |
| 49 | transition: all 0.2s ease; |
| 50 | } |
| 51 | .btn-execute:hover { |
| 52 | background: rgba(0, 255, 136, 0.2); |
| 53 | box-shadow: 0 0 15px rgba(0, 255, 136, 0.5); |
| 54 | } |
| 55 | ``` |
| 56 | |
| 57 | ### 5. Layout Rules |
| 58 | - **Density:** High density, terminal-style. Minimize whitespace where data needs to be compared, but keep it readable. |
| 59 | - **Grids/Borders:** Use subtle, thin lines (`1px solid rgba(255,255,255,0.1)`) to separate sections. |
| 60 | - **Corners:** Slight rounding (`border-radius: 4px` to `8px`), not fully pill-shaped. |
| 61 | |
| 62 | ## Implementation Workflow |
| 63 | 1. If the user asks for a UI in "their style", automatically inject the CSS rules above. |
| 64 | 2. Ensure `<link>` tags for `Inter` and `JetBrains Mono` are included via Google Fonts. |
| 65 | 3. Review the design against the aesthetic rules: Does it look like a premium, modern, synthwave trading terminal? If not, increase the contrast and add more glassmorphism/glow. |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
