ワンクリックでManusで任意のスキルを実行

始める

website

スター1

フォーク0

更新日2026年3月3日 13:51

Build fast, accessible, and SEO-friendly websites with modern best practices.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

huangqianqian120

huangqianqian120/skillslibrary

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Website Development Rules

Performance

Images are the #1 cause of slow sites — use WebP/AVIF, lazy-load below-the-fold, and set explicit width/height to prevent layout shift
Render-blocking CSS delays first paint — inline critical CSS in <head>, defer the rest
Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with async or defer, audit regularly
Fonts cause invisible text flash (FOIT) — use font-display: swap and preload critical fonts
Measure with Lighthouse in incognito mode — extensions skew results

Mobile First

Start CSS with mobile styles, add complexity with min-width media queries — easier to scale up than strip down
Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users
Test on real devices, not just browser DevTools — throttling simulation misses real-world jank
Horizontal scroll is a critical bug — test every page at 320px width minimum
viewport meta tag is required: <meta name="viewport" content="width=device-width, initial-scale=1">

Accessibility

Every <img> needs alt text — empty alt="" for decorative images, descriptive text for meaningful ones
Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker
Form inputs must have associated <label> elements — placeholders alone are not accessible
Keyboard navigation must work — test every interactive element with Tab key
Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels

HTML Structure

One <h1> per page only — it's the page title, not a styling tool
Use semantic elements: <nav>, <main>, <article>, <aside>, <footer> — they communicate structure to browsers and assistive tech
<button> for actions, <a> for navigation — don't use divs with click handlers
External links should have rel="noopener" — prevents security vulnerability with target="_blank"
Validate HTML — broken markup causes unpredictable rendering across browsers

CSS Patterns

Avoid !important — it breaks cascade and makes debugging painful. Fix specificity instead
Use relative units (rem, em, %) over fixed px for text — respects user font size preferences
CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere
Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job
Test without CSS loading — content should still be readable in plain HTML

Common Mistakes

Missing favicon causes 404 spam in server logs — always include one, even a simple PNG
Not setting <html lang="en"> breaks screen reader pronunciation
Hardcoded http:// links break on HTTPS sites — use protocol-relative // or always https://
Assuming JavaScript is available — core content should work without JS (progressive enhancement)
Forgetting print styles — add @media print for pages users might print (receipts, articles)

Before Launch

Test all forms actually submit — broken contact forms lose leads silently
Check 404 page exists and is helpful — default server 404 looks unprofessional
Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers
Submit sitemap to Google Search Console — speeds up indexing
Set up uptime monitoring — know when your site goes down before users tell you

このリポジトリの他の Skills

同じリポジトリ

infinite-dev-skill

huangqianqian120/skillslibrary

Claude Code 无限开发循环技能 - 让 Claude 成为无限开发循环：spec → feature list → implement → test → commit → repeat，跨无限制上下文窗口。

2026-03-221

ppt-agent-skill

huangqianqian120/skillslibrary

专业 PPT 演示文稿全流程 AI 生成助手。模拟万元/页级别 PPT 设计公司的完整工作流，输出高质量 HTML 演示文稿 + 可编辑矢量 PPTX。

2026-03-221

wps-skills

huangqianqian120/skillslibrary

WPS Office 智能助手 - AI编程助手通过自然语言操控WPS Office的MCP工具集。支持Excel(80工具) / Word(24工具) / PPT(111工具) / 通用(9工具)。

2026-03-221

xiaohongshu-automation

huangqianqian120/skillslibrary

小红书内容自动化 — 监控关键词、生成爆款文案、自动发布。基于 Agent-Reach 实现小红书阅读、搜索、发帖、评论、点赞。适用于博物馆/文博/文物等垂直领域，也支持通用爆款生成。

2026-03-161

git-manager

huangqianqian120/skillslibrary

Comprehensive Git operations for repository management. Use when working with Git repositories for: - Committing changes (git commit with conventional commits format) - Creating branches (feature, bugfix, hotfix branches) - Stashing changes - Viewing history, diffs, and status - Merging and rebasing - Creating pull requests (GitHub, GitLab) - Undoing commits and changes - Syncing with remote (push, pull, fetch)

2026-03-051

http-retry

huangqianqian120/skillslibrary

Universal HTTP retry mechanism with exponential backoff. Use when making API calls that may fail due to network issues, timeouts, or rate limits.

2026-03-031

Website Development Rules

Performance

Images are the #1 cause of slow sites — use WebP/AVIF, lazy-load below-the-fold, and set explicit width/height to prevent layout shift

Render-blocking CSS delays first paint — inline critical CSS in <head>, defer the rest

Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with async or defer, audit regularly

Fonts cause invisible text flash (FOIT) — use font-display: swap and preload critical fonts

Measure with Lighthouse in incognito mode — extensions skew results

Mobile First

Start CSS with mobile styles, add complexity with min-width media queries — easier to scale up than strip down

Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users

Test on real devices, not just browser DevTools — throttling simulation misses real-world jank

Horizontal scroll is a critical bug — test every page at 320px width minimum

viewport meta tag is required: <meta name="viewport" content="width=device-width, initial-scale=1">

Accessibility

Every <img> needs alt text — empty alt="" for decorative images, descriptive text for meaningful ones

Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker

Form inputs must have associated <label> elements — placeholders alone are not accessible

Keyboard navigation must work — test every interactive element with Tab key

Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels

HTML Structure

One <h1> per page only — it's the page title, not a styling tool

Use semantic elements: <nav>, <main>, <article>, <aside>, <footer> — they communicate structure to browsers and assistive tech

<button> for actions, <a> for navigation — don't use divs with click handlers

External links should have rel="noopener" — prevents security vulnerability with target="_blank"

Validate HTML — broken markup causes unpredictable rendering across browsers

CSS Patterns

Avoid !important — it breaks cascade and makes debugging painful. Fix specificity instead

Use relative units (rem, em, %) over fixed px for text — respects user font size preferences

CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere

Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job

Test without CSS loading — content should still be readable in plain HTML

Common Mistakes

Missing favicon causes 404 spam in server logs — always include one, even a simple PNG

Not setting <html lang="en"> breaks screen reader pronunciation

Hardcoded http:// links break on HTTPS sites — use protocol-relative // or always https://

Assuming JavaScript is available — core content should work without JS (progressive enhancement)

Forgetting print styles — add @media print for pages users might print (receipts, articles)

Before Launch

Test all forms actually submit — broken contact forms lose leads silently

Check 404 page exists and is helpful — default server 404 looks unprofessional

Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers

Submit sitemap to Google Search Console — speeds up indexing

Set up uptime monitoring — know when your site goes down before users tell you

name	Website
description	Build fast, accessible, and SEO-friendly websites with modern best practices.
metadata	{"clawdbot":{"emoji":"🌐","os":["linux","darwin","win32"]}}