--- name: creo description: > Comprehensive design, UX, content, DevOps, and testing toolkit for web applications. Design reviews, UX flow analysis, marketing content, SEO auditing, CI/CD pipelines, test orchestration, and marketing site creation. Triggers on: /creo, design review, UX analysis, marketing content, SEO, DevOps, pipeline, test, marketing site. allowed-tools: - Read - Grep - Glob - Bash - WebFetch - Agent --- # Creo -- Design & Development Toolkit Creo is a comprehensive design, UX, content, DevOps, and testing toolkit for web applications. It provides a unified interface for design reviews, UX flow analysis, marketing content generation, SEO auditing, CI/CD pipeline management, test orchestration, and full marketing site creation. Each command routes to a specialized sub-skill or subagent optimized for its domain. --- ## Quick Reference | Command | Description | |---------|-------------| | `/creo design-review ` | UI/UX review (responsive, WCAG AA, Nielsen's heuristics) | | `/creo design-implement ` | Execute design fixes from review reports | | `/creo ux-internal ` | Analyze your own app's UX flows | | `/creo ux-competitor ` | Analyze competitor websites | | `/creo content ` | Generate marketing copy (JTBD, pain points) | | `/creo image-prompt ` | Generate image prompts for DALL-E/Midjourney/SDXL | | `/creo seo ` | Next.js SEO + GEO audit (7-phase, technical + schema + GEO) | | `/creo seo onboard ` | Full SEO lifecycle: audit, plan, guided GSC setup, monitoring cadence | | `/creo seo init` | Scan codebase and cache project profile for faster audits | | `/creo seo autofix` | Closed-loop GSC remediation (allowlisted fixes, ledger, live verification) | | `/creo seo semantic-core` | Focused query core with noise filtering and P0-P3 priorities | | `/creo seo weekly` | Weekly rank history + LLM-citability monitoring | | `/creo seo-content ` | Deep content audit (E-E-A-T, AI-pattern detection, citability) | | `/creo devops ` | Infrastructure management (GitHub/Cloudflare/Railway/Stripe) | | `/creo pipeline ` | CI/CD pipeline specialist (GitHub Actions) | | `/creo test ` | Test orchestration (unit + E2E) | | `/creo marketing-site ` | Full marketing site creation (7-stage) | | `/creo ai-generation ` | AI generation pipeline expertise | --- ## Orchestration Logic ### Individual Commands For any single command (e.g., `/creo design-review`, `/creo seo`), the orchestrator loads the relevant sub-skill directly. The sub-skill file contains the full instructions and references needed for that domain. ### Marketing Site Full Build (`/creo marketing-site full`) This is a multi-stage orchestration that delegates to parallel subagents: 1. **Stage 1-2**: Infrastructure setup and content generation run sequentially. 2. **Stage 3**: Page component assembly. 3. **Stage 4-5**: Parallel delegation to: - `creo-content-strategist` -- generates marketing copy for all pages - `creo-seo` -- runs codebase audit and optimizes metadata/structured data - `creo-design-review` -- validates responsive design and accessibility - `creo-ux-competitor` -- analyzes competitor sites for differentiation 4. **Stage 6**: Localization via `creo-i18n-translator`. 5. **Stage 7**: Final QA combining all subagent reports. ### DevOps Routing (`/creo devops`) Routes to specialized CLI subagents based on the target platform: | Subcommand | Subagent | |------------|----------| | `devops github` | `creo-github-cli` | | `devops cloudflare` | `creo-cloudflare-cli` | | `devops railway` | `creo-railway-cli` | | `devops stripe` | `creo-stripe-cli` | ### Test Routing (`/creo test`) Routes to the appropriate testing subagent: | Subcommand | Subagent | |------------|----------| | `test unit` | `creo-unit-test` | | `test e2e` | `creo-e2e-test` | | `test all` | Both subagents run in parallel | --- ## Domains | Domain | Sub-Skills | Primary Focus | |--------|-----------|---------------| | **Design & UX** | design-review, design-implement, ux-internal, ux-competitor | Visual quality, accessibility, usability | | **Content & Marketing** | content, image-prompt | Copy generation, JTBD frameworks, image prompts | | **SEO** | seo | Technical SEO, structured data, Core Web Vitals | | **DevOps** | devops (github, cloudflare, railway, stripe) | Infrastructure, deployment, services | | **Testing** | test (unit, e2e) | Code quality, test coverage, E2E validation | | **Orchestration** | marketing-site, ai-generation | Multi-stage workflows, parallel delegation | --- ## Reference Files On-demand reference files loaded by sub-skills as needed. Located in `creo/references/`: | File | Used By | Content | |------|---------|---------| | `design-principles.md` | design-review, design-implement | S-tier SaaS design checklist | | `design-style-guide.md` | design-review, design-implement | Viewports, spacing, typography, accessibility | | `visual-dev-snippets.md` | design-review, design-implement | Quick visual verification workflow | | `ux-methodologies.md` | ux-internal, ux-competitor | Nielsen's heuristics, JTBD, journey mapping | | `ux-report-template.md` | ux-internal, ux-competitor | Structured UX analysis report format | | `pain-points-framework.md` | content, marketing-site | Customer pain analysis by segment | | `voice-and-tone.md` | content, marketing-site | Brand voice pillars, writing principles | | `image-style-reference.md` | image-prompt | Prompt patterns, style modifiers, categories | | `seo-checklist.md` | seo, marketing-site | SEO and i18n implementation checklist | | `seo-audit-checklists.md` | seo | Phase-based SEO audit (5 phases) | | `i18n-translation-guide.md` | marketing-site, content | Localization best practices, language list | | `workflow-stages.md` | marketing-site | 7-stage marketing site creation workflow | --- ## Sub-Skills Each sub-skill is a standalone SKILL.md that can be invoked directly or through the orchestrator. | # | Sub-Skill | Path | Trigger | |---|-----------|------|---------| | 1 | Design Review | `creo/skills/design-review/SKILL.md` | `/creo design-review` | | 2 | Design Implementation | `creo/skills/design-implement/SKILL.md` | `/creo design-implement` | | 3 | UX Internal Analysis | `creo/skills/ux-internal/SKILL.md` | `/creo ux-internal` | | 4 | UX Competitor Analysis | `creo/skills/ux-competitor/SKILL.md` | `/creo ux-competitor` | | 5 | Content Strategy | `creo/skills/content/SKILL.md` | `/creo content` | | 6 | Image Prompt Generation | `creo/skills/image-prompt/SKILL.md` | `/creo image-prompt` | | 7 | SEO Audit | `creo/skills/seo/SKILL.md` | `/creo seo` | | 8 | DevOps Management | `creo/skills/devops/SKILL.md` | `/creo devops` | | 9 | CI/CD Pipeline | `creo/skills/pipeline/SKILL.md` | `/creo pipeline` | | 10 | Test Orchestration | `creo/skills/test/SKILL.md` | `/creo test` | | 11 | Marketing Site | `creo/skills/marketing-site/SKILL.md` | `/creo marketing-site` | | 12 | AI Generation | `creo/skills/ai-generation/SKILL.md` | `/creo ai-generation` | --- ## Subagents Each subagent is a focused agent definition for parallel delegation. | # | Subagent | Path | Role | |---|----------|------|------| | 1 | creo-design-review | `creo/agents/design-review.md` | Visual review and accessibility | | 2 | creo-design-implement | `creo/agents/design-implement.md` | Execute design fixes | | 3 | creo-ux-internal | `creo/agents/ux-internal.md` | Internal UX flow analysis | | 4 | creo-ux-competitor | `creo/agents/ux-competitor.md` | Competitor UX analysis | | 5 | creo-content-strategist | `creo/agents/content-strategist.md` | Marketing copy generation | | 6 | creo-image-prompt | `creo/agents/image-prompt.md` | Image prompt generation | | 7 | creo-seo | `agents/creo-seo.md` | Next.js SEO + GEO audit (7-phase) | | 7b | creo-seo-content | `agents/creo-seo-content.md` | Deep content-quality audit (delegate or standalone) | | 8 | creo-github-cli | `creo/agents/github-cli.md` | GitHub API operations | | 9 | creo-cloudflare-cli | `creo/agents/cloudflare-cli.md` | Cloudflare management | | 10 | creo-railway-cli | `creo/agents/railway-cli.md` | Railway deployment | | 11 | creo-stripe-cli | `creo/agents/stripe-cli.md` | Stripe integration | | 12 | creo-e2e-test | `creo/agents/e2e-test.md` | End-to-end testing | --- ## Optional Extensions These extensions can be added to the toolkit as needed: - **image-generation** -- Integration with DALL-E, Midjourney, or SDXL APIs for automated image creation from prompts generated by the image-prompt sub-skill. - **i18n-translator** -- Automated translation pipeline for marketing site localization across 39+ languages with quality validation. - **gsc-analyzer** -- Google Search Console analysis, SEO auditing, and operations automation: 17 analyzers, GSC API + Indexing API clients, UI-only surface automation (drilldown exports, Validate Fix), the closed-loop autofix scripts, weekly rank/LLM-citability monitoring, and a full GSC API reference. --- ## Project Configuration All skills check `.claude/project-config.md` at runtime for project-specific settings. This file should contain: - **Dev server URL** -- The local development server address (default: `http://localhost:3000`). - **Framework** -- The frontend framework in use (Next.js, Vite, etc.). - **CSS framework** -- Tailwind CSS, MUI, shadcn/ui, or custom. - **Supported locales** -- List of language codes for i18n. - **Brand guidelines** -- Brand name, colors, fonts, voice attributes. - **Deployment targets** -- Hosting platform and CI/CD configuration. - **Test framework** -- Vitest, Jest, Playwright, Cypress, etc. If `.claude/project-config.md` does not exist, skills use sensible defaults and prompt the user for required configuration.