تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

website

النجوم١

التفرعات٠

آخر تحديث٣ مارس ٢٠٢٦ في ١٣:٥١

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

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

huangqianqian120

huangqianqian120/skillslibrary

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

مستكشف الملفات

3 ملفات

SKILL.md

readonly

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

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

المزيد من هذا المستودع

نفس المستودع

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