# Apply Frontend UI Guidelines

> Apply cross-cutting frontend UI patterns across components, hooks, routing, data fetching, styling, and user-visible states. Use when this capability is needed.

- Skill: `tomevault-io/apply-frontend-ui-guidelines` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/apply-frontend-ui-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/apply-frontend-ui-guidelines/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/apply-frontend-ui-guidelines

---


# Frontend UI Guidelines

## Purpose
Provide a consistent, maintainable baseline for building modern frontend applications with TypeScript: component patterns, data fetching, routing, styling, and UX states.

## When to use
Use this skill when you are:
- Building or refactoring UI components
- Introducing or updating data fetching patterns
- Designing feature/module structure
- Implementing routing and lazy loading
- Standardizing styling and theme usage
- Handling loading, empty, and error states


Avoid using this skill when:
- you are making a single small UI tweak (for example, a minor CSS change) with no structural impact
- you only need to fix one isolated issue with a known solution and do not need broader consistency checks

## Inputs
- Feature requirements and UX expectations
- Data sources (API endpoints, caching needs)
- Existing frontend stack (framework, router, query/cache library, UI kit)

## Outputs
- A consistent implementation plan (component tree + data dependencies)
- Component and hook scaffolds
- A UX-state plan (loading/empty/error)
- A minimal test strategy (where applicable)

## Core rules
- Components MUST have typed props and clear responsibilities.
- Side effects MUST be isolated (prefer hooks or service modules).
- Data fetching MUST have a consistent caching and invalidation strategy.
- UI MUST handle loading, empty, and error states explicitly.
- Styling MUST follow a single primary approach (theme-first where possible).

## Steps
1. Identify the feature boundary and public API (what the feature exports).
2. Design the component tree and state boundaries.
3. Define data dependencies:
   - what is fetched
   - when it is fetched
   - how it is cached and invalidated
4. Implement components using:
   - typed props
   - composition over inheritance
   - small reusable hooks
5. Implement loading/error UX.
6. Add verification:
   - basic render
   - one representative interaction
   - one representative error path

## Verification

- [ ] Components have typed props (no implicit `any`)
- [ ] Data fetching uses a consistent cache strategy
- [ ] Loading, empty, and error states are explicitly handled
- [ ] Basic render test passes
- [ ] One representative interaction works
- [ ] One error path renders correctly

## Boundaries

- MUST NOT use implicit `any` in props or state
- MUST NOT fetch data without handling loading and error states
- MUST NOT mix styling approaches within the same feature
- SHOULD NOT bypass the caching layer for server state
- SHOULD NOT embed business logic in UI components
- SHOULD NOT skip accessibility considerations (focus, keyboard nav)

## Included assets
- Templates: `./templates/` provides component and hook scaffolds.
- Examples: `./examples/` provides a feature layout blueprint.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->