By flyingwebie
Psychology-driven UI/UX design plugin. Combines cognitive psychology skills with Google Stitch MCP to generate premium, conversion-optimized page designs.
Generate or reverse-engineer a design system for the project
Design one or more pages with psychology-driven UX and Stitch-generated UI
Export screen data and metadata from Stitch project
Generate rich image specifications from text descriptions, reference images, or both
Iterate on existing designs -- generate variants or edit screens with change requests
The UI Agent consumes UX briefs and design tokens to generate premium visual screens via Google Stitch MCP. It answers "how does it look" -- executing the UX Agent's psychology-informed layout decisions into production-quality designs.
The UX Agent applies cognitive psychology skills to produce section-by-section layout decisions for each page. It answers "what goes where and why" -- grounded in psychology research, not aesthetic preference.
Generates per-page animation choreography specs. Reads UX briefs for psychology context and design tokens for style-appropriate motion. Produces implementation-ready specs with Framer Motion, GSAP + ScrollTrigger, Swup.js, and Lenis code patterns.
Generates complete design systems from project niche/industry descriptions. Produces machine-readable tokens (tokens.json) and human-readable design documentation (branding.md) using industry-specific design rules and color psychology.
Generates page copy (headlines, subheadings, body text, CTAs, labels) based on project niche, page type, and UX brief psychology rationale. Presents all copy for human approval before use. Never passes unapproved copy to the UI Agent.
Generates comprehensive JSON visual specifications from text descriptions, reference images, or both. Translates photography/cinematography parameters into rich natural-language image guidance that dramatically improves Stitch's image rendering in generated screens.
Manages the .ui-ux/ persistence folder. Handles initialization, reading, and writing of design tokens, project state, and screen references. Every command MUST read from .ui-ux/ before any design operation.
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Claude Code plugins and agent skills for product, development, and agency workflows — by Flying Web Solutions.
| Name | Type | Description |
|---|---|---|
prd-builder | Plugin | Generate full PRDs by analyzing existing products and recommending a modern tech stack |
fws-client-discovery | Plugin | Complete client discovery — sitemap, competitors, personas, keywords, copy, and 90-day content plan |
git-master | Plugin | Best-practice git workflow with Gitmoji + Conventional Commits, PR creation, and release management |
magic-ui-ux | Plugin | Psychology-driven UI/UX design — combines cognitive psychology skills with Google Stitch MCP |
etchwp | Plugin | Generate production-ready Etch + AutomaticCSS components with BEM naming, ACSS tokens, and vanilla JS |
stack-agents | Plugin | Auto-triggering tech stack subagents for TanStack Start, Next.js, Expo, Convex, Supabase, and Clerk |
Plugins add slash commands, hooks, and bundled skills — they are Claude Code-specific. Skills (
SKILL.mdfiles) are cross-tool — they work in Claude Code, Gemini CLI, and OpenAI Codex CLI without modification.
| Tool | Plugins | Skills |
|---|---|---|
| Claude Code | Yes — full plugin system | Yes |
| Gemini CLI | No | Yes |
| OpenAI Codex CLI | No | Yes |
This repo ships with a .claude-plugin/marketplace.json, which makes it a valid Claude Code marketplace. Register it once using its GitHub path:
claude plugin marketplace add <github-username>/<repo-name>
# Example:
claude plugin marketplace add flyingwebie/skills
Verify it was registered:
claude plugin marketplace list
# Install globally for your user account
claude plugin install prd-builder
claude plugin install fws-client-discovery
claude plugin install git-master
# Install only for the current project
claude plugin install prd-builder --scope project
claude plugin list # List installed plugins
claude plugin update prd-builder # Update to latest version
claude plugin disable prd-builder # Disable without uninstalling
claude plugin uninstall prd-builder # Remove completely
claude plugin marketplace remove flyingweb # Remove the marketplace
claude --plugin-dir /path/to/skills/prd-builder
Gemini CLI supports skills natively via the .agents/skills/ path. Plugins are not supported — only the embedded SKILL.md files apply.
# Symlink bundled skills from plugins into the Gemini user skills directory
ln -s /path/to/skills/git-master/skills/git-workflow ~/.gemini/skills/git-workflow
ln -s /path/to/skills/git-master/skills/commit-conventions ~/.gemini/skills/commit-conventions
# Or use the ~/.agents/skills/ path (shared with Codex)
ln -s /path/to/skills/git-master/skills/git-workflow ~/.agents/skills/git-workflow
Copy or symlink the skill into your project's local skills folder:
# Inside your project root
mkdir -p .agents/skills
ln -s /path/to/skills/git-master/skills/git-workflow .agents/skills/git-workflow
Commit .agents/skills/ to version control so the whole team shares the same skills.
/skills reload
gemini skills list
Codex CLI uses the same .agents/skills/ convention as Gemini CLI, so the same skill files work in both tools.
ln -s /path/to/skills/git-master/skills/git-workflow ~/.agents/skills/git-workflow
npx claudepluginhub flyingwebie/skills --plugin magic-ui-uxGenerate comprehensive PRDs for product clones by analyzing existing products, recommending tech stacks, and producing structured markdown documents
Best-practice git workflow manager for feature-branch development on GitHub. Gitmoji + Conventional Commits, PR creation, releases, branch hygiene, and safety hooks.
Run a complete client discovery workflow — from sitemap audit and competitor research to buyer personas, keyword strategy, and production-ready website copy. Delivers research reports, SEO-optimized page content, and a 90-day blog calendar.
Generates production-ready Etch + AutomaticCSS components with correct BEM naming, ACSS token usage, semantic HTML, and vanilla JavaScript.
Tech stack subagents with Context7 docs, psychology-driven UX, and best practices for TanStack Start, Next.js, Expo, Convex, Supabase, and Clerk.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Multi-model consensus engine integrating OpenAI Codex CLI, Gemini CLI, and Claude CLI for collaborative code review and problem-solving.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Write feature specs, plan roadmaps, and synthesize user research faster. Keep stakeholders updated and stay ahead of the competitive landscape.
Curate auto-memory, promote learnings to CLAUDE.md and rules, extract proven patterns into reusable skills.