菜单
Use when creating, editing, reviewing, or validating UI design across Genfeed.ai apps/packages. Enforces the root DESIGN.md contract, shared tokens, component consistency, and @google/design.md validation.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | design-system-guard |
| description | Use when creating, editing, reviewing, or validating UI design across Genfeed.ai apps/packages. Enforces the root DESIGN.md contract, shared tokens, component consistency, and @google/design.md validation. |
| version | 1.0.0 |
| tags | ["design-system","design-md","ui","tokens","consistency","validation"] |
Use this skill for UI work that can affect visual consistency anywhere in the monorepo: app, website, docs, desktop, mobile, extensions, packages/ui, packages/styles, packages/workflow-ui, or shared Tailwind/theme code.
Read these before changing UI tokens or broad component styling:
DESIGN.md — agent-readable visual identity and token contract.packages/ui/web-tokens.scss — semantic theme variables and invariant tokens.packages/styles/globals.scss — Tailwind v4 theme mapping and global UI behavior.packages/styles/shadcn-theme.scss — shadcn-compatible variables, overlays, platform colors, effects.packages/next-config/tailwind.config.base.ts — shared Tailwind preset and radius/platform tokens.DESIGN.md. If the intended design direction does not fit, update DESIGN.md in the same change and explain why.@ui/primitives/* rather than raw form/control HTML.bun run design:lint after editing DESIGN.md.Always run:
bun run design:lint
Also run the narrowest relevant UI verification for the touched package, such as tests, type-check, Storybook/build, or Playwright screenshots when visual behavior changed.
DESIGN.md describes the whole repository, not a single app.DESIGN.md must stay compatible with @google/design.md.DESIGN.md.packages/ui or the appropriate shared package and document the pattern in DESIGN.md.<button>, <input>, <select>, <textarea>, <dialog>, <table>, <hr>, <details>, or <summary> in production TSX.Query Sentry errors, issues, and performance data. Available via MCP in Codex and Cursor, and via API skill in OpenClaw.
Runs a structured multi-phase verification pass on completed AI agent work — catching bugs, missed requirements, and incorrect assumptions before changes are committed. Triggers on: "check your work", "review this", after complex multi-step implementations, before committing major refactors, or proactively after any task longer than five steps.
Expert in web accessibility (WCAG 2.1 AA compliance) for React/Next.js applications, ensuring all projects are usable by everyone. Use when creating or reviewing UI components, adding keyboard navigation, checking color contrast, testing with screen readers, or auditing pages for accessibility issues.
Validate Next.js 16 configuration and detect/prevent deprecated patterns. Ensures proxy.ts usage, Turbopack, Cache Components, and App Router best practices. Use before any Next.js work or when auditing existing projects.
Generate channel-conform launch copy for Hacker News (Show HN) and Product Hunt. Triggers on "write a show hn", "show hn title", "hacker news launch", "product hunt tagline", "product hunt launch copy", "maker comment", "launch copy".
Create Genfeed workflows from natural language descriptions. Triggers on "create a workflow", "build a content pipeline", "make a video generation workflow".