web-design-guidelines
π―Skillfrom zhanlincui/ultimate-agent-skills-collection
|Provides comprehensive web design best practices, standards, and actionable guidelines for creating visually appealing and user-friendly websites across different design dimensions.
Part of
zhanlincui/ultimate-agent-skills-collection(42 items)
Installation
/plugin marketplace add your-skills-repo/plugin install skill-name@your-marketplacegit clone https://github.com/ZhanlinCui/Agent-Skills-Library.git ~/.agents/skillsSkill Details
Overview
# π Ultimate Agent Skills Collection
The Most Comprehensive High-Quality Agent Skills Collection on the Internet [δΈζζζ‘£](./README.zh-CN.md) | [ζ₯ζ¬θͺγγγ₯γ‘γ³γ](./README.ja.md)
---
π What Are Skills?
Skills are folders of instructions, scripts, and resources that AI agents load dynamically to improve performance on specialized tasks. They teach Claude (or other AI agents) how to complete specific tasks in a repeatable wayβwhether that's creating documents, analyzing data, automating workflows, or building applications.
π Why This Collection?
This is the most comprehensive curated collection of high-quality agent skills gathered from across the internet, including:
- β 49+ Premium Skills covering creative, technical, and enterprise workflows
- β Production-Ready - These skills power real applications
- β Well-Documented - Each skill includes detailed instructions and examples
- β Organized by Category - Easy to find what you need
---
π Skills Directory
π¨ Creative & Design
| Skill | Description |
|-------|-------------|
| [algorithmic-art](./algorithmic-art/) | Create generative art using p5.js with seeded randomness and interactive parameter exploration |
| [canvas-design](./canvas-design/) | Create beautiful visual art in .png and .pdf documents using design philosophy |
| [frontend-design](./frontend-design/) | Build distinctive, production-grade frontend interfaces with exceptional design quality |
| [brand-guidelines](./brand-guidelines/) | Apply official brand colors and typography to artifacts |
| [theme-factory](./theme-factory/) | Style artifacts with 10+ pre-set themes or generate custom themes on-the-fly |
| [slack-gif-creator](./slack-gif-creator/) | Create animated GIFs optimized for Slack with proper constraints |
| [ui-ux-pro-max](./ui-ux-pro-max/) | Ultimate UI/UX design intelligence: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines. Supports 10 tech stacks (React, Vue, Next.js, Flutter, SwiftUI, etc.) with CLI search tool |
π Document Skills
| Skill | Description |
|-------|-------------|
| [docx](./docx/) | Comprehensive Word document creation, editing with tracked changes and comments |
| [pdf](./pdf/) | PDF manipulation - extract text/tables, create, merge/split, handle forms |
| [pptx](./pptx/) | PowerPoint presentation creation, editing, layouts, and speaker notes |
| [xlsx](./xlsx/) | Spreadsheet creation, editing with formulas, formatting, and data analysis |
| [doc-coauthoring](./doc-coauthoring/) | Structured workflow for co-authoring documentation and proposals |
| [internal-comms](./internal-comms/) | Write internal communications: status reports, newsletters, FAQs, incident reports |
| [github-release-assistant](./github-release-assistant/) | Generate bilingual GitHub release documentation (English + Chinese) |
π Obsidian Knowledge Management
| Skill | Description |
|-------|-------------|
| [obsidian-helper](./obsidian-helper/) | Smart note assistant with /daily (journal), /capture (quick notes), /review (weekly/monthly reviews). Deep MCP integration |
| [obsidian-bases](./obsidian-bases/) | Create Obsidian Bases (.base files) with views, filters, formulas, and summaries. Supports table/cards/list/map views |
| [obsidian-markdown](./obsidian-markdown/) | Complete Obsidian Flavored Markdown guide: wikilinks, embeds, callouts, properties, Mermaid diagrams, LaTeX math |
| [project-to-obsidian](./project-to-obsidian/) | Convert code projects to Obsidian knowledge bases. Auto-generate API docs, architecture, module docs with /p2o command |
| [json-canvas](./json-canvas/) | Create JSON Canvas files (.canvas) for Obsidian: nodes, edges, groups, flowcharts, mind maps |
π οΈ Development & Technical
| Skill | Description |
|-------|-------------|
| [mcp-builder](./mcp-builder/) | Create high-quality MCP (Model Context Protocol) servers for LLM integrations |
| [webapp-testing](./webapp-testing/) | Test local web applications using Playwright with screenshots and logs |
| [web-artifacts-builder](./web-artifacts-builder/) | Build complex HTML artifacts with React, Tailwind, and shadcn/ui |
| [skill-creator](./skill-creator/) | Guide for creating effective skills that extend Claude's capabilities |
| [deploying-to-production](./deploying-to-production/) | Automate GitHub repository creation and Vercel deployment |
| [internationalizing-websites](./internationalizing-websites/) | Add multi-language support to Next.js with proper SEO configuration |
π SEO & Performance
| Skill | Description |
|-------|-------------|
| [google-official-seo-guide](./google-official-seo-guide/) | Official Google SEO guide: search optimization, crawling, indexing best practices |
| [web-performance-seo](./web-performance-seo/) | Fix PageSpeed/Lighthouse accessibility errors for SEO optimization |
π§ Planning & Workflow
| Skill | Description |
|-------|-------------|
| [planning-with-files](./planning-with-files/) | Manus-style file-based planning with task_plan.md, findings.md, progress.md |
| [writing-plans](./writing-plans/) | Create structured plans for multi-step tasks before coding |
| [executing-plans](./executing-plans/) | Execute written implementation plans with review checkpoints |
| [brainstorming](./brainstorming/) | Explore user intent, requirements and design before implementation |
| [chat-compactor](./chat-compactor/) | Generate session summaries for AI agent continuity across sessions |
π Debugging & Quality
| Skill | Description |
|-------|-------------|
| [systematic-debugging](./systematic-debugging/) | Systematic approach to debugging: root cause analysis before fixes |
| [test-driven-development](./test-driven-development/) | TDD workflow: write tests first, then implementation |
| [verification-before-completion](./verification-before-completion/) | Verify work is complete before claiming success |
| [receiving-code-review](./receiving-code-review/) | Handle code review feedback with technical rigor |
| [requesting-code-review](./requesting-code-review/) | Request thorough code reviews for completed work |
π€ Agent Orchestration
| Skill | Description |
|-------|-------------|
| [dispatching-parallel-agents](./dispatching-parallel-agents/) | Dispatch 2+ independent tasks to parallel subagents |
| [subagent-driven-development](./subagent-driven-development/) | Execute plans with specialized subagents for each task |
| [using-superpowers](./using-superpowers/) | Establish how to find and use skills in conversations |
| [writing-skills](./writing-skills/) | Create, edit, and verify skills before deployment |
π§ Git & Development Workflow
| Skill | Description |
|-------|-------------|
| [using-git-worktrees](./using-git-worktrees/) | Create isolated git worktrees for feature development |
| [finishing-a-development-branch](./finishing-a-development-branch/) | Guide completion: merge, PR, or cleanup options |
π Integration & Automation
| Skill | Description |
|-------|-------------|
| [notebooklm](./notebooklm/) | Query Google NotebookLM for source-grounded answers via browser automation |
| [x-article-publisher](./x-article-publisher/) | Publish Markdown articles to X (Twitter) Articles with proper formatting |
| [doc-sync-tool](./doc-sync-tool/) | Auto-sync Agents.md, claude.md, gemini.md files across projects |
πΊ Vercel Official
| Skill | Description |
|-------|-------------
More from this repository10
Generates comprehensive UI/UX design intelligence with 50+ styles, 9 tech stacks, and actionable recommendations for creating accessible, performant, and visually appealing web and mobile interfaces.
web-performance-seo skill from zhanlincui/ultimate-agent-skills-collection
Provides AI-guided performance optimization recommendations for React and Next.js applications, following Vercel's engineering best practices across critical performance categories.
Systematically evaluates and verifies code review feedback, asking clarifying questions and responding with technical rigor before implementation.
Systematically investigates root causes of technical issues by carefully reproducing problems, analyzing errors, and gathering comprehensive diagnostic evidence before proposing any fixes.
Generates comprehensive, step-by-step implementation plans for multi-step tasks, providing detailed guidance for developers with zero context about the codebase.
Systematically request code reviews from a specialized subagent to validate work, catch issues early, and ensure quality before merging or proceeding.
Generates algorithmic art philosophies and p5.js sketches by exploring computational aesthetics, emergent behaviors, and seeded randomness.
Generates, edits, and analyzes Microsoft Word documents (.docx) with advanced capabilities like tracked changes, comments, and text extraction.
Generates and manipulates JSON Canvas files with nodes, edges, and groups for visual mapping and organizing information.