메뉴
Create distinctive, production-grade frontend interfaces with high design quality. Use when asked to build web components, pages, or apps; generates polished code that avoids generic AI aesthetics.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
End-to-end PR/branch review: principal-engineer pass, hostile adversarial second pass, optional persona lens and Codex outside-view round, decision doc, opt-in inline comments/approve. Use on `/review-code` or 'review this PR/branch'.
Query Buildkite builds, jobs, logs, pipelines, and agents via the bk CLI, and release blocked builds by unblocking their production gate jobs. Use when investigating CI failures, reading build logs, retrying or rebuilding builds, watching build status, or when given Buildkite URLs with 'release these', 'unblock these', 'promote to prod', or 'push to prod'.
Router for me&u work tools. Ship a Linear issue end-to-end (ship-it/auto/autonomous on a Linear URL or ID); create/rewrite agent-ready Linear cards & spikes; query/release Buildkite via bk; query Datadog via pup; orchestrate multi-perspective PR review; generate the daily brief; morning brief triage; regenerate GraphQL schema.gql; fix Redis 6379 "port already allocated" conflicts.
Write and test ast-grep rules for structural (AST) code search — patterns that grep/text search cannot express (e.g. "async functions without error handling", "calls with a specific argument shape", "write an ast-grep rule").
Router for Cloudflare platform work — Workers, Pages, KV/D1/R2, Workers AI/Vectorize, WAF, Wrangler, Agents SDK, Durable Objects, Sandbox SDK, Email. Use for any Cloudflare build/deploy/review; retrieves from CF docs.
Query the codebase knowledge graph for structure — callers, call chains, dependencies, dead code, impact analysis, Cypher/search_graph syntax. Use on `/codebase-memory` or "explore the codebase / who calls this".
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when asked to build web components, pages, or apps; generates polished code that avoids generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. The user provides requirements: a component, page, app, or interface, possibly with context about purpose, audience, or technical constraints.
Commit to one bold aesthetic direction:
Bold maximalism and refined minimalism both work. The key is intentionality, not intensity: choose a clear conceptual direction and execute it with precision. Match implementation complexity to the vision: maximalist designs need elaborate animation and effects; minimalist designs need restraint and careful spacing, typography, and subtle detail.
Every design should feel genuinely designed for its context, and no two generations should look alike: vary light/dark themes, fonts, and aesthetics, and never converge on common choices (Space Grotesk, for example) across generations.
The output is working, production-grade code (HTML/CSS/JS, React, Vue, etc.): functional, visually striking, cohesive, and meticulously refined. Don't hold back; commit fully to the distinctive vision.
