skills.rest
aroido
aroidoOFFICIAL
Explore all skills by this author โ†’
WebsiteGitHub

agent-ui-implementer

Implement React/Chakra UI components, hooks, and routers from specification documents.

Updated Apr 22, 2026
Search Tags:#react#code generation#frontend development#component development#ui implementation#chakra ui
One-click install
npx skills add https://github.com/aroido/vibesmith --skill agent-ui-implementer
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: agent-ui-implementer
Source: https://github.com/aroido/vibesmith/tree/main/.codex/skills/agent-ui-implementer
Command: npx skills add https://github.com/aroido/vibesmith --skill agent-ui-implementer

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

์ด ์Šคํ‚ฌ์€ ์Šน์ธ๋œ ์ŠคํŽ™ ๋ฌธ์„œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ React/Chakra UI ํ”„๋ก ํŠธ์—”๋“œ ์ปดํฌ๋„ŒํŠธ, ํ›…, ๋ผ์šฐํ„ฐ๋ฅผ ์ž๋™์œผ๋กœ ๊ตฌํ˜„ํ•˜์—ฌ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

Core Features & Use Cases

  • ์ŠคํŽ™ ๊ธฐ๋ฐ˜ ๊ตฌํ˜„: UI Specification, Data Model, User Interactions๋ฅผ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ž๋™ํ™”๋œ ํด๋” ๊ตฌ์กฐ ์ƒ์„ฑ: packages/web/src/features/{name}/ ๋‚ด์— ํƒ€์ž…, ์ปดํฌ๋„ŒํŠธ, ํ›…, ์„œ๋น„์Šค ๋“ฑ์„ ํฌํ•จํ•œ ํ‘œ์ค€ํ™”๋œ ํด๋” ๊ตฌ์กฐ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • Chakra UI v3 ํ™œ์šฉ: ์ตœ์‹  Chakra UI ์ปดํฌ๋„ŒํŠธ์™€ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  • Use Case: ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์‹œ, ์ŠคํŽ™ ๋ฌธ์„œ๋งŒ ์ œ๊ณตํ•˜๋ฉด ์ด ์Šคํ‚ฌ์ด ๊ธฐ๋ณธ์ ์ธ ์ฝ”๋“œ ๊ตฌ์กฐ์™€ ์ปดํฌ๋„ŒํŠธ ๋ผˆ๋Œ€๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•ต์‹ฌ ๋กœ์ง ๊ตฌํ˜„์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

Quick Start

Use the agent-ui-implementer skill to implement the UI for the 'user-profile' feature based on the provided specifications.

Frequently Asked Questions about agent-ui-implementer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate React components from a specification document?โ–ผ

Generating React components from a specification document involves converting UI Specifications, Data Models, and User Interactions into standardized code, types, and component skeletons automatically.

What is the best way to structure a React feature folder with Chakra UI v3?โ–ผ

Structuring a React feature folder with Chakra UI v3 requires organizing types, components, hooks, and services into a standardized directory path like `packages/web/src/features/{name}/` to maintain code consistency.

Does this UI implementation approach support Chakra UI v3 best practices?โ–ผ

Yes, this UI implementation approach fully supports Chakra UI v3 best practices by leveraging the latest Chakra UI components to ensure standardized and modern frontend development patterns.

Can I automate React hook and router creation from a UI specification?โ–ผ

Yes, you can automate React hook and router creation from a UI specification, transforming approved specification documents into functional component skeletons, hooks, and routing logic to accelerate frontend development.

When do I need automated code generation for frontend development?โ–ผ

You need automated code generation for frontend development when implementing new features, allowing you to automatically generate basic code structures and component skeletons so you can focus on core logic implementation.

Related Skills

Explore More Software Engineering Skillsโ†’
ilandahanilandahan
9

aid-tech-spec

Generate a technical specification from PRDs and requirements.

Community
Advanced
LazyIsEfficientLazyIsEfficient
15

typescript-testing-frontend

Automate Jest-based frontend tests for TypeScript React components and hooks.

Official
Intermediate
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
Sir-chawakornSir-chawakorn
33

code-generation

Generate React components, Next.js API routes, and project templates.

Community
Intermediate