# Apply Frontend UI Guidelines

> Frontend UI Guidelines

- Skill: `willyu1007/apply-frontend-ui-guidelines` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add willyu1007/apply-frontend-ui-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/willyu1007/apply-frontend-ui-guidelines/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: willyu1007 (https://skillmd.com/u/willyu1007)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/willyu1007/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.