anthropics/skills180kfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
MANDATORY for every coding agent (Claude Code, Codex, or any other) — keep this repository's documentation in sync after any change to behavior, configuration, interfaces, events, schema, or features. Use automatically (without being asked) at the end of ANY change-set that adds or alters an env var, event type, hook behavior, session/agent state transition, API route or response shape, DB schema, WebSocket message, MCP tool, CLI command, or user-facing feature — and whenever the user asks to "update the docs / README / wiki / architecture". Knows the full doc surface (README + CN/VN/KO/ES, ARCHITECTURE, root index.html, wiki + i18n, server/client READMEs, docs/*) and which docs each kind of change touches.
把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。
读取 https://funcoding.ai/skills/hoangsonww/claude-code-agent-monitor/update-project-docs/install.md ,按里面的步骤帮我安装这个 Skill。
This repository keeps an unusually large, multi-surface, multi-language doc set. Docs drift silently because a change often belongs in 6–10 files across 5 languages plus two HTML pages. This skill encodes which docs exist, which change-types touch which docs, and how to propagate consistently (including the wiki i18n + cache-bump dance).
Authoritative inventory with exact section anchors lives in references/doc-map.md — read it when deciding where a specific change lands. The repo rules .claude/rules/docs-markdown.md ("update all affected docs together"), .claude/rules/wiki-i18n.md, and .claude/rules/i18n-parity.md are binding. Translation propagation — the mirrored READMEs, the wiki bundles, and the UI keys — is owned by the i18n-parity skill; run it whenever this skill's mapping sends you into a localized file.
Update docs in the same change-set (PR/commit) as the code, before claiming done — do not wait for the user to ask — whenever the change is observable from outside the module:
.env.example.events.event_type value) → every event-type list/table.Do NOT auto-update for: pure internal refactors with no observable/interface/config change, test-only changes, comment/typo fixes, or work the user explicitly scoped as "no docs". When unsure whether a change is observable, check the mapping below; if it touches any row, update.
| Change type | Docs to update |
|---|---|
| Env var | README.md, README-CN.md, README-VN.md, README-KO.md, README-ES.md (env tables), ARCHITECTURE.md (inline), server/README.md, wiki/index.html (env table) + wiki i18n, .env.example |
| Event type | README.md+CN+VN+KO+ES (hook-event table), ARCHITECTURE.md (Event types line), docs/PLUGINS.md, wiki/index.html + i18n, docs/DATABASE.md (if it enumerates types) |
| Hook behavior / state transition | docs/HOOKS.md, state-machine mermaid diagrams in README.md+CN+VN+KO+ES + server/README.md + docs/DATABASE.md + wiki/index.html, ARCHITECTURE.md (hooks.js row) |
| API route / response | docs/API.md, server/README.md (routes), ARCHITECTURE.md (routes row), server/openapi*.js (code) |
| DB schema | docs/DATABASE.md, ARCHITECTURE.md (ERD/schema) |
| WebSocket message | client/README.md (Event Types), server/README.md, wiki/index.html |
| MCP tool | mcp/README.md, docs/MCP.md |
| Feature / page / background service | README.md+CN+VN+KO+ES (feature table + data-flow list), ARCHITECTURE.md (module table), index.html (landing blurb), wiki/index.html + i18n, server/README.md or client/README.md |
| CLI command / script | README.md commands, CLAUDE.md / AGENTS.md, INSTALL.md / SETUP.md |
| New language | Run the i18n-parity skill and work through its new-language checklist — it covers docs/I18N.md, client/src/i18n/**, the switchers, format.ts, README-<XX>.md, and the full wiki bundle |
README.md and/or ARCHITECTURE.md. Get the wording right there; it anchors everything else.README-CN.md, README-VN.md, README-KO.md, and README-ES.md: mirror the SAME edits at the corresponding sections. Keep identifiers, env-var names, event names, and code in English; translate only prose. Render "Waiting" as 等待中 (zh) / Đang chờ (vi) / 대기 중 (ko) / En espera (es). Match each file's existing terminology — read the neighboring lines first. The i18n-parity skill owns this propagation and its glossary.index.html: one concise marketing sentence in the most relevant existing feature card — light touch, no new sections.wiki/index.html: add the detailed prose/table/diagram at the length and in the position its neighbours already use (see Match the wiki's existing shape below), then follow .claude/rules/wiki-i18n.md — add zh + vi + ko + es entries for every new English string to wiki/i18n-content.js, then bump the cache: increment CACHE_NAME in wiki/sw.js and the i18n-content.js?v= query string in wiki/index.html. Skipping the cache bump means returning visitors never see the update.server/README.md, client/README.md, and the relevant docs/*.md per the mapping.stateDiagram-v2 block that models it (they are duplicated across README/CN/VN/KO/ES, server/README, docs/DATABASE, wiki). Keep transition labels consistent.The wiki is a designed page, not a changelog: several of its blocks live in fixed-size boxes. A block written at 2–3x the length of its neighbours breaks the layout, so measure before you write, and copy the pattern you find.
#feature-carousel .feature-card) share one
fixed-height box. All 39 of them are a single <p>; the group runs
209–628 characters with a ~494 median, so write to roughly 450–550
characters (~65–80 words) — one paragraph, no lists, no sub-headings, no
exhaustive enumeration of every keybinding and edge case. Say what the feature is and
the two or three things that make it distinctive; the depth belongs in the
feature's own section further down the page..screenshot-caption) run ~150–300 characters:
the emoji, the bolded screen name, an em dash, one dense sentence.<section> with h3 + <ul>, never
crammed into a card or caption..claude/skills/update-project-docs/scripts/wiki-block-lengths.sh and
confirm your block sits inside the group's budget before finishing.script.js (see
.claude/rules/wiki-i18n.md) — the scroll-reveal pass adds classes at
runtime, so a :not([class]) selector that looks right in the file and in
jsdom can apply to nothing on the live page.scripts/doc-coverage.sh <new-term> [...] (e.g. the new env var / event type / identifier) and confirm every doc the mapping flags shows a HIT. The matrix is advisory — not every term belongs in every file — but a flagged doc reading 0 is a miss to fix.source --> target: label).zh, vi, ko, and es; cache versions bumped — CACHE_NAME in wiki/sw.js plus the ?v= query strings, which must match between wiki/index.html and the service-worker PRECACHE list (it matches on the full URL, query included, so a stale entry is simply never served)..claude/skills/update-project-docs/scripts/wiki-block-lengths.sh exits 0 — no carousel card or caption is an outlier, and any new card is placed by importance rather than dropped at the front.npm run format (or prettier --check on touched files); for any code touched, run the verification from CLAUDE.md (npm run test:server / test:client / mcp:typecheck).grep -n "<existing-neighbor-term>" <doc> (e.g. grep an adjacent env var to find the env table). references/doc-map.md lists the stable anchors per file.
anthropics/skills180kGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
anthropics/skills180kSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
前端开发
addyosmani/agent-skills103kGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
前端开发
addyosmani/agent-skills103kBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
前端开发
addyosmani/agent-skills103kOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
前端开发
nexu-io/open-design100kOpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
前端开发