/frontend-layout-implementer
Implement an approved Design Implementation Spec or screenshot-derived spec in React/Next.js using existing CSS Modules, Redux, TanStack, and Axios conventions. Excludes unrelated stacks, live design tools, and new styling systems.
$ npx -y skills add ytvee-dev/webdev-agent-kit --skill frontend-layout-implementer --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/frontend-layout-implementer
Context preview
The summary Claude sees to decide when to auto-load this skill.
Implement an approved Design Implementation Spec or screenshot-derived spec in React/Next.js using existing CSS Modules, Redux, TanStack, and Axios conventions. Excludes unrelated stacks, live design tools, and new styling systems.
A cross-platform frontend kit for Codex, Claude Code, Cursor, OpenCode, etc. It helps AI coding agents work predictably and safely with existing frontend projects.
Repo: ytvee-dev/webdev-agent-kit
Other skills on webdev-agent-kit.
- /agent-rules-skill-author
Create, evaluate, or edit this .agents WebDev Agent Kit, including AGENTS.md, common/**, project/**, skills/**, metadata, validators, and progressive-disclosure rules.
Open skill - /design-screenshot-spec
Turn user-supplied screenshots, copied inspect values, exports, assets, or design notes into a strict frontend Design Implementation Spec. Live design links alone are insufficient.
Open skill - /execution-plan-manager
Create, resume, analyze, or converge standard and deep frontend execution plans with traceable slices, evidence, and stop/resume state. Skip lightweight isolated edits.
Open skill - /frontend-architecture-planner
Plan architecture and ownership for standard or deep React/Next.js work across routing, state, data, styling, forms, builds, migrations, and implementation handoff. Skip micro-fixes and unrelated stacks.
Open skill - /frontend-bugfix-debugger
Diagnose and fix frontend defects from evidence, including unclear UI/runtime errors, broken routes, styling regressions, and hydration or client issues. Reproduce before editing; exclude planned refactors and backend-only debugging.
Open skill - /frontend-design-director
Set subject-grounded visual direction for standard or deep UI work, redesign, polish, critique, anti-template review, or design handoff. Skip technical micro-fixes and isolated code edits.
Open skill