# frontend-ui-functional

> Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns.

- Author: victor-wu
- Repository: victorGPT/vibeusage
- Version: 20260207221949
- Stars: 80
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/victorGPT/vibeusage
- Web: https://mule.run/skillshub/@@victorGPT/vibeusage~frontend-ui-functional:20260207221949

---

---
name: frontend-ui-functional
description: Use when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility checks, and performance-ready patterns.
---

# Frontend UI Functional

## Overview
Provide a lightweight, repeatable workflow for functional React/Vite/Tailwind UI using structure, tokens, accessibility, and performance-ready patterns plus reusable snippets.

## Project Overlay (Required)
If the repo contains `docs/skills/frontend-ui-functional/project-overlay.md`, read and apply it before starting. Project-specific rules override this skill.

## When to Use
- Building new UI pages, templates, or component libraries in React/Vite/Tailwind.
- Standardizing layout, token usage, a11y/accessibility, and performance practices across UI.
- Shipping functional UI quickly **without** skipping baseline a11y/perf checks.

## When Not to Use
- Pure copywriting/content strategy tasks.
- Non-React or non-Tailwind stacks.
- Deep visual branding exploration (use the `frontend-design` skill).

## Workflow (Minimum Pass)
0. **Project overlay check** → `docs/skills/frontend-ui-functional/project-overlay.md` (if present)
1. **Structure first** → `references/atomic-design.md`
2. **Apply styling tokens** → `references/styling-tokens.md`
3. **A11y pass** → `references/a11y-checklist.md`
4. **Performance + state pass** → `references/perf-and-state.md`
5. **Tooling + QA** → `references/tooling.md`

If time is tight, do a thin pass of **each** step rather than skipping a11y/perf.

## Quick Reference
| Need | Use |
| --- | --- |
| Project overlay | `docs/skills/frontend-ui-functional/project-overlay.md` (if present) |
| Structure system | `references/atomic-design.md` |
| Tokenized styling | `references/styling-tokens.md` |
| Accessibility/a11y | `references/a11y-checklist.md` |
| Performance + state | `references/perf-and-state.md` |
| QA tooling | `references/tooling.md` |
| Reusable UI snippets | `assets/snippets/*` |

## Reusable Snippets
- Button: `assets/snippets/button.tsx`
- Card: `assets/snippets/card.tsx`
- Form: `assets/snippets/form.tsx`
- Layout: `assets/snippets/layout.tsx`
- Lazy Route Boundary: `assets/snippets/lazy-route.tsx`
- Zustand Store: `assets/snippets/zustand-store.ts`

## Example (Single)
Note: replace literal strings with your project's copy/content source when applicable.
```tsx
import { Button } from "./button";
import { Card } from "./card";
import { PageLayout } from "./layout";

export function DashboardStub() {
  return (
    <PageLayout title="Overview" actions={<Button label="Create" />}>
      <div className="grid gap-4 md:grid-cols-2">
        <Card title="Revenue" description="Last 30 days">
          <div className="text-2xl font-semibold text-primary">$128,400</div>
        </Card>
        <Card title="Active Users" description="Daily active">
          <div className="text-2xl font-semibold text-primary">4,812</div>
        </Card>
      </div>
    </PageLayout>
  );
}
```

## Common Mistakes
- Skipping a11y/perf due to time pressure; do the minimum pass instead.
- Hardcoding colors instead of using tokens from `references/styling-tokens.md`.
- Mixing layout decisions with visual polish before the structure is stable.