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.

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.