@symbo.ls/mcp 1.0.0

package/symbols_mcp/skills/DESIGN_TREND.md

@@ -0,0 +1,50 @@
+The Design Trend Synthesizer
+
+You are a Design Researcher at frog design, analyzing trends for Fortune 500 clients.
+
+Research and synthesize current design trends for [INDUSTRY/SECTOR] in 2026.
+
+Deliverables:
+
+1. MACRO TREND ANALYSIS (5 trends)
+   For each trend:
+   - Trend name and definition
+   - Visual characteristics (colors, shapes, typography, imagery)
+   - Origin (where it started, early adopters)
+   - Current adoption phase (emerging/growing/mature)
+   - Examples (3 brands using it well)
+   - Strategic implications (opportunities and risks)
+
+   Trend areas to cover:
+   • Visual aesthetics (e.g., neomorphism, brutalism, liquid glass)
+   • Interaction patterns (e.g., gesture-based, voice-first, AI-assisted)
+   • Color trends (e.g., dopamine colors, muted minimalism)
+   • Typography trends (e.g., variable fonts, kinetic type)
+   • Technology influence (e.g., spatial design, generative UI)
+
+2. COMPETITIVE LANDSCAPE MAPPING
+   • Map 10 competitors on a 2×2 matrix (Innovative ←→ Conservative × Minimal ←→ Rich)
+   • Identify white space opportunities
+   • Flag overused patterns to avoid
+
+3. USER EXPECTATION SHIFTS
+   • How user behaviors have changed (post-AI, post-pandemic, Gen Z influence)
+   • New mental models to design for
+   • Friction points users no longer tolerate
+
+4. PLATFORM-SPECIFIC EVOLUTION
+   • iOS 26/visionOS design language updates
+   • Material You evolution
+   • Web design pattern shifts
+
+5. STRATEGIC RECOMMENDATIONS
+   • Which trends to adopt (and how to adapt them for our brand)
+   • Which trends to ignore (and why)
+   • 6-month trend roadmap (what to implement when)
+
+6. MOOD BOARD SPECIFICATIONS
+   • 20 visual references described in detail (colors, composition, mood)
+   • Color palette extraction
+   • Typography recommendations based on trend analysis
+
+Include citations to real brands, products, and design systems. Be specific, not generic.

package/symbols_mcp/skills/DOMQL_v2-v3_MIGRATION.md

@@ -0,0 +1,236 @@
+# DOMQL v2 → v3 Migration Guide
+
+This guide covers the key changes when migrating from DOMQL v2 to v3. The main updates focus on flattening object structures, renaming properties, and simplifying the API while maintaining backwards compatibility for most use cases.
+
+---
+
+## Inheritance changes
+
+### Flatten `props` and `on`
+
+**Before:**
+
+```js
+{
+  props: {
+    position: 'absolute',
+  },
+  on: {
+    frame: (e, t) => {},
+    render: e => {},
+    wheel: (e, t) => {},
+    dblclick: (e, t) => {},
+  },
+}
+```
+
+**After:**
+
+```js
+{
+  position: 'absolute',
+  onFrame: (e, t) => {},
+  onRender: e => {},
+  onWheel: (e, t) => {},
+  onDblclick: e => {},
+}
+```
+
+**Rules:**
+
+- Move all `props` entries one level up into the component object
+- Applies to root and nested elements
+- Remove the `on` wrapper
+- Prefix each event with `on` + `CapitalizedEventName`
+
+---
+
+### Merging `props` inside nested elements
+
+**Before:**
+
+```js
+Box: {
+  props: {
+    '--section-background': '#7a5e0e55',
+    id: 'editorjs'
+  }
+}
+```
+
+**After:**
+
+```js
+Box: {
+  '--section-background': '#7a5e0e55',
+  id: 'editorjs'
+}
+```
+
+- Remove the `props` wrapper and move contents up
+
+---
+
+### All nested objects within `props` stay inline
+
+**Before:**
+
+```js
+props: {
+  style: {
+    height: "100%";
+  }
+}
+```
+
+**After:**
+
+```js
+style: {
+  height: "100%";
+}
+```
+
+---
+
+## Naming changes
+
+### Rename `extend` → `extends`
+
+### Rename `childExtend` → `childExtends`
+
+**Before:**
+
+```js
+extend: SomeComponent,
+childExtend: AnotherComponent
+```
+
+**After:**
+
+```js
+extends: SomeComponent,
+childExtends: AnotherComponent
+```
+
+- Property rename only
+- No behavioral changes
+
+---
+
+## Functional changes
+
+Child elements are created **only if**:
+
+- `children` array is present, **or**
+- Child component keys start with `CapitalCase`
+
+Event logic and all other JavaScript behavior remain unchanged.
+
+### Element creation rules
+
+**Before (v2):**
+
+```js
+{
+  div: {}, // creates <div>
+  Div: {}, // creates <Div>
+}
+```
+
+**After (v3):**
+
+```js
+{
+  div: {}, // treated as a plain property, no rendering
+  Div: {}, // only way to create keyed children
+}
+```
+
+- `Div` is equivalent to:
+
+```js
+Div: { extends: 'Div' }
+```
+
+- Rendering behavior:
+  - React → `<Div />`
+  - HTML → `<div />`
+
+---
+
+## Summary
+
+DOMQL v3 removes DOMQL-specific wrappers and relies on flat, explicit object structures:
+
+- Removed: `props`, `on`
+- Events are flattened and prefixed with `onX`
+- `extend` → `extends`
+- `childExtend` → `childExtends`
+- Only `CapitalCase` keys create child elements
+
+---
+
+## More examples
+
+### From (v2)
+
+```js
+{
+  extend: 'Flex',
+  childExtend: 'ListItem',
+  props: {
+    position: 'absolute',
+  },
+  attr: {
+    'gs-w': 1,
+    'gs-h': 1,
+  },
+  SectionTitle: {
+    text: 'Notes',
+  },
+  Box: {
+    props: {
+      '--section-background': '#7a5e0e55',
+      id: 'editorjs',
+      '& a': {
+        color: 'blue',
+      },
+    },
+    on: {
+      frame: (e, t) => {},
+      render: e => {},
+      wheel: (e, t) => {},
+      dblclick: (e, t) => { e.stopPropagation() },
+    },
+  },
+}
+```
+
+### To (v3)
+
+```js
+{
+  extends: 'Flex',
+  childExtends: 'ListItem',
+  position: 'absolute',
+  attr: {
+    'gs-w': 1,
+    'gs-h': 1,
+  },
+  SectionTitle: {
+    text: 'Notes',
+  },
+  Box: {
+    '--section-background': '#7a5e0e55',
+    id: 'editorjs',
+    '& a': {
+      color: 'blue',
+    },
+    onFrame: (e, t) => {},
+    onRender: e => {},
+    onWheel: (e, t) => {},
+    onDblclick: e => { e.stopPropagation() },
+  },
+}
+```

package/symbols_mcp/skills/FIGMA_MATCHING.md

@@ -0,0 +1,63 @@
+The Figma Auto-Layout Expert
+
+You are a Design Ops Specialist at Figma, training enterprise teams on auto-layout and component best practices.
+
+Convert this design description into Figma-ready technical specifications:
+
+[DESIGN DESCRIPTION OR WIREFRAME DESCRIPTION]
+
+Deliver Figma-specific implementation guide:
+
+1. FRAME STRUCTURE
+   • Page organization (frames, layers, naming conventions)
+   • Grid system setup (layout grids, constraints)
+   • Responsive behavior (constraints and scaling rules)
+
+2. AUTO-LAYOUT SPECIFICATIONS
+   For every component, provide:
+   - Direction (vertical/horizontal)
+   - Padding values (top, right, bottom, left)
+   - Spacing between items
+   - Distribution (packed/space-between)
+   - Alignment settings
+   - Resizing constraints (hug contents/fill container)
+
+3. COMPONENT ARCHITECTURE
+   • Master component structure
+   • Variant properties (boolean, instance swap, text)
+   • Variant combinations matrix
+   • Component properties (text, boolean, instance swap, variant)
+
+   Example format:
+   Component: Button
+   - Variants: Primary, Secondary, Tertiary, Destructive × Default, Hover, Active, Disabled, Loading
+   - Properties:
+     - Label (text)
+     - Icon left (boolean + instance swap)
+     - Icon right (boolean + instance swap)
+     - Size (variant: Small, Medium, Large)
+
+4. DESIGN TOKEN INTEGRATION
+   • Color styles (solid, gradient) with exact hex values
+   • Text styles (font family, weight, size, line height, letter spacing)
+   • Effect styles (shadows, blurs)
+   • Grid styles
+
+5. PROTOTYPE CONNECTIONS
+   • Interaction map (user flows between screens)
+   • Trigger types (on click, hover, drag, etc.)
+   • Animation specs (smart animate, dissolve, move, easing curves)
+   • Delay and duration values
+
+6. DEVELOPER HANDOFF PREPARATION
+   • Inspect panel organization
+   • CSS properties for key elements
+   • Export settings (1x, 2x, 3x, SVG, PDF)
+   • Asset naming conventions
+
+7. ACCESSIBILITY ANNOTATIONS
+   • Focus on order indicators
+   • ARIA labels for components
+   • Color contrast notes
+
+Format as a technical specification document that a junior designer could follow to build this in Figma perfectly.

package/symbols_mcp/skills/GARY_TAN.md

@@ -0,0 +1,80 @@
+# Claude Code Prompt for Plan Mode
+
+_February 4, 2026_
+
+#prompts
+
+Review this plan thoroughly before making any code changes. For every issue or recommendation, explain the concrete tradeoffs, give me an opinionated recommendation, and ask for my input before assuming a direction.
+
+My engineering preferences (use these to guide your recommendations):
+
+- DRY is important—flag repetition aggressively.
+- Well-tested code is non-negotiable; I'd rather have too many tests than too few.
+- I want code that's "engineered enough" — not under-engineered (fragile, hacky) and not over-engineered (premature abstraction, unnecessary complexity).
+- I err on the side of handling more edge cases, not fewer; thoughtfulness > speed.
+- Bias toward explicit over clever.
+
+## 1. Architecture review
+
+Evaluate:
+
+- Overall system design and component boundaries.
+- Dependency graph and coupling concerns.
+- Data flow patterns and potential bottlenecks.
+- Scaling characteristics and single points of failure.
+- Security architecture (auth, data access, API boundaries).
+
+## 2. Code quality review
+
+Evaluate:
+
+- Code organization and module structure.
+- DRY violations—be aggressive here.
+- Error handling patterns and missing edge cases (call these out explicitly).
+- Technical debt hotspots.
+- Areas that are over-engineered or under-engineered relative to my preferences.
+
+## 3. Test review
+
+Evaluate:
+
+- Test coverage gaps (unit, integration, e2e).
+- Test quality and assertion strength.
+- Missing edge case coverage—be thorough.
+- Untested failure modes and error paths.
+
+## 4. Performance review
+
+Evaluate:
+
+- N+1 queries and database access patterns.
+- Memory-usage concerns.
+- Caching opportunities.
+- Slow or high-complexity code paths.
+
+## For each issue you find
+
+For every specific issue (bug, smell, design concern, or risk):
+
+- Describe the problem concretely, with file and line references.
+- Present 2-3 options, including "do nothing" where that's reasonable.
+- For each option, specify: implementation effort, risk, impact on other code, and maintenance burden.
+- Give me your recommended option and why, mapped to my preferences above.
+- Then explicitly ask whether I agree or want to choose a different direction before proceeding.
+
+## Workflow and interaction
+
+- Do not assume my priorities on timeline or scale.
+- After each section, pause and ask for my feedback before moving on.
+
+---
+
+BEFORE YOU START:
+
+Ask if I want one of two options:
+
+1/ BIG CHANGE: Work through this interactively, one section at a time (Architecture → Code Quality → Tests → Performance) with at most 4 top issues in each section.
+
+2/ SMALL CHANGE: Work through interactively ONE question per review section
+
+FOR EACH STAGE OF REVIEW: output the explanation and pros and cons of each stage's questions AND your opinionated recommendation and why, and then use AskUserQuestion. Also NUMBER issues and then give LETTERS for options and when using AskUserQuestion make sure each option clearly labels the issue NUMBER and option LETTER so the user doesn't get confused. Make the recommended option always the 1st option.

package/symbols_mcp/skills/MARKETING_ASSETS.md

@@ -0,0 +1,66 @@
+The Marketing Asset Factory
+
+You are a Creative Director at a top-tier marketing agency working on a campaign for [PRODUCT/SERVICE].
+
+Campaign objective: [AWARENESS/CONVERSION/RETENTION]
+Target audience: [DEMOGRAPHICS + PSYCHOGRAPHICS]
+Campaign theme: [CORE MESSAGE/HOOK]
+Tone: [PROFESSIONAL/PLAYFUL/URGENT/LUXURY/MINIMAL]
+
+Generate a complete marketing asset library:
+
+1. DIGITAL ADVERTISING (15 assets)
+   • Google Ads:
+   - 5 headlines (30 characters max)
+   - 5 descriptions (90 characters max)
+   - Display ad concepts (300x250, 728x90, 160x600) with visual descriptions
+
+   • Facebook/Instagram Ads:
+   - 3 feed ad concepts (visual + copy)
+   - 3 story ad concepts (9:16 format)
+   - 3 reel/TikTok script concepts (15-30 seconds)
+
+2. EMAIL MARKETING (8 assets)
+   • Subject lines (10 options, A/B test variations)
+   • Preview text (10 options)
+   • Full email templates:
+   - Welcome series (3 emails)
+   - Promotional email (1)
+   - Nurture sequence (3 emails)
+   - Re-engagement (1)
+
+3. LANDING PAGE COPY (5 assets)
+   • Hero section (headline, subheadline, CTA)
+   • Feature sections (3 variations)
+   • Social proof section (testimonial framework)
+   • FAQ section (8 questions + answers)
+   • Pricing page (if applicable)
+
+4. SOCIAL MEDIA CONTENT (12 assets)
+   • LinkedIn posts (4)
+   • Twitter/X threads (2)
+   • Instagram captions (3)
+   • TikTok/Short-form scripts (3)
+
+5. SALES ENABLEMENT (7 assets)
+   • One-pager content structure
+   • Sales deck outline (10 slides)
+   • Case study template
+   • Battlecard (competitor comparison)
+   • Product demo script
+   • Objection handling guide (10 common objections)
+   • Proposal template
+
+6. CONTENT MARKETING (5 assets)
+   • Blog post outlines (3)
+   • Whitepaper structure
+   • Webinar script outline
+
+For each asset provide:
+
+- The exact copy/content
+- Visual direction (colors, imagery, composition)
+- CTA and next step
+- A/B testing recommendations
+
+Maintain brand consistency across all 47+ assets with unified messaging hierarchy.