Dev-Frontend — Domain-Correct Frontend Engineering

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.

Modular References

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.

• UI/rendering bug RCA: load dev-debugging.
• Build pipeline, bundle config, or deployment: load dev-devops.
• Project setup or file placement conventions: load dev-scaffolding.
• Data-driven dashboards, reporting views, or data format expectations: load dev-data.

0. Frontend Routing

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