frontend-designer-skill

Plan frontend architecture, stack selection, state management, and API integration from artifacts.

Updated Jan 20, 2026

Search Tags:#design #ui #architecture #frontend #state-management #api-integration

Ready to run

npx skills add https://github.com/Galharel/my-codex-skills --skill frontend-designer-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-designer-skill
Source: https://github.com/Galharel/my-codex-skills/tree/main/frontend-designer-skill
Command: npx skills add https://github.com/Galharel/my-codex-skills --skill frontend-designer-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate architecture and story artifacts into a concrete frontend design, selecting the stack, state model, routing, and API integration to accelerate delivery.

Core Features & Use Cases

Language + framework selection with rationale and trade-offs.
State model design covering local/global state, caching, and synchronization with backend.
Routing hierarchy and view structure with entry points, layouts, and error handling.
API consumption strategy (REST/GraphQL/RPC) aligned with backend contracts and handoff docs.

Quick Start

Create a frontend architecture and stack plan from the provided architecture artifacts and story-map inputs.

Frequently Asked Questions about frontend-designer-skill

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

FAQPage Schema

How do I plan frontend architecture and select a technology stack from story artifacts?▼

Plan frontend architecture by translating architecture and story-map inputs into a concrete design. This process selects the language and framework, defines the state model, and outlines routing to accelerate UI delivery.

What is the best way to design state management and API integration for a new UI project?▼

Design state management by defining local and global state models alongside caching strategies. Align API consumption with backend contracts using REST, GraphQL, or RPC strategies to ensure proper client integration.

How do I structure routing hierarchy and view layouts for frontend applications?▼

Structure routing hierarchy by defining view structures, entry points, and layouts. Include error handling within the routing plan to ensure robust frontend navigation aligned with architecture artifacts.

Does frontend design planning require specific backend API contracts and design references?▼

Yes, frontend design planning requires backend API contracts and design references to align client integration. It applies to UI projects needing stack decisions, routing structures, and state models across varying backend contracts.

Can I use this approach to justify frontend framework selections and trade-offs?▼

Yes, you can justify frontend framework selections by documenting the rationale and trade-offs. The process produces design packets and markdown files that preserve traceability to story IDs and functional requirements.