메뉴
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 직업 분류 기준
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".
Optimize long-form content for generative answer engines with a GEO scorecard, citation-ready structure, source attribution, and schema recommendations. Triggers on "optimize for GEO", "AI answer engine optimization", "make this citation-ready", "improve AI Overviews", "optimize for ChatGPT citations".
Create source-backed Brand OS systems for AI-era brands, including positioning, voice, visual rules, content pillars, launch storytelling, CTA strategy, evidence, and generation checklists. Triggers on Brand OS, brand system, brand operating system, AI-readable brand book, brand kit generator, launch storytelling, Japanese color references, cute studies, and source-backed brand strategy.
Apply the Genfeed.ai Brand OS to product copy, website CTAs, launch content, skills, examples, prompts, and generation context. Triggers when creating Genfeed-branded content, Genfeed website copy, Genfeed launch narratives, Brand OS generator examples, product messaging, or AI-readable Genfeed brand guidance.
Enforces tenant and soft-delete query guards for backend changes.
| 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.