AgentSkillsCN

Skills

技能

SKILL.md

Copilot Skills Catalog

This folder contains specialized skills for creating static HTML pages with various features and optimizations.

Available Skills

🎨 static-html-page-generator

Core UI/UX skill for creating responsive HTML pages

Creates production-grade static HTML pages using Bootstrap 5 with modern UI components, icons, dark/light mode, and professional design patterns.

Key Features:

  • •Bootstrap 5 (latest) integration
  • •Font Awesome 6.4.0+ icons
  • •Dark/Light mode toggle with localStorage
  • •Button interaction & locking mechanism
  • •Responsive design (mobile-first)
  • •Clean, semantic HTML
  • •Top-right search bar
  • •Bottom status bar

Use when: Creating demo pages, dashboards, sample applications, or UI mockups that need polished, responsive interfaces.

Best for: UI structure, layout, theming, and visual design.

📊 data-features-with-faker

Data management and fake data generation skill

Implements data management features (search, sort, filter, pagination) and Faker.js integration for generating realistic fake data.

Key Features:

  • •Faker.js integration (8.3.1+)
  • •Realistic data generation patterns
  • •Search functionality (design-only)
  • •Sorting controls
  • •Filtering options
  • •Pagination components
  • •Data display patterns (tables, cards, lists)
  • •Status badges and counts

Use when: Creating pages that display lists, tables, or grids requiring data manipulation features and sample data.

Best for: Data presentation, list management, table layouts, and sample content generation.

🔍 seo-optimization

SEO and accessibility optimization skill

Implements SEO best practices for static HTML pages including semantic structure, meta tags, accessibility, and search engine discoverability.

Key Features:

  • •Essential meta tags (Open Graph, Twitter Card)
  • •Semantic HTML structure
  • •Image optimization (alt text, lazy loading)
  • •Structured data (Schema.org)
  • •Performance optimization
  • •Mobile optimization
  • •Accessibility (ARIA labels, keyboard navigation)
  • •Local SEO support

Use when: Creating pages that need to be indexed and ranked by search engines, or require high accessibility standards.

Best for: SEO compliance, accessibility, page speed, and search visibility.

How to Use These Skills

Single Skill Usage

When you need a specific capability, reference one skill:

  • •"Use static-html-page-generator to create a dashboard page"
  • •"Apply seo-optimization to this HTML page"
  • •"Add data-features-with-faker for product listings"

Combined Skills Usage

For comprehensive pages, combine multiple skills:

  • •Professional Landing Page: static-html-page-generator + seo-optimization
  • •Product Catalog: static-html-page-generator + data-features-with-faker
  • •SEO-Optimized Dashboard: All three skills together

Skill Hierarchy

code
┌─────────────────────────────────────────────────┐
│  static-html-page-generator (BASE)              │
│  • Bootstrap 5 layout & components              │
│  • Dark/Light mode                              │
│  • Icons & theming                              │
│  • Responsive design                            │
└─────────────────────────────────────────────────┘
                    ▲
                    │ references
           ┌────────┴─────────┐
           │                  │
┌──────────▼────────┐  ┌──────▼──────────┐
│ data-features     │  │ seo-optimization│
│ • Faker.js        │  │ • Meta tags     │
│ • Search/filter   │  │ • Semantic HTML │
│ • Pagination      │  │ • Accessibility │
│ • Data patterns   │  │ • Performance   │
└───────────────────┘  └─────────────────┘

Skill Selection Guide

Choose static-html-page-generator when you need:

  • •Clean, responsive layout
  • •Dark/Light mode
  • •Professional UI components
  • •Icon integration
  • •Modern design patterns

Choose data-features-with-faker when you need:

  • •Display lists or tables of data
  • •Fake data for demonstrations
  • •Search, sort, filter UI
  • •Pagination controls
  • •Realistic sample content

Choose seo-optimization when you need:

  • •Search engine visibility
  • •Social media sharing optimization
  • •Accessibility compliance
  • •Fast page load times
  • •Semantic markup

Quick Start Examples

Example 1: Simple Dashboard

code
Request: "Create a dashboard page with stats cards"
Skills: static-html-page-generator

Example 2: Product Listing

code
Request: "Create a product catalog with filters and fake data"
Skills: static-html-page-generator + data-features-with-faker

Example 3: SEO-Optimized Landing Page

code
Request: "Create a landing page optimized for search engines"
Skills: static-html-page-generator + seo-optimization

Example 4: Complete Application Page

code
Request: "Create a user directory with search, SEO, and dark mode"
Skills: All three (static-html-page-generator + data-features-with-faker + seo-optimization)

Skill Development Guidelines

When creating new skills:

  1. •Focus: Each skill should have a clear, single responsibility
  2. •Independence: Skills should work standalone or be composable
  3. •Reference: Link to related skills for extended functionality
  4. •Documentation: Include clear use cases and examples
  5. •Maintainability: Keep skills concise and focused

Last Updated: February 17, 2026