skills.rest
Galharel
GalharelCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Galharel/my-codex-skills --skill frontend-designer-skill
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
GalharelGalharel

architecture-skill

Map PRD and story-map artifacts to a traceable system architecture package.

Community
Advanced
I-OnlabsI-Onlabs
3

writing-plans

Convert designs into detailed implementation plans with file paths and tests.

Community
Advanced
ivanyeorsivanyeors

integration

Validate frontend-backend API contracts against OpenAPI specifications.

Community
Advanced
gaoqiongxiegaoqiongxie
1

screenshot-to-prototype

Convert UI design screenshots into interactive HTML prototypes.

Community
Intermediate