My AI Programming Workflow: Skills, Tools & MCP Services

This article is continuously updated to reflect my evolving AI programming toolkit and workflow.

This blog documents the skills, tools, and MCP services I use in my daily AI programming work. It serves as a personal reference and may help other developers understand how to build an efficient AI-assisted development environment.

Table of Contents

1. Development Skills
2. Design Skills
3. Marketing Skills
4. SEO Skills
5. CI/CD Automation Skills
6. Product Research Skills
7. Workflow Skills
8. Content Processing Skills
9. MCP Services
10. Workflow System: Trellis

Development Skills

These skills help with frontend development, backend services, database management, and general coding tasks.

Frontend Frameworks & Libraries

vue

Purpose: Vue.js framework best practices and patterns
Usage: Building interactive web applications with Vue.js composition API
Projects: Elynd, Linky
Sub-skills: nuxt

react

Purpose: React ecosystem
Usage: Building modern React applications
Projects: gotly-keeper
Sub-skills: react-components, next-best-practices

adonisjs

Purpose: AdonisJS Node.js framework
Usage: Building backend APIs and services
Projects: Elynd, Linky

vite

Purpose: Vite build tool configuration
Usage: Fast development server and optimized builds
Projects: Elynd

UI Components

shadcn

Purpose: shadcn/ui component library
Usage: Adding pre-built, customizable UI components
Projects: gotly-keeper, zhaoguiyang.site, Elynd
Sub-skills: shadcn-vue

nuxt-ui

Purpose: Nuxt UI component library
Usage: Building Nuxt applications with pre-built components
Projects: Linky

reka-ui

Purpose: Reka UI primitives for Vue
Usage: Headless UI components for Vue.js
Projects: Linky

Styling

tailwindcss

Purpose: Tailwind CSS utility-first framework
Usage: Rapid UI development with utility classes
Projects: Elynd, gotly-keeper, zhaoguiyang.site
Sub-skills: tailwindcss-advanced-layouts, tailwindcss-animations, tailwind-patterns

State Management

pinia

Purpose: Vue.js state management
Usage: Managing application state in Vue apps
Projects: Elynd, Linky

ahooks

Purpose: React hooks library
Usage: Reusable hooks for React applications
Projects: gotly-keeper

vueuse

Purpose: Vue composition utilities
Usage: Essential composition functions for Vue
Projects: Elynd, Linky
Sub-skills: vueuse-functions

Animation

motion

Purpose: Motion animation library
Usage: Creating smooth animations in web applications
Projects: Linky, zhaoguiyang.site
Sub-skills: framer-motion

TypeScript & Validation

typescript-advanced-types

Purpose: Advanced TypeScript type patterns
Usage: Complex type definitions and generics
Projects: Linky

zod

Purpose: Schema validation library
Usage: Runtime type validation and inference
Projects: gotly-keeper

Testing

vitest

Purpose: Vite-native testing framework
Usage: Unit and integration testing
Projects: Elynd, gotly-keeper

vue-testing-best-practices

Purpose: Vue.js testing best practices
Usage: Testing Vue components effectively
Projects: Elynd

Database

postgres

Purpose: PostgreSQL database operations
Usage: Database queries and management
Projects: gotly-keeper, Elynd
Sub-skills: postgres-pro, postgresql-code-review, postgresql-optimization, postgresql-table-design

drizzle-orm

Purpose: Drizzle ORM for TypeScript
Usage: Type-safe database queries
Projects: gotly-keeper

redis

Purpose: Redis caching and data storage
Usage: Caching and real-time data patterns
Projects: Elynd
Sub-skills: redis-best-practices, redis-development

Authentication

better-auth-best-practices

Purpose: Better Auth library best practices
Usage: Implementing authentication and authorization
Projects: gotly-keeper

AI & Machine Learning

ai-sdk

Purpose: Vercel AI SDK
Usage: Building AI-powered applications
Projects: gotly-keeper

azure-ai

Purpose: Azure AI services integration
Usage: Using Azure AI services in applications
Projects: Elynd

Package Management

pnpm

Purpose: pnpm package manager
Usage: Efficient dependency management
Projects: Elynd, gotly-keeper

axios

Purpose: HTTP client library
Usage: Making API requests
Projects: Elynd

Design Skills

These skills help create visually appealing and user-friendly interfaces.

UI Design Skills

design-taste-frontend

Purpose: Anti-slop frontend design
Usage: Building landing pages and portfolios that don’t look templated
Projects: zhaoguiyang.site
Sub-skills: gpt-taste, minimalist-ui, industrial-brutalist-ui, stitch-design-taste, high-end-visual-design, imagegen-frontend-web, imagegen-frontend-mobile

brandkit

Purpose: Brand identity and visual design
Usage: Creating consistent brand guidelines and visual assets
Projects: zhaoguiyang.site

web-design-guidelines

Purpose: Web design best practices
Usage: General web design principles and patterns
Projects: Elynd, Linky

frontend-design

Purpose: Frontend design patterns
Usage: Creating effective frontend layouts and components
Projects: Linky

ui-ux-pro-max

Purpose: Advanced UI/UX techniques
Usage: Professional UI/UX design patterns
Projects: Linky

taste-skill

Purpose: Design taste and aesthetics
Usage: Improving visual design quality
Projects: gotly-keeper, zhaoguiyang.site

image-to-code

Purpose: Image to code conversion
Usage: Converting design images to frontend code
Projects: zhaoguiyang.site

redesign-existing-projects

Purpose: Project redesign guidance
Usage: Upgrading existing websites to premium quality
Projects: zhaoguiyang.site

Marketing Skills

These skills help create compelling marketing content and optimize conversions.

copywriting

Purpose: Marketing copy creation
Usage: Writing persuasive copy for landing pages, pricing pages, etc.
Projects: zhaoguiyang.site

copy-editing

Purpose: Copy editing and improvement
Usage: Reviewing and improving existing marketing content
Projects: zhaoguiyang.site

product-marketing

Purpose: Product marketing strategy
Usage: Creating product positioning and messaging
Projects: zhaoguiyang.site

sales-enablement

Purpose: Sales collateral creation
Usage: Creating pitch decks, one-pagers, and sales materials
Projects: zhaoguiyang.site

marketing-psychology

Purpose: Marketing psychology principles
Usage: Applying behavioral science to marketing
Projects: zhaoguiyang.site

cro

Purpose: Conversion Rate Optimization
Usage: Optimizing landing pages and forms for conversions
Projects: zhaoguiyang.site

SEO Skills

These skills help optimize content for search engines and AI visibility.

ai-seo

Purpose: AI search engine optimization
Usage: Optimizing content to be cited by LLMs and AI search engines
Projects: zhaoguiyang.site

schema

Purpose: Schema markup and structured data
Usage: Adding JSON-LD structured data for rich snippets
Projects: zhaoguiyang.site

seo-audit

Purpose: SEO auditing and diagnostics
Usage: Identifying and fixing SEO issues
Projects: zhaoguiyang.site

site-architecture

Purpose: Website structure optimization
Usage: Planning page hierarchy and internal linking
Projects: zhaoguiyang.site

CI/CD Automation Skills

These skills help automate deployment and development workflows.

publish-version

Purpose: Version publishing automation
Usage: Managing version releases and changelogs
Projects: gotly-keeper

vercel-composition-patterns

Purpose: Vercel deployment patterns
Usage: Best practices for Vercel deployments
Projects: gotly-keeper

Product Research Skills

These skills help with product discovery, market research, and user analysis.

Note: The product-research project contains 39 skills in total. Below are the most commonly used ones.

product-research

Purpose: Product research framework
Usage: Product discovery, market research, and user analysis
Projects: product-research
Sub-skills: competitor-analysis, customer-journey-map, ideal-customer-profile, jobs-to-be-done, lean-canvas, market-sizing, mom-test, pricing-strategy, value-proposition, product-strategy, etc.

Workflow Skills

These skills are part of the Trellis workflow system for managing AI-assisted development.

Trellis Workflow System

trellis

Purpose: AI-assisted development workflow system
Usage: Managing task planning, execution, and verification
Projects: zhaoguiyang.site
Sub-skills: trellis-before-dev, trellis-brainstorm, trellis-break-loop, trellis-channel, trellis-check, trellis-meta, trellis-session-insight, trellis-spec-bootstrap, trellis-update-spec

Content Processing Skills

These skills help process and improve content quality.

humanizer

Purpose: AI text humanization
Usage: Removing AI-generated patterns from text
Projects: zhaoguiyang.site

pdf

Purpose: PDF document processing
Usage: Creating and reviewing PDF documents
Projects: zhaoguiyang.site

full-output-enforcement

Purpose: Complete output generation
Usage: Ensuring AI generates complete, unabridged content
Projects: zhaoguiyang.site

MCP Services

Context7

Purpose: Documentation retrieval service
Usage: Fetching up-to-date library documentation and code examples
Integration: MCP protocol in OpenCode

Context7 provides real-time documentation for libraries, ensuring I always work with the latest APIs and best practices.

Workflow System: Trellis

Trellis is my development workflow system for managing AI-assisted tasks.

Three Phases

1. Plan - Requirements discovery and task planning
2. Execute - Implementation with sub-agents
3. Finish - Verification, documentation, and archival

Key Benefits

• Structured task management
• Automated code review
• Session history tracking
• Cross-session knowledge persistence

Appendix

Skill Source Projects

Update Log

• 2026-07-03: Initial version with skills from all projects
• This article will be continuously updated as I adopt new tools and workflows.

Last updated: 2026-07-03