skills.rest
TECH-HY
TECH-HYOFFICIAL
Explore all skills by this author →
GitHub

tpo-frontend-architecture

Defines frontend architecture rules, checklists, and review gates for technical product owners.

Updated Mar 22, 2026
Search Tags:#code review#accessibility#state management#frontend architecture#component design#ux checklist#technical product owner
One-click install
npx skills add https://github.com/TECH-HY/SKILLS --skill tpo-frontend-architecture-tech-hy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tpo-frontend-architecture
Source: https://github.com/TECH-HY/SKILLS/tree/main/skills/tpo-frontend-architecture
Command: npx skills add https://github.com/TECH-HY/SKILLS --skill tpo-frontend-architecture-tech-hy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend work often ships with only the happy path implemented, missing loading states, accessibility, responsive behavior, and clear component structure. This Skill gives a Technical Product Owner Agent a complete rulebook for planning, specifying, and reviewing frontend work so UI is delivered as a working product flow rather than isolated components. ## Core Features & Use Cases - Layered Architecture Guidance: Prescribes app, page, feature, entity, and shared layers with a default folder structure adaptable to any framework. - State and API Rules: Separates server state from UI state and requires centralized typed API clients instead of scattered fetch calls. - Review Checklists and Templates: Provides UX/UI review checklists, accessibility and performance rules, and a ready-to-use frontend task template for delegating work to a developer agent. - Use Case: A product owner agent needs to hand off a new dashboard feature. It uses the task template to define user flow, component hierarchy, UX states, accessibility, and acceptance criteria, then reviews the delivered implementation against the checklist before acceptance. ## Quick Start Ask the agent to plan and review a frontend feature using the frontend architecture guidelines, including component hierarchy, UX states, and acceptance criteria.

Frequently Asked Questions about tpo-frontend-architecture

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

FAQPage Schema
How do I structure a frontend project for maintainability?▼

Organize code into app, page, feature, entity, and shared layers so product capabilities are easy to find. Keep reusable UI, API clients, and utilities in a shared layer, and adapt folder naming to your framework while preserving the layering principle.

How should I separate server state from UI state in a frontend app?▼

Server state comes from APIs and needs caching, loading, error, and refetch handling, while UI state controls modals, tabs, filters, and form drafts locally. Never mix both into one uncontrolled global object, and avoid storing values derivable from existing state.

What should a frontend task specification include before development?▼

Define the goal, user flow, component hierarchy, data requirements, all UX states (loading, empty, error, success, permission denied), accessibility and responsive requirements, performance expectations, required tests, and acceptance criteria.

What accessibility requirements should frontend code meet?▼

Use semantic HTML first, visible focus states, keyboard navigation, labeled form fields, alt text, accessible modals, correct heading hierarchy, and sufficient color contrast. Prefer native elements over ARIA, since incorrect ARIA can worsen accessibility.

When should a frontend implementation be rejected in review?▼

Reject work that only implements the happy path without loading, empty, error, and permission-denied states. Also reject scattered raw fetch calls, missing keyboard accessibility, undefined responsive behavior, or UI that does not match the product requirement.

Related Skills

Explore More Product & Management Skills→
withmartian-sandboxwithmartian-sandbox

pre-dev-prd-creation

Creates PRDs with problem statements, personas, user stories, and success metrics.

Official
Advanced
WannaCry081WannaCry081

todo

Generate implementation-ready TODO checklists with owners, dependencies, and acceptance criteria.

Community
Intermediate
stars-endstars-end

context-api-contracts

Analyze frontend-backend API contracts, routes, and type definitions.

Official
Basic
ChrstprJohnChrstprJohn

nodejs-best-practices

Guide Node.js architecture decisions with layered structure and framework selection principles.

Community
Advanced