Use for AST search and codemods. Triggers: ast-grep, sg, function/call/class/import, empty catch, missing await, YAML rules.
日本語の概要は準備中です。原文の説明を表示しています。
Use for frontend code and UI fixes. Triggers: CSS, responsive, animation, React, Vue, Svelte, Tailwind, redesign, anti-slop, 프론트엔드, UI 작업, 반응형, 디자인 수정.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
Build production-grade frontend implementations from an established product/design direction. This skill owns HTML/CSS/component/runtime implementation, responsive behavior, accessibility wiring, visual verification, and frontend platform rules.
Before selecting depth or claiming completion, read dev and its verification gate. For current/external evidence, use dev’s conditional routes.
| Condition | Reference |
|---|---|
| Every frontend change: role boundary | Role boundaries |
| Before designing or coding: surface defaults | Routing defaults |
| C2 list/detail/form screens | CRUD UI |
| Marketing/visual surfaces or C3+: choose topic/locale references | Core topic index |
| Framework implementation or configuration | Stack index |
| Components, direction intake, dials or objective/style classification | Design intake |
| Typography, color, layout, assets, icons or cutouts | Implementation |
| New/redesigned surfaces or visual audits | Anti-slop enforcement |
| Performance, accessibility, forms, state, platform or errors | Platform and runtime |
| API consumption, security UI or contract fixtures | Backend contracts |
| Any render/executable frontend artifact | Verification grounding |
| Before shipping a production frontend surface at C2+ | Full pre-flight |
Start with references/core/anti-slop.md, references/core/aesthetics.md, references/core/responsive-viewport.md, and references/core/visual-verification.md. Add domain/locale/stack references only when relevant.
For C2 ordinary app screens (form/table/list/detail), references/core/crud-ui.md alone suffices; add the style references above for marketing/visual surfaces or C3+ work.
dev-debugging.dev-devops.dev-scaffolding.dev-data.Before designing or coding, classify the work:
| Decision | Options | Why It Matters |
|---|---|---|
| Product surface | landing, app, dashboard, AI tool, public service, education, game, creative | Sets density, typography scale, asset requirements |
| Locale | Korean-first, global/i18n, English-only | Sets CJK typography, copy, date/number formats |
| Density | campaign, consumer app, productivity, SaaS, ops, finance, developer console | Prevents landing-page composition inside repeated-work tools |
| Asset need | none, screenshot, product photo, diagram, chart, illustration, soft 3D, game asset | Prevents asset-free gradient/card UI |
| Soft 3D/character gate | not allowed, subtle, primary | Prevents generic cute 3D/mascot slop |
| Motion intensity | static, feedback-only, expressive, cinematic | Prevents cinematic motion in utility workflows |
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Use for AST search and codemods. Triggers: ast-grep, sg, function/call/class/import, empty catch, missing await, YAML rules.
日本語の概要は準備中です。原文の説明を表示しています。
Use for coding, PR delivery, scaffolding and QA. Triggers: develop, fix, refactor, test, review, docs, browse, stacked PR, 개발, 수정, 검토, 스택 PR.
日本語の概要は準備中です。原文の説明を表示しています。
Use for module boundaries and dependencies. Triggers: circular import, coupling, barrel, re-export, validation placement, 모듈 경계, 순환 참조.
日本語の概要は準備中です。原文の説明を表示しています。
Use for APIs, servers and app databases. Triggers: REST, GraphQL, migration, query optimization, middleware, caching, queues, 백엔드, API 작업, 마이그레이션, 쿼리 최적화.
日本語の概要は準備中です。原文の説明を表示しています。
Use for code/PR/diff review and refactor audits. Triggers: review this, before merge, antipattern, 리뷰, 코드 리뷰, 머지 전에 확인.
日本語の概要は準備中です。原文の説明を表示しています。
Use for analytics and data pipelines. Triggers: ETL, ELT, data quality, SQL optimization, schema drift, backfill, 데이터 파이프라인, 데이터 품질, 백필.
日本語の概要は準備中です。原文の説明を表示しています。