opencode-skills-collection 3.1.7 → 3.1.9

package/bundled-skills/web-project-brainstorming/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: web-project-brainstorming
+description: Masterclass framework for brainstorming web development projects and page designs. Outlines structural phases for concept, UX flow, styling aesthetics, technical architecture, and SEO.
+category: consulting
+risk: safe
+source: self
+source_type: self
+date_added: "2026-06-26"
+author: Rsmiyani
+tags: [brainstorming, project-planning, web-development, product-scoping, design-system, architecture]
+tools: [claude, cursor, gemini]
+---
+
+# Web Project Brainstorming
+
+## Overview
+
+This skill provides a structured, masterclass-level framework for brainstorming web projects, web applications, or individual page designs at their inception. It guides developers and designers through scoping the core product concept, mapping user flows, defining visual styling aesthetics, selecting the technical stack, and planning for search engine optimization (SEO) and performance.
+
+## When to Use This Skill
+
+- Use at the start of any new web development project or page redesign.
+- Use when scoping feature sets, user roles, and interaction patterns for web applications.
+- Use when establishing design systems, color tokens, and layout guidelines.
+- Use when evaluating tech stacks (e.g., Next.js vs. Vanilla JS, CSS Grid vs. Tailwind).
+
+## How It Works
+
+Execute web project brainstorming sequentially across six structured phases. Ask the user questions one phase at a time to maintain focus and ensure thorough alignment.
+
+### Phase 1: Core Concept & Scoping
+Define the product's primary value proposition and scope:
+- **Target Audience**: Who is using the website or application?
+- **Core Value**: What problem does it solve for users?
+- **Key Features**: What are the top 3–5 mandatory features?
+
+### Phase 2: User Experience (UX) & Information Architecture
+Map how users navigate and interact:
+- **Page Hierarchy**: What is the sitemap and page structure?
+- **User Journeys**: What step-by-step flows do users take to complete key goals?
+- **Responsive Layout**: Is the interface mobile-first, desktop-first, or balanced?
+
+### Phase 3: Visual Styling & Design System
+Establish the visual guidelines and aesthetic parameters:
+- **Design Aesthetic**: Modern, minimalist, brutalist, glassmorphism, or luxury?
+- **Color Palette**: What are the primary, secondary, and accent colors? (Prefer tailorable HSL/RGB models over static color keywords).
+- **Typography**: Which Google Fonts or system fonts fit the theme? (e.g., Inter, Outfit, Syne).
+- **Interactive States**: How do hovers, clicks, transitions, and loading states behave?
+
+### Phase 4: Technical Stack & Architecture
+Select the technologies and integration systems:
+- **Frontend Framework**: React, Next.js, Vite, Astro, Svelte, or Vanilla HTML/JS?
+- **Styling Method**: Vanilla CSS, Tailwind CSS, or CSS Modules?
+- **Data & Backend**: REST API, GraphQL, tRPC, Firebase, Supabase, or SQLite?
+- **State Management**: Zustand, Context API, Redux, or local React state?
+
+### Phase 5: SEO, Accessibility (A11y), and Performance
+Plan for discoverability and fast loading times:
+- **SEO Elements**: Title tag structure, meta descriptions, and semantic HTML tag hierarchy.
+- **Accessibility**: ARIA labels, semantic tags, keyboard navigation, and color contrast.
+- **Performance**: Preloading assets, lazy loading images, server-side rendering (SSR), and CDN delivery.
+
+### Phase 6: MVP Scope & Project Phases
+Break the work down into manageable increments:
+- **Phase 1 (MVP)**: The absolute minimum viable product needed to deploy.
+- **Phase 2 (Enhancements)**: Nice-to-have features, micro-animations, and advanced integrations.
+
+## Examples
+
+### Interactive Questionnaire Prompt Template
+Use this prompt layout when initiating a brainstorming session with a client or team member:
+
+```markdown
+👋 Let's brainstorm your new web project! We will walk through 6 quick phases.
+
+---
+### Phase 1: Core Concept & Scoping
+1. What is the main title or working name of this project?
+2. Who are the primary target users (e.g., tech-savvy professionals, shoppers, children)?
+3. What are the 3 core tasks a user must be able to perform?
+---
+```
+
+### Brainstorming Output Document Template
+Once all phases are complete, generate a markdown blueprint for the project using this template:
+
+```markdown
+# Project Blueprint: [Project Name]
+
+## 1. Product Concept
+- **Value Proposition**: [Summary]
+- **Key Features**:
+  1. [Feature 1]
+  2. [Feature 2]
+
+## 2. Information Architecture & UX
+- **Pages**: `/index.html`, `/dashboard.html`
+- **Primary User Flow**: User signs up -> completes onboarding -> views dashboard.
+
+## 3. Styling & Aesthetics
+- **Aesthetic**: Sleek Glassmorphism Dark Mode
+- **Color Tokens**:
+  - Background: `hsl(222, 47%, 11%)`
+  - Accent/Primary: `hsl(217, 91%, 60%)`
+- **Typography**: Inter (Body), Outfit (Headings)
+
+## 4. Technical Architecture
+- **Framework**: Next.js (App Router)
+- **Styling**: Tailwind CSS
+- **Database**: PostgreSQL with Prisma ORM
+
+## 5. SEO & Performance
+- **Primary Title**: "[Brand] | [Tagline]"
+- **Performance Strategy**: Dynamic image optimization, caching pages via Cloudflare.
+
+## 6. MVP vs Phase 2 Roadmap
+- **MVP**: Authentication + core dashboard view.
+- **Phase 2**: Real-time notifications and PDF reporting.
+```
+
+## Best Practices
+
+- ✅ Ask questions incrementally—never dump all six phases in a single response to avoid cognitive overload.
+- ✅ Propose logical defaults (e.g., recommending responsive Tailwind/CSS Grid and standard semantic HTML) if the user is unsure.
+- ✅ Ensure semantic HTML layout hierarchy (one `<h1>` per page, sequential `<section>`, `<article>`, `<header>`, `<footer>` elements) is planned from the start.
+- ✅ Document explicit non-goals to prevent feature creep.
+
+## Limitations
+
+- This skill focuses on conceptual mapping, architecture, and feature planning; it does not replace the writing of implementation code or system configuration.
+- Brainstorming outcomes should be treated as flexible blueprints and refined as technical constraints are discovered during development.
+
+## Security & Safety Notes
+
+- During Phase 4 (Architecture), flag any security requirements (e.g., SSL certificates, CORS policies, secure authentication storage, environment variables protection) early.
+- Do not store actual API tokens, passwords, or credentials in design or blueprint documents.
+
+## Common Pitfalls
+
+- **Problem**: Scope Creep (the project expands too quickly before building an MVP).
+  **Solution**: Enforce Phase 6 strictly. Push nice-to-have features into Phase 2.
+- **Problem**: Ignoring mobile design until late in development.
+  **Solution**: Brainstorm responsive patterns in Phase 2 before deciding on layout style in Phase 3.
+
+## Related Skills
+
+- `@writing-plans` - Organizing structural step-by-step engineering plans.
+- `@architecture-decision-records` - Documenting architectural decisions.
+- `@ux-flow` - Designing deep user experience flows and interaction details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-skills-collection",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "description": "OpenCode CLI plugin that automatically downloads and keeps skills up to date.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/skills_index.json

@@ -1107,6 +1107,28 @@
       ]
     }
   },
+  {
+    "id": "ai-loop",
+    "path": "skills/ai-loop",
+    "category": "workflow",
+    "name": "ai-loop",
+    "description": "Runs a bounded spec-build-review development loop with explicit scope, stop conditions, and human approval gates for risky or ambiguous work.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-06-27",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "ai-ml",
     "path": "skills/ai-ml",
@@ -2702,6 +2724,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "arrowspace",
+    "path": "skills/arrowspace",
+    "category": "data",
+    "name": "arrowspace",
+    "description": "Spectral vector search using graph Laplacian eigenstructure. Use when cosine/L2 similarity misses latent structure in your embeddings.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-06-25",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "article-illustrations",
     "path": "skills/article-illustrations",
@@ -10272,6 +10316,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "cron-doctor",
+    "path": "skills/cron-doctor",
+    "category": "devops",
+    "name": "cron-doctor",
+    "description": "Diagnose and validate cron expressions before they ship. Catches the five silent death-traps: impossible dates that never fire, OR-semantics that fire too often, midnight spikes, uneven step drift, and leap-year February 29.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-06-26",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "crossframe",
     "path": "skills/crossframe",
@@ -15648,6 +15714,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "gh-image",
+    "path": "skills/gh-image",
+    "category": "developer-tools",
+    "name": "gh-image",
+    "description": "Upload local images to GitHub and get canonical user-attachments embed URLs; use when asked to attach a screenshot to a PR, issue, or comment, or to embed before/after images in a README.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-06-25",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "gh-review-requests",
     "path": "skills/gh-review-requests",
@@ -15890,6 +15978,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "github-actions-debugger",
+    "path": "skills/github-actions-debugger",
+    "category": "devops",
+    "name": "github-actions-debugger",
+    "description": "Specialized skill for diagnosing, analyzing, and fixing failing GitHub Actions workflows by parsing run logs and pipeline definitions.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-06-25",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "github-actions-templates",
     "path": "skills/github-actions-templates",
@@ -25689,6 +25799,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "premium-3d-website",
+    "path": "skills/premium-3d-website",
+    "category": "frontend",
+    "name": "premium-3d-website",
+    "description": "Guidelines for building premium 3D websites, focusing on custom WebGL shaders, post-processing, physics-based interactions, smooth animations, preloaders, and device optimization.",
+    "risk": "safe",
+    "source": "self",
+    "date_added": "2026-06-25",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "price-psychology-strategist",
     "path": "skills/price-psychology-strategist",
@@ -31281,6 +31413,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "sql-sentinel",
+    "path": "skills/sql-sentinel",
+    "category": "data",
+    "name": "sql-sentinel",
+    "description": "Audit SQL for the cost & performance anti-patterns that burn warehouse credits. Scores warehouse health 0-100 and outputs a prioritized cost-reduction plan for BigQuery, Snowflake, Redshift, and Postgres.",
+    "risk": "safe",
+    "source": "community",
+    "date_added": "2026-06-26",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "sqlmap-database-pentesting",
     "path": "skills/sqlmap-database-pentesting",
@@ -35603,6 +35757,28 @@
       "reasons": []
     }
   },
+  {
+    "id": "web-project-brainstorming",
+    "path": "skills/web-project-brainstorming",
+    "category": "consulting",
+    "name": "web-project-brainstorming",
+    "description": "Masterclass framework for brainstorming web development projects and page designs. Outlines structural phases for concept, UX flow, styling aesthetics, technical architecture, and SEO.",
+    "risk": "safe",
+    "source": "self",
+    "date_added": "2026-06-26",
+    "plugin": {
+      "targets": {
+        "codex": "supported",
+        "claude": "supported"
+      },
+      "setup": {
+        "type": "none",
+        "summary": "",
+        "docs": null
+      },
+      "reasons": []
+    }
+  },
   {
     "id": "web-scraper",
     "path": "skills/web-scraper",